2_Beginning_HTML_CSS

U1.W1: Beginning HTML & CSS

Learning Objectives

1. Create a simple web page from the ground up using basic HTML tags
2. Manipulate html elements using CSS

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. Reflect

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