2. PROJECT GOAL
• Copy webpage style using HTML, CSS, Bootstrap
• Add icons
• Add links
• Website flow by links
Steps to Follow
• Select an easy design to mimic
• Divide webpage components between groupmates
• Complete the assign component and merge with groupmates
• Quality Assurance
3. VISUAL STUDIO CODE
Why VS-code?
• Light weight Better and more professional way to make webpages
• Open source Unified
• From Microsoft Reliable
How to Install?
• Download vs-code (google search) select 64-bit/32-bit from the first link run VS-
code setup agree, next check the ‘open with code’ option, next install, finish
How to start coding?
• Make a folder named after your project on the desktop
• Make a new file in that folder named index.html (this file will always be the first one to be shown when a
website is loaded)
• Right-click in that folder and choose open with code, you’ll have an index.html blank file opened in VS-code
• From the left sidebar select the last option in the first part named Extensions and search live server,
ReactJs code snippet and click on install
• From settings turn auto save on
6. HTML, HEAD, BODY
• Html
• The <html> tag represents the root of an HTML document.
• The <html> tag is the container for all other HTML elements
• Head
• The head tag is an element in HTML files that can contain metadata (data about
data) and script calls. The head tag is placed between the opening <HTML> and
<body> tags at the beginning of the HTML file. The metadata in the head tag is not
displayed, but the information is used by browsers and by search engines.
• Body
• The <body> tag defines the document's body. The <body> element contains all the
contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc. Note: There can only be one <body> element in an HTML document.
