To get started on front-end web development, go through the entirety of this track on Treehouse.If you don't already have an account, you can get a two-week trial, which should be longer than you need to complete this pre-work.
Your first project is to create your own personal brand website. Take a look at Project 1 here. You should be able to get a decent site together in less than 8 hours.
Landing pages are a common thing to produce for startups, as you have to make one every time you have an idea or pivot. They're a great way to test assumptions, because you can get a rough idea of who is interested by creating one.
There are two scenerios here that require you to find and use resources on your own. There'll be a little guidance, but they are intended to mimic the type of experience you'd have at an early stage startup. Treat them as role-playing exercises as well as technical practice.
Writing a layout first is the most common way to start an app. We're going to use Bootstrap to quickly lay out and modify two webapps in order to create something usable in a short amount of time. Throwing together an app front-end, even one without buttons that work, is a great way to figure out what kind of data you're going to have to gather and logistics you'll have to organize.
These are also scenerios that will require you to own the project and define your own success.
- Bootstrap-based app skeletons from hand-drawn wireframes
- Bootstrap-based app skeletons from a description (unfinished)
Eloquent Javascript is going to be our first-line resource. These tutorials, readings and exercises are meant to fill in the gaps in your understanding. If you feel like it's a review, skip it and move forward until you see something you don't understand.
1 Values, Types and Operators
2 Variables, Program Structure
3 Functions
4 Data Structures (Arrays, Dictionaries)
5 Higher Order Functions
6 Objects (not the dictionary kind)
You should be able to complete this project if you understand the above resources:
7 Electronic Life
$ npm install -g planetproto
$ planetproto
Read this to find out why browsers are the absolute worst ever. DOM manipulation helps us to have dynamic pages, not just static HTML.
8 The Document Object (Model)
9 Events
10 DOM Exercises
11 Forms and Form Fields
The jQuery docs are here. Take a look at them, and then read the resources. jQuery helps us do 3 things - Find DOM Nodes, Create DOM Nodes, and Change DOM Nodes. Below are the resources you'll need for all of them.
Go back to the DOM exercises, adapt them to use jQuery.
12 DOM Exercises
HTTP
AJAX in jQuery - GET, POST
(Not finished, stay tuned for updates!)
13 Backbone App