05-Surf-and-Paddle - Chancey Ward

[chanceyw]

• [x] Create a new Issue with these tasks!
• [x] Use the git cli to initialize a new project
• [x] Checkpoint: Created and committed index.html and app.css boilerplate
• [x] Use the hub cli to create a repository called 05-surf-and-paddle
• [x] Use the git cli to create a branch called develop
• [x] In Github, open a PR from develop into master
• [x] Use CDN to link to Font Awesome
• [x] Create the markup to represent the pictured site
  • [x] Checkpoint: Create markup to represent one item in the timeline
  • [x] Markup: Navbar
  • [x] Markup: Header
  • [x] Markup: Left Column
  • [x] Markup: Sidebar
  • [x] Markup: "Most Popular Posts" with Images
  • [x] Markup: Footer
  • [x] Checkpoint: Duplicate the first item to create multiple items to style
  • [x] Complete: Push index.html
• [x] Add styles for page
  • [x] Checkpoint: Style the Layout of the site
  • [x] Style: Layout and Backgrounds Navbar
  • [x] Style: Layout and Backgrounds Header
  • [x] Style: Layout and Backgrounds Left Column
  • [x] Style: Layout and Backgrounds Sidebar
  • [x] Style: Layout and Backgrounds "Most Popular Posts" with Images
  • [x] Style: Layout and Backgrounds Sticky Footer
  • [x] Checkpoint: Style the details for the site
  • [x] Style: Details Navbar
  • [x] Style: Details Header
  • [x] Style: Details Left Column
  • [x] Style: Details Sidebar
  • [x] Style: Details "Most Popular Posts" with Images
  • [x] Style: Details Footer

[chanceyw]

https://github.com/chanceyw/05-surf-and-paddle/pull/1

[rtablada]

@chanceyw a few things that I'm seeing so far that will help you out:

Not everything will need classes, things like your p tags for the meat of the article don't need to have a .content class. If anything grab the parent and style all the p tags within it.

Except for grids, try not to make your class names describe the styling of things classes and HTML in general should say WHAT the content is and think of it as the outline. With the same HTML, I should be able to make a new CSS stylesheet and make the site look very different but still have the same flow in terms of readability.

[rtablada]

@chanceyw don't set the width on your header, it should fill the full page width to the edge.

Otherwise, you should make your left and right columns grouped together in some div-like element.

Looks like you are using positioning a lot more than needed. Only use position when lining things up won't work. Right now as you add more content, you will have to keep going back to the styles to update them. Your layout and styles should continue working as more content is added to the page.

[rtablada]

The footer nav should be full width, we can look at this after the CSS and responsive review.