FEM (Front End Masters) Tutorial Series

The FEMS Tutorial Series is a sequence of progressively more complex layouts that we will build in HTML/CSS. We'll start easy and ramp up into solving difficult problems. Feedback will be based around code reviewing pull requests, so we'll learn Git along the way as well.

Exercise 1: Duplicate Google's layout.

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, 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.

Useful Resources

• Mozilla Developer Network (MDN): authoritative source for info
• CSS Tricks: very helpful articles on specific techniques
• W3Schools Hider: Chrome extension to hide w3schools.com from search results. Seriously, when you're Googling for answers click on the links to MDN instead.