FEWD Week #1: HTML/CSS Basics

Description

For the first assignment, you will work on creating your first website. Take what you've learned from class and build a portfolio site that showcases all of the projects you'll be completing over the next few weeks.

Build two pages

• an 'About' page and a 'Portfolio' page - that link to one another.
  • Your 'About' page should describe your mission and value proposition and
  • your 'Portfolio' page should include screenshots with descriptions of the work you [will] do for Relaxr, Startup Matchmaker, and CitiPix.

Don't worry if you can't come up with any text for the pages--I've provided you with some sample copy that you can use.

Real-World Applications

What are we doing?

• Creating a website with multiple pages that link together
• Styling a page using CSS via an external stylesheet
• Adding images to a website to improve SEO
• Clearly articulating your skills and experience on a landing page
• Providing customers or site visitors with important contact and social media information in a format they're accustomed to

Technical Requirements

• Link both pages together using an a tag
• Use a unique title and a single unique h1 tag (so, each page should have one of each of these tags, and while on a particular page, the content of the title and the h1 can be the same, the content of these tags should be different on the "about" page then they are on the "portfolio" page
• Show images using img tags including unique alt attributes
• Use an external CSS stylesheet to style your pages
• Select at least 5 elements on the page and apply at least 5 different css properties (font-size, color, font-family, background, text-decoration) to these elements (so, your style.css will have at least 5 css rules, that each contain at least 5 CSS declarations)
• Use at least 6 of these HTML tags on each page: (h1, h2, h3, h4, h5, h6, p, ul, ol, a, img, nav, span)
• Follow naming conventions, maintain consistency across your .html and .css files (e.g. all lowercase, hyphenated filenames, informative name)
• Indent nested elements (in your code) to increase your code's readability

Extra credit

• Experiment by adding additional HTML tags and CSS properties we did not cover in class - explore!

Resources

• There is starter text (but not code) for this assignment. You will build this assignment from scratch, and should feel free to get creative with regard to layout, color, styling, etc!

• Slides from class 1 and class 2.

Here are examples of a simple "About" and "Portfolio" page that fulfill the assignment requirements:

• Joe, the freelance developer's "about page":

• Joe, the freelance developer's "portfolio page":

Evaluation / Submission

You should create a new repository on GitHub called "homework-portfolio".

Clone this repo into the following directory on your computer: fewd/workspace/Week_01_basics/

If you have already created and cloned this repo, on your computer, simply move the "homework-portfolio" folder into the above folder

After committing your changes locally, push your code to the remote repository. When you are ready to submit, please slack me a link to your repo

I will grade each technical requirement and provide a numeric grade on a scale: does not meet expectations (0); meets expectations (1); exceeds expectations (2). The maximum possible score on this assignment is 16/16.

BONUS ASSIGNMENT/CHALLENGE

• Create a 2-3 page site on a topic of your choice

  • This should be in a separate repository on GitHub
  • Could be a site for a favorite band or comedian
  • Could be for an existing business

• Ensure all technical requirements above are met

• In addition, incorporate the following

  • Use at least 2 different Google fonts in your site (code for this goes in HTML & CSS)

  https://developers.google.com/fonts/docs/getting_started

• In your HTML

  • Research and use at least the elements that were introduced in HTML 5

  http://www.w3schools.com/html/html5_new_elements.asp

• In your CSS

  • Use margin
  • Use border
  • at least once using "long hand" notation
  • at least once using "short hand" notation
  • Use padding
  • Use at least 3 css properties that were introduced in CSS 3

  ​