4_beginning_HTML_CSS

U1.W1: Beginning HTML & CSS

Learning Competencies

• Create a simple web page from the ground up using basic HTML tags
• Manipulate HTML elements using CSS

Releases

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

Release 0: Set up folders

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

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

Release 1. 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

Release 3: 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

Release 4: Reflect

On your local phase_0_unit_1 repo, edit the my_reflection.md file associated with this challenge. Commit your changes and save them to GitHub.