TASK #1
TASK:
Create a web page for "About Me".
HINT:
You will need to create a new HTML
file
by saving
your existing index.html as "aboutme". To do this, open up your index and click on
File -> Save As
. Be sure to save the file in your existing "Responsive" project.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Use Photoshop to create a banner image for the
header of your web page.
HINT:
You will need to find a high quality
picture on
the internet and use Photoshop to scale and crop
it into the proper size. Be sure to save your
work in the "images" folder
of your project.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Add "About Me" to the navigation links, remove the background image, and the main text and subtext.
HINT:
You will need to erase everything
in the body of
your web page EXCEPT
for the header. You need to add a div to the end
of your header that will contain the
web page's title. You will also need to add the background image to the header using CSS.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Add a background image to the header using CSS.
HINT:
You will need to erase everything
in the body of
your web page EXCEPT
for the header. You need to add a div to the end
of your header that will contain the
web page's title. You will also need to add the background image to the header using CSS.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Stylize the header with a title and subtitle.
HINT:
You will need to erase everything
in the body of
your web page EXCEPT
for the header. You need to add a div to the end
of your header that will contain the
web page's title. You will also need to add the background image to the header using CSS.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Add a container to the article.
HINT:
You will need to add a div
class that will contain all of the content below the header, namely the main text
and sub-text
.
Then you will need to use the pre-built container
class in this div. To "see" the container, you can create an id with a
background color property and add that to the div that is using the container class.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Create a picture for the first section of the article.
HINT:
You will need to find a high quality
picture on
the internet and use Photoshop to scale and crop
it into the proper size. Be sure to save your
work in the "images" folder
of your project.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #8
TASK:
Add the picture you created to your web page.
HINT:
You will need to add the picture inline
using
the img tag. Be sure to use the built-in class "u-max-full-width"
so that the picture stretches.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #9
TASK:
Create a 12 column box with a bottom border.
HINT:
You will need to create a div that is 12
columns wide and 1 pixel high. Set a bottom border using an appropriate color.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #10
TASK:
Create a 3 column box for the first subtitle and a 9 column box for it's corresponding block of text..
HINT:
You will need to create a 3 and 9 column box within a 12 column box
using Skeleton's built-in classes.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #11
TASK:
Add a footer with copywrite information.
HINT:
You will need to add the footer tag
to the
bottom of your body. Add an appropriate background color and text
.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #12
TASK:
Fix up the footer.
HINT:
You will need to set the background color of the
body
to the same color as the footer
. Then you will need to set the background color of the article
to white.
CHECK UP:
Watch the video below to check that you completed the task.
CHALLENGE EXERCISE
- Add at least 2 more sections to your "About Me" web page.
- Add appropriate titles and text to each section.
- Stylize each box using Google Fonts. and the other CSS properties that we have learned.