Skip to content

Latest commit

 

History

History
39 lines (24 loc) · 2.99 KB

Instruction.md

File metadata and controls

39 lines (24 loc) · 2.99 KB
Raw

Instructions to Run the Code using Live Server Extension in VS Code

Introduction

This technical document provides step-by-step instructions on how to run the code for the "Simple Landing Page" and "User Profile Page" using the Live Server extension in Visual Studio Code (VS Code). The Live Server extension allows you to quickly launch a local development server and view your web pages with real-time updates as you modify your code.

Prerequisites

Before proceeding with the instructions, ensure that you have the following:

  1. Visual Studio Code (VS Code) installed on your computer.
  2. The Live Server extension installed in VS Code. If you haven't installed it yet, you can do so by following these steps:
    • Open VS Code.
    • Click on the Extensions icon in the Activity Bar on the side.
    • Search for "Live Server" in the Extensions Marketplace.
    • Click the "Install" button next to the "Live Server" extension.

Instructions to Run the "Simple Landing Page" Code

  1. Open VS Code and navigate to the "index.html" file, which is located in the root folder of the project.

  2. Right-click anywhere in the editor window or open the Command Palette (View > Command Palette) and search for "Live Server: Open with Live Server" and select it. Alternatively, you can click the "Go Live" button in the status bar at the bottom-right corner of the VS Code window.

  3. The "Simple Landing Page" will be opened in your default web browser with a local development server. You can now interact with the page and view the dynamically generated user table.

  4. Click on any user name in the table to open the respective user's profile page.

Instructions to Run the "User Profile Page" Code

  1. Open VS Code and navigate to the "profile.html" file, which is located in the root folder of the project.

  2. Right-click anywhere in the editor window or open the Command Palette (View > Command Palette) and search for "Live Server: Open with Live Server" and select it. Alternatively, you can click the "Go Live" button in the status bar at the bottom-right corner of the VS Code window.

  3. The "User Profile Page" will be opened in your default web browser with a local development server. You can now view the user's profile, including their basic details and company information.

  4. Click on the tabs (Profile, Posts, Gallery, Todo) to switch between different sections of the user's profile. Please note that the "Posts," "Gallery," and "Todo" sections are placeholders and are labeled as "Coming Soon."

  5. The "Show Dropdown" button allows you to see the name of the user and other details in a dropdown menu. The "Sign Out" button inside the dropdown is a placeholder and will simply close the current webpage if clicked.

Conclusion

Congratulations! You have successfully run the "Simple Landing Page" and "User Profile Page" codes using the Live Server extension in VS Code. Now you can explore and interact with the web pages locally and make any necessary changes to the code for further development. Enjoy your coding journey!