TASK #1
TASK:
Add a picture to your web page.
HINT:
You will need to create a folder called images
in your web project. Then search for a picture and download it
into your images folder. To add the picture to your web page, use the img
tag and set the src
to the pathway navigating to the picture.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Stylize the picture using CSS.
HINT:
You need to stylize the image
tag in your CSS file. Be sure to define the height, width
and border
. Be sure to preview your work before moving forward.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Add HTML5 tags to your web page.
HINT:
There are 4
HTML5 tags that you will need to incorporate: header, nav, article
, and footer
. The title
will go inside of the header, the navigation links
inside the nav, the paragraphs
inside of the article, and the copyright information
goes into the footer.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Add Google Fonts to your website.
HINT:
To add Google Fonts, you will need to go to their web page and select the fonts you wish to use. After selecting all that you like, click on the box
in the bottom of the page and add the CSS tag
to the head
of your web page. Then add the CSS properties
to the appropriate classes in your CSS file.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Stylize the HTML5 tags using your CSS file.
HINT:
You will need to add the names
of the HTML5 tags to your CSS file. Next, use the appropriate properties
and values
to stylize each.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Add a background picture to your web page.
HINT:
You will need to set the background image using the background property
and set the picture by setting the url value
. Once your picture is in place, use the set of properties found in the video below
to stretch the picture according to the dimensions of the web browser.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Make your footer stick to the bottom of your web page.
HINT:
Use the set of properties found in the video below
to ensure that your footer stays at the bottom of your web page regardless of how much text in contained therein, the size of your web browser, or the size of the text.
CHECK UP:
Watch the video below to check that you completed the task.
CHALLENGE EXERCISE
- Add an image and background picture to each web page in your website.