Resources for FEWD 64
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Front End Web Development 64

Final Project Milestones

Final Project Requirements

# Date Milestone
1 Tuesday, May 22 Project Ideas
2 Tuesday, June 5 Wireframes
3 Tuesday, June 12 Start HTML & CSS rough draft
4 Tuesday, June 19 HTML & CSS rough draft
5 Tuesday, July 3 Start JavaScript rough draft
6 Tuesday, July 10 JavaScript rough draft
7 Thursday, July 12 Final project presentations

Homework Assignments

all assignments due at 11:59pm on the due date

# Due Date Assignment
1 Sunday, May 13 About Me & Portfolio pages
2 Sunday, May 20 Monument Magazine Blog
3 Monday, May 28 Monument Magazine Landing Page
4 Sunday, June 24 Rock Paper Scissors & Select Fun

Homework Assignment 1

Due Date May 13, 2018 at 11:59pm
  • Make your own portfolio site. (Feel free to use the portfolio folder in the starter code as a starting point.)
  • Use the exercises we’ve done together in class as a reference
  • Share tips with your classmates and ask questions in the #homework channel on Slack.
  1. Create a zip file containing all the files in your site
  2. Rename your zip file to include your name (like
  3. On Slack, create a direct message to Sasha & Aurielle, add your zip file, and send it to us.

Homework Assignment 2

Due Date May 20, 2018 at Midnight
  1. Finish the Monument Blog we started in class.

    • Update the GitHub Enterprise repo you created in class with your finished files, and Slack a link to your repo to Aurielle & Sasha.
    • Technical requirements:
    • Bonus tasks:
      • Style the aside section as shown in mocks_medium.png.
      • Add the header background image shown in mocks_advanced.png.
      • Add FontAwesome icons to the footer as shown in mocks_advanced.png.
      • Add a hover effect to the navigation items as shown in bonus_hover.gif.
      • Do some research on browser prefixes. What are they and why should they be used? Implement in your code.
  2. Reading

Homework Assignment 3

Due Date May 28, 2018 at Midnight
  1. Finish the Monument landing page we started in class.

    • Create a new GitHub Enterprise repo named FEWD-SF-64-Homework-3, upload your finished files, then Slack a link to your repo to Aurielle & Sasha.
    • Technical requirements:
      • Add the Google fonts identified in the mock.
      • Add the FontAwesome icons.
      • Structure the HTML using HTML5 semantic elements.
      • Add basic styles shown in monument_lab.png.
      • Create the multicolumn layout shown in the mock.
      • Use indentation in your HTML and CSS files to make your code readable.
      • Use HTML and CSS validators to check for errors before submitting.
    • Bonus tasks:
      • Add a hover effect to anchors, buttons, social media icons (see navigation animation and button animation). Extra bonus: Look up "transition effect hover CSS” to add a smoother transition to hover effects.
      • Create a fixed background effect on scroll for header image (see animation). Google “background-attachment CSS”
      • Turn the nav into a "sticky nav" so that it stays fixed while the user scrolls (see animation). Google “position CSS”
      • Add an effect to the images in the gallery on hover (see animation).
      • Implement "Jump Links" so that clicking on a nav item jumps you to that section of the page. Google “Jump Links HTML”

Homework Assignment 4

Due Date June 4, 2018 at Midnight

Final Project Wireframes

Deliverables (Slack zip file to Sasha & Aurielle):
  • Descriptive overview
  • Project wireframes
Technical Requirements:
  • Project overview consists of a couple of paragraphs describing your project.
  • Wireframes
    • are drawn or computer rendered.
    • illustrate what you'd like to do for your final project.
    • contain detailed annotations describing what each part of each page will do.
How to create wireframes:
  • Option 1: Use a tool like for creating wireframes.
  • Option 2: Draw out wireframes and scan or take a picture of them.
  • Option 3: Designer? Feel free to use Photoshop/InDesign/etc. to create wireframes.
Examples of wireframes:

Example 1 Example 2 Example 3 Example 4 Example 5


Class 1: Intro to HTML (5/8)



Class 2: Intro to CSS (5/10)



Class 3: CSS Selectors (5/15)



Class 4: CSS Selectors, continued (5/17)


Class 5: Layout (5/22)



Class 6: Layout Lab (5/24)



Class 7: Grid Systems & Responsive Design (5/29)


Class 8: CSS Positioning (5/31)


Class 9: Forms (6/5)

Class 10: Final Project Lab (6/7)

Class 11: Intro to JavaScript (6/12)

Class 12: Functions (6/14)

Class 13: jQuery (6/19)

Class 14: Interactions Lab (6/21)

Class 15: Interactions Lab (cont'd) (6/26)

Class 16: Final Project Lab (6/28)

Class 17: Interactions Lab II (7/3)

Class 18: Advanced JavaScript (7/5)

Class 19: Final Project Lab (7/10)

Class 20: Presentations (7/12)