WDI Fundamentals Unit 5
In this exercise, you'll learn the basics of laying out a webpage while building a small business website for ELK Web Design! The final design is based on an assignment submitted by a Front-End Web Development graduate, Lauren Kathe, and looks like this:
This design has four sections:
This exercise has two sections. First, we'll create the structure of the website. Then, we'll add CSS. If you don't see the JS Bin below, please refresh the page.
Your job is to use the notes below to write the HTML for ELK Web Design.
1) The Header:
ELK Web Design has a
header element inside the
body which contains:
nav element, with three linked menu items: "Work", "About", and "Contact."
For now you can simply wrap placeholder anchors around each
nav item with a
# as the value for the
href like so:
header also contains this image:
2) The Body
body there are two
sections. One section is for the "About" content, the other for "Services". The section headings are level 2, or
3) The Footer
paragraph: "© 2017 ELK"
Here's how the page looks without any styling:
Flip over to your CSS tab.
Apply the following styles to the
body: Set its
18px and the
Write a rule for
h1, and set its
Create a rule for
h2, and set its
Use only one
padding declaration to give
h2 a top and bottom
Create a rule for both
h1, h2 and set its
text-transform property to
Let's keep styling both headings. We'll use CSS shorthand to "underline" each one with a
h1, h2 a
border-bottom property that's
inline-blockin Fundamentals, here setting the
h2to have a
inline-blockwill make it so the border we added in the last step is only as wide as the element itself — instead of stretching across the entire page.
Create a style for
img elements, setting the
display property to
Center all images on the page horizontally by setting
autois a common way to center
blockelements. Here we are using the shorthand for the
margin: 0 auto;) to set the top and bottom margin to
0and the left and right margins to
ul style, and set its
none. Set its
0 and its
nonewill remove the bullet points in a list.
footer style in your CSS, and align its text to the center.
Here's what your webpage should look like in the output now:
All done for now!
Stuck? Check out the solutions for assistance.