The Static Web: HTML + CSS Milestone Challenge

Create a site for your personal branding that will showcase your work and be used as part of your graduation self-marketing.

Setup

These commands are a helpful quick start. You may choose to ignore them completely and create your own directory structure. If you choose to use this recommendation, just copy the commands below. It doesn't matter what directory you are currently in. Run the following command in your terminal:

mkdir -p ~/workspace/challenges/static-web/html && cd $_

This will create a project folder and cd you into it. When you are ready to start the challenge, request the Github Classroom link from your instructor

• Once your repository is created on GitHub, copy the list of commands under "..or create a new repository on the command line" by clicking on the clipboard icon
• Paste the commands into your terminal. This will create a README.md file, add it, commit it, connect your local reop to GitHub, and set you up to push up the changes. (If the last command, git push origin master isn't automatically executed, hit enter/return to run it).

All of your work should be on a branch, NOT on master. To do this, type:

git checkout -b challenge
touch index.html
mkdir css && touch css/styles.css
mkdir images

You are now ready to work in the challenge branch.

If you would like to have your work reviewed, push up the branch (git push origin challenge) and submit a pull request on Github. A member of the instruction team will take a look and give feedback. Your work does not need to be complete to receive feedback.

Instructions

Create a site for your own personal branding. Keep in mind this is an HTML exercise, however it is also the beginning of your portfolio. We will be focusing on the HTML structure and syntax of your code. Keep styles simple.

Content and Technical Requirements

1. Title - make it meaningful.
2. Header element <h1> - This is the main headline; include your name and what this page is.
3. Photo
4. Article element containing your bio
5. Article element with links to resources or sites you like
6. Article element with two sections for future projects (placeholders)
7. Footer element with email and professional social media links; Github, twitter, LinkedIn, etc.
8. Semantic mark-up for all major elements.
9. Validate your html page with W3 validator: https://validator.w3.org/
10. Appropriate folder structure: images, css.

Notes

• Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines the content.
• Color scheme - choose primary, secondary, and tertiary colors in addition to black and white. Use these colors consistently in your stylesheet.

Page Titles and Headings: http://meetcontent.com/blog/introducing-content-page-titles-headings/ Explore and create color combinations: https://color.adobe.com