Skip to content

Latest commit

 

History

History
40 lines (26 loc) · 2.92 KB

exercise2.md

File metadata and controls

40 lines (26 loc) · 2.92 KB

Exercise 2: Duplicate Twitter layout.

Twitter Home Page

This Twitter home page layout is fairly standard 2-column layout. If you view it on a browser, it's a responsive layout, but we're going to build it from the screenshot as a 2-column fix-width layout.

More instructions to come

What to do

  1. Fork this repository, create index.html and css files. When you have something to show create a pull request back to this repository master branch and we'll review the code in the pull request diff.
  2. Focus on clean code, semantic HTML, separation of content from presentation, and browser compatibility.
  3. The layout is provided as a .png in the assets folder. Open this in your image editor and use it to measure margins, pick colors, and everything else you need to do to build a website from a layout.

Layout Techniques

  • Table-based layouts- Seriously old-school. Don't do this.
  • Float-based layouts- How things have been done for years. A solid choice for consistent browser support.
  • Flexbox layout- The new hotness. Browser support looks pretty good these days: (http://caniuse.com/#search=flexbox). I'd say this is a solid choice to be very up-to-date with current trends. Bonus points if you use Flexbox and provide a float-based fallback if browser support isn't there.

What you'll need

  1. An image editor, like Photoshop, or something cheaper like Pixelmator, or something free like GIMP.
  2. A text editor like Github's Atom, Adobe's Brackets, Sublime Text, or Notepad++.
  3. Git, either using the command line (like a boss), or using one of these GUIs.
  4. A GitHub account.

What you can use

  1. HTML/CSS. Let's keep it up-to-date and use semantic HTML5.
  2. A CSS pre-processor like SASS or LESS, if you wish.
  3. Build tools like Grunt or Gulp.
  4. A CSS reset like reset.css or normalize.css

Feel free to over-engineer your build tools as much as you want, but keep in mind that the browser speaks HTML, CSS, and Javascript. Pre-processors like SASS and LESS might fall out of favor and build tools like Grunt and Gulp are very flavor-of-the-week.

What you can't use

  1. A drag & drop editor like Dreamweaver or FrontPage.
  2. A front-end framework like Bootstrap or Zurb Foundation. Let's walk before we run.