Skip to content

Files

Latest commit

df34abc · Dec 9, 2014

History

History
73 lines (45 loc) · 2.76 KB

fe-jan-2015.md

File metadata and controls

73 lines (45 loc) · 2.76 KB

Front-end Engineering - Jan 2015

Oh, hi. Welcome to the 2015 front-end engineering class. There will be lots of HTML, CSS, JavaScript and caffeine. It's going to be swell.

I've put together a list of things that you can do in order to prep for class. If you get stuck, don't sweat it. We'll be covering all of this in class.

Set Up Your Workstation

Tinker With Some Tech

The following is definitely not required before starting class, but if you get familiar with it, you will have an easier time in your first few weeks.

Learn HTML

There are two ways to start, and which one is "right" depends on how you learn.

If you like to read a bit first, and then tinker, I'd start here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction

If you like to tinker first, and then read, I'd start at Codepen. But first a warning! Codepen HTML snippets are not full HTML documents. Codepen generates the HTML document based on what you type. You are only typing the HTML body content, which is a really good place to start.

http://codepen.io/anon/pen/YPPLMg

OK. So, what do you type in the Codepen window? Have a look at the HTML elements listed here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Try typing them into the codepen window and seeing what happens.

If you're confused about an element, Google about it, and keep tinkering.

Here's a more in-depth set of resources: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML

Learn Basic CSS

There are lots of CSS tutorials out there. They'll probably teach you pretty bad practices, so I'd recommend sticking to the basics.

Here is a good resource: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS

MDN is generally about as good a resource as you can find online (for free, anyway).

Play around with CSS here: http://codepen.io/anon/pen/RNNyzz

Take a look at some of these sites, and find designs that you like:

https://dribbble.com/

http://www.awwwards.com/

http://psddd.co/

Then, try implementing something similar, just as a learning exercise.

The End

If you've gotten this far, good job. Take a break. The cohort is going to be a lot of work, but hopefully also a lot of fun.