/CSS-pairng-sesh

Primary LanguageHTMLMIT LicenseMIT

Week 2 Home

U1.W2: Beginning CSS - Mandatory Pairing Challenge

Learning Competencies

  • Link an external stylesheet to an html document
  • Position elements using CSS
  • Modify element style (size, color, etc) using CSS
  • Compare and use classes and ids to manipulate elements

Summary

In this challenge, you will be adding CSS to your clone of Berkshire Hathaway's website.

Go through Releases 0 and 1 prior to pairing. Then get together with your pair for releases 2, 3, and 4.

This challenge will also be completed in your phase-0-unit-1 repository.

Releases:

Release 0: Learn basic CSS

Go through the following resources to learn the basics of CSS.

Release 1: Link Your Stylesheet

Select one person's HTML version of the Berkshire Site HTML to modify with CSS. Then, using your command line, make a copy of that file in this css directory.

There are multiple ways to add CSS to HTML, but we generally prefer keeping formatting in a separate file, called a stylesheet. In this directory, you will see a file my-berkshire-stylesheet.css. This is the file you will be adding your styling to.

If you look at that file, you will see there is already something there. It's set to turn the background color to red when you get the external stylesheet set up properly and open it in a browser. When you have it linked, you can promptly delete that CSS.

You'll want to add the link to the my-berkshire-stylesheet.css in the html file you just copied into this directory.

Release 2: Add CSS

Make your site look like Berkshire Hathaway's! You may want to add classes or ids (decide which makes the most sense and why) to your HTML.

Get used to searching for how to do these things. You'll find a lot of great resources that will help you with HTML and CSS. w3schools is one good resource.

1. Change the following colors.

  • Text: #000080 (navy)
  • Links: #800080 (purple)
  • Visited links : #ff0000 (red)
  • background: #ffffff (white)

2. Position the links into two columns

  • Make the description text smaller and the normal font color.

3. Format the heading

  • Bold the text
  • Change the size
  • Center the text
  • Put the line breaks in (use CSS rather than HTML)
  • Make the "B" and "H" larger than the other letters in "Berkshire Hathaway"

4. Format the Geico Section to look the same as the web page

5. Add horizontal lines using CSS

(There should be four). Do not use the <hr> tag.

6. Did we forget anything? Does your site look like theirs?

Release 3: Compare

I know you've been dying to see the actual source code Berkshire Hathaway uses. Thankfully, you can see it pretty easily. Most browsers display source code when CTRL+U is pressed.

Now compare your HTML and CSS to the source. Make some notes of the differences and which site you think uses better practices. You'll need to answer some questions about this in your reflection section.

Release 4: Add/ beautify the site (Optional)

  • Add a picture of Warren Buffet and position it where it makes the most sense for you
  • Make the heading of the page look like a modern heading (rather than the top of a resume)
  • Add a new font

Release 5: Publish

Commit your changes for each file in this challenge, and push your changes to github. You do not need to be able to see your clone as a website, you should just have your code pushed to your fork of the phase-0-unit-1 repository.

Release 6: Reflect

Edit the my_reflection.md file associated with this challenge. Commit your changes and push them to GitHub. Check they are there!

Additional CSS Resources: