/hw-w01-d01-html-and-css-basics

Primary LanguageHTML

HW w01d01 HTML/CSS Basics

Description

For the first assignment, you will begin creating the beginnings of your first website. Take what you've learned from class and build a portfolio site that showcases projects you will be making as a developer. Build two pages - an 'About Page' and a 'Portfolio' - that link to one another. Your 'About Page' should describe your mission and value proposition and your 'Portfolio' should include screenshots with descriptions of the work for Relaxr, Startup Matchmaker, and CitiPix. Don't worry if you can't come up with any text for the pages--we've provided you with some sample copy that you can use.

Setup

  • Fork this repository to your own Github account
  • Clone your fork into your ~/code/fewd/homework directory
  • Open the directory in VS code
  • Create the necessary html and css files

Technical Requirements

  • Link both pages together using a tag
  • Use a unique title and a single unique h1 tag
  • 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
  • Use at least 6 different HTML tags (h1, h2, h3, h4, h5, h6, p, ul, ol, a, img) on your pages
  • Follow naming conventions, maintain consistency across your .html and .css files
  • Indent nested elements to increase your code's readability

Example:

For example, an "about me" page for a user might look like this:

a "portfolio page" for a user might look like:

These are very very pretty, don't go too crazy with the styling, just be sure to hit the technical requirements above and enough CSS to make the website easy to use and aesthetically pleasing.

Bonus

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

Hints

  • Remember to link your CSS to your HTML files
  • Open your html in chrome. You can do this by either double clicking the index.html or about.html files, OR you can type open index.html in the command line! Your choice. In any case, open up your html page in chrome while you work.
  • Your workflow should be 1. make changes to your html/css 2. save the files 3. refresh the page in chrome to make sure you got what you expected. Repeat for all the changes!

Submission

Normally homework will be due at midnight the day it is assigned and will submitted using github. We don't know how to do this yet, so for this homework (and this homework only!) it is due before class tomorrow. We'll be going over the submission process together in the morning.