Web Design Essentials – Class Projects
:: DANIEL SCOTT
Class Project 01 – Div Tags
1. There are 2 separate div structures you need to make on your own.
2. Homework 1:
a.
b. Create a new HTML document called: class-project-1a.html
i. Add all the HTML we need e.g. DOCTYPE, HTML, HEAD, BODY, TITLE ETC.
c. Create & nest 4 boxes as shown in the image above.
i. Sky Blue Box: 550x450px.
ii. Green Box: 450x150px.
iii. Amber Box: 300x250px.
iv. Blue Box: 100x70px.
3. Homework 2:
a.
b. Create a new HTML document called: class-project-1b.html
i. Add all the HTML we need e.g. DOCTYPE, HTML, HEAD, BODY, TITLE ETC.
c. Create & nest 2 boxes as shown in the image above.
i. Grey Box: 680x500px
ii. Yellow Box: 450x300px.
d. Add an <h1> tag inside the yellow box that reads: WHEN I SAY DIV…
e. Add a second <h1> tag inside the grey box BUT after the yellow box that reads: YOU SAY
TAG!
i. This is a tricky one ☺
4. Take a screenshot of both your completed pages in Chrome and share to show that you’ve done it in
any or all of the following:
a. Assignments section of this website
b. Add to comments of the page.
c. Social media & tag Dan
i. Instagram: @bringyourownlaptop #byolweb
ii. Twitter: @danlovesadobe #byolweb
iii. Facebook group here. #byolweb
Class Project 02 – Footer
1. Make the HTML footer match the mockup in your exercise files:
a. Exercise Files > Project 1 > Mockup Example - Project 1.jpg
2. It doesn’t have to be pixel perfect. Just guess the sizes and spacing.
3. Requirements
a. Ignore the map in the middle (we’ll do that later together).
b. Have spacing above and below the footer.
c. The footer text is: Main St, Blackabbey, Adare, Co. Limerick - Copyright 2017©
d. Put the text in a <p> tag and style the text to match the mockup.
e. Background color is black which is transparent.
4. Take a screenshot of both your completed pages in Chrome and share to show that you’ve done
it in any or all of the following:
a. Assignments section of this website
b. Add to comments on the page.
c. Social media & tag Dan
i. Instagram: @bringyourownlaptop #byolweb
ii. Twitter: @danlovesadobe #byolweb
iii. Facebook group here. #byolweb
Class Project 03 – Flexbox Header
1. Add the logo & nav to the header of our website using your new flexbox skills.
2. Your page will look like this when you are finished:
Exercise Files > Project 2 > Class Project 3.png
3. Requirements:
a. Add a background color to the entire site of: #FC5E55
b. Create a logo & nav box inside the header tag.
c. Add the logo to the logo box.
i. Image is in: Exercise Files > Project 2 > logo-roar-bikes.png
d. Add text to the <nav> box but don’t make them links or buttons yet, Just plain old text:
i. Book Online About Contact
e. Make the nav right aligned.
f. Remove the background color & height of the header.
g. Add padding to the top & bottom of the header.
h. Make sure both the logo & nav are centered vertically.
4. Take a screenshot of both your completed pages in Chrome and share to show that you’ve done
it in any or all of the following:
a. Assignments section of this website
b. Add to comments on the page.
c. Social media & tag Dan
i. Instagram: @bringyourownlaptop #byolweb
ii. Twitter: @danlovesadobe #byolweb
iii. Facebook group here. #byolweb
Class Project 04 – Nav Button
Goal: to create your own button class which looks like this:
1. You’ll leave ‘mybutton’ applied to the hero box but create a new style called ‘navbutton’ and
apply it to your navigation.
2. Requirements
a. They are all <a> tags.
b. Create your own custom class called ‘navbutton’.
c. White border around the button.
d. Text is Playfair Display.
e. Text is white
f. No underline.
g. No background color.
3. Take a screenshot of both your completed pages in Chrome and share to show that you’ve done
it in any or all of the following:
a. Assignments section of this website
b. Add to comments of the page.
c. Social media & tag Dan
i. Instagram: @bringyourownlaptop #byolweb
ii. Twitter: @danlovesadobe #byolweb
iii. Facebook group here. #byolweb
Class Project 05 – Header Design
Goal: to recreate this header:
1. Requirements:
a. Text should be white.
b. Span Tag & Span Class
i. Research & implement a ‘span tag’ to make the first part of the logo bold
i.e - DANIEL WALTER SCOTT – LOGO DESIGN
ii.
c. Logo should be left aligned & Nav right aligned.
d. Logo & Nav should be centred vertically in the header.
e. Nav should have working buttons styled as per the first image.
f. Set the entire background of the website to: #EBEBEB.
2. Take a screenshot of both your completed pages in Chrome and share to show that you’ve
done it in any or all of the following:
a. Assignments section of this website
b. Add to comments on the page.
c. Social media & tag Dan
i. Instagram: @bringyourownlaptop #byolweb
ii. Twitter: @danlovesadobe #byolweb
iii. Facebook group here. #byolweb
