Skip to content

Gregwrightbjj/surfNpaddle

Repository files navigation

HTML Layout and Positioning

Description

One of the basic, foundational skills in being a professional web developer is the translation of a designer's mockup image into a webpage with HTML and CSS.

At the same time, we're also going to get into the habit of frequently creating git commits as checkpoints.

This assignment is due at 3am, Monday, February 2nd.

Objectives

Learning Objectives

After completing this assignment, you should be comfortable with

  • Translating images/PSDs to HTML and CSS
  • Hosting static pages on GitHub
  • Using git on the command line
  • Best practices for committing frequently
Performance Objectives

After completing this assignment, you be able to effectively use

  • Chrome developer tools
  • GitHub pages
  • Terminal
  • git
  • Your text editor of choice

Details

Deliverables
  • A GitHub pages-hosted repo containing
    • index.html
    • index.css
    • All images in an assets/images folder
Requirements
  • Valid HTML
  • Valid CSS
  • At least one git commit (with a message) every hour that you're working on this project

Normal Mode

Using HTML and CSS, re-create the included image (Iron Yard Blog Layout.png) as a webpage. Don't worry about the text content (feel free to use an ipsum generator), but use the original images and make your best effort to match the dimensions and styles of original page to yours.

Note: The "Never miss a post" callout stays in the bottom right corner of the screen whenever you scroll.

Hard Mode

Same as normal mode, but definitely match the styling to the blog post. You can check on how things are going with the Perfect Pixel Chrome extension. Also, make all the links and images behave the same as the actual page.

Additional Resources

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published