In this exercise you will you will practice building your webpage using HTML and CSS.
- View -> Editor Layout -> Two Columns
- To view this file in Preview mode, right click on this README.md file and
Open Preview
- Select your code file in the code tree, which will open it up in a new VSCode tab.
- Drag your assessment code files over to the second column.
- Great work! You can now see instructions and code at the same time.
Objectives
- Add photo.jpg to the webpage.
- Add your name as a heading to the webpage.
- Add an unordered list of your five favorite music artists.
- Add an ordered list of your top five favorite films.
- Add a hyperlink to your Facebook profile, or, meta.com.
Follow the Step by Step instructions below:
-
Open the
index.html
file and set up the following basic HTML document structure:<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
-
Set the title of the HTML document to your name:
<!DOCTYPE html> <html> <head> <title>your name</title> </head> <body> </body> </html>
-
Link to
styles.css
in thehead
element. -
Add five divider elements to the
body
element. -
Add a heading 1 to the first divider element that displays your name.
-
Add
photo.jpg
using an image element in the second divider element.. -
Add an ID attribute with the value
photo
on the image element. -
Add a heading 2 for
Favorite Music Artists
in the third divider element. In the same divider add an unordered list with your top 5 favorite artists. -
Add a heading 2 for
Favorite Films
in the fourth divider element. In the same divider add an ordered list with your top 5 favorite films. -
Add a hyperlink to your Facebook profile page in the last divider element. Alternatively, add a hyperlink to
https://www.meta.com/
. As a last step, addMy Profile
to the descriptive text of the<a>
tag.
Objectives
- Style the webpage using CSS.
Follow the Step by Step instructions below:
-
Open the
styles.css
file. -
Add a CSS rule for your image that sets the
border
property to2
pixels wide with asolid blue
color. -
Add a CSS rule for heading 1 containing your name and set its color to
blue
. -
Add a CSS rule for all
<h2>
headings and set their color togrey
. -
Add a CSS rule that applies a
margin
of4
pixels to the divider elements.
Nice work! To complete this assessment:
- Save your file through File -> Save
- Select "Submit Assignment" in your Lab toolbar.
Your code will be autograded and return feedback shortly on the "Grades" tab.
You can also see your score in your Programming Assignment "My Submission" tab.
- Make sure that HTML tags are closed properly.
- Use a different heading type for your name.
- Remember the box model.
- Review the lessons Creating a HTML document, Adding Images, Selecting and Styling, and Different types of selectors.