2_Beginning_HTML_CSS

U1.W1: Beginning HTML & CSS

Learning Objectives

1. Create a simple website from the ground up using HTML and CSS
2. Modify and improve the design of a simple website using CSS
3. Use and manipulate CSS using Chrome Web Tools

Directions

Everything in this challenge is within the context of the website you set up in the get started section.

1. Set up folders

• Create a unit1_week1 folder
• Within the unit1_week1 folder create an images folder
• Within the unit1_week1 folder, create a stylesheets folder

From this point forward, all work will happen within the unit1_week folder. All images should go in the unit1_week1/images folder and all css files should go in the unit1_week/stylesheets folder.

2. Intro to HTML

a. Learn

• Slides: Intro to HTML

Optional resources

• Build a simple website
• Beginners guide to HTML and CSS
• HTML tag cheatsheat

What other resources can you find? Share them in the resources spreadsheet in your google+ community (located in the links on the right)

b. Experiment

Create a new html page in your repository called dbc1.html

Add the following to dbc1.html (Use this to introduce yourself!)

• Doctype, head, title, and body
• Add one heading of each level (h1-h6)
• 2-3 short paragraphs
• Some italic and bold text
• Links that open in the same window, a new window and link to an e-mail address.
• Images and an image that's also a link
• Line break
• Unordered list and an ordered list

2. Intro to CSS

a. Learn

• Slides: Intro to CSS

Optional resources

• CSS Basics (styling)
• Mozilla's CSS - Getting Started (sections 1-6 if you're unfamiliar with CSS, sections 3-5 if you're familiar with CSS)
• Hexidecimal color
• Classes vs IDs

b. Experiment

Create a new css file in your repository called dbc1.css and save it to the stylesheets/ directory.

• Link the dbc1.css file to your html file using the "external" method
• Add colors, background colors or fonts of different parts of the page
• Use ids and classes to change specific elements

3. More HTML

a. Learn

• Slides: Intro to CSS

Optional resources

• An Advanced Guide to HTML and CSS

b. Experiment

Create a new html page in your repository called dbc2.html

Add the following to dbc2.html

• Header, content area, sidebar, and a footer using divs
• Spans
• Add padding, borders, and margins
• Center your document in the browser
• Add width and height to divs and give ids

4. More CSS

a. Learn

• Slides: More CSS

Optional resources

• Downloading CSS from a website
• Decoupling HTML from CSS

b. Experiment

Create a new css file in your repository called dbc2.css and save it to the stylesheets/ directory.

Link the dbc2.css file to your dbc2.html file

Add the following to dbc2.css:

• Psuedo-classes for links
• Positioning
• A div that contains an image and a caption, and position the caption absolutely overtop the image.
• Float side bar and content area

Structure and Standards http://girldevelopit.com/assets/intermediate-html-css/class1.html

5. Chrome Web Tools

a. Learn

• What's the DOM?
• DOM
• Chrome Web Tools Challenge

b. Experiment

Play with changing the CSS of your web page using Chrome Web Tools.

Visit any blog on [wordpress.com or create your own. Use the Chrome Web Tools to take a peek into the site. How does it differ from your html and css?

6. Reflect

Go to your reflection gist to write your reflection on 4_beginning_HTML_CSS.md.