Skip to content

Latest commit

 

History

History
38 lines (25 loc) · 3 KB

exercise1.md

File metadata and controls

38 lines (25 loc) · 3 KB

Exercise 1: Duplicate Google's layout.

Google Home Page

Google is known not only for their search wizardry. Their sparse design is a trademark of their products as well. This makes duplicating their homepage a great starting point for our series.

What to do

  1. Fork this repository and create a branch named exercise1. Create your index.html and css files and do your work in this branch. When you have something to show create a pull request from your fork's exercise1 branch back to the tmbritton/fems 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.