html-tags
Learning to use common HTML elements
Getting the Starter Files
For this exercise, you need to download the set of starter files that you will use in your Visual Studio Code project.
1.Click on the link below to go to the GitHub repository where the files are stored.
2. Download the ZIP containing the starter files.
Click on the Code button and then click on the Download ZIP option.
3. Store the Zip file in your projects folder.
The file name will default to html-tags-master.zip.
4. Unzip the zip file.
Use WinZip or 7Zip to extract the contents. Choose the "Extract Here" vs "Extract to html-tags". "Extract Here" will create a folder named "html-tags-master". Rename the folder html-tags.
5. Load the project directory in VS Code.
6. Reproduce the page below with the given starter project. (see Assignment Details section below)
7. Turn in Assignment
You can use one of the two following ways to turn in your work. Creating a CodePen pen is the easiest, but if you want to practice creating a Git repository and publishing to GitHub and Netifly you can do that as well.
Create Git and GitHub Repository, publish to Netifly.
Go through the same steps you did with the First Article assignment to create a local Git repository and a corresponding GitHub repository, and then publish the GitHub repository to Netifly. You will then submit the Netifly URL as your assignment. The steps for the First Article exercise are outlined in the Basic Git Usage to Start a New Project section. You just need to modify the project directory/name you are working with.
Create a CodePen pen and turn in URL.
Assignment Details
Your task is to reproduce this web page. The mockup below is an image. It is included in your starter project in the design folder. If you click on the file in VS Code, you can view it there.
This is a plain HTML page, no CSS.
Element Reference
Headers
<h1> - Top level header
<h2> - Second level headers
Anchors - <a>
the first link, when clicked, should navigate to a new page in the same tab.
the second link, when clicked, should launch in a new tab.
Images - <img>
the profile image is available in the images folder, images/profile.jpg
the google image is from an url: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
BlockQuote - <blockquote>
Thematic Break - <hr>
separates each section
Lists - <ul>, <ol>, <li>
unordered (bullet) list
ordered (numbered) list
Layout - <div>, <span>, <p>
<div> fills the entire width of container
<span> fills the width of its content
Formatting - <strong>, <b>, <i>
Special Characters
adds space
<, > adds < and > characters, which are special elements in html syntax and so they need to be escaped.
Last updated
