Teaching Front-End Web Development
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
1_your_first_website
2_html_part_1
3_css_part_1
4_css_part_2
README.md

README.md

FED 101: An Introduction to Front-End Web Development

Welcome!

This is an informal course designed to teach you the basics of front-end web development. I’ve designed this course after a lot of thought about what someone trying to break into the industry should know, but it’s also my first attempt to teach a lot of information. This course will be a journey for all of us: feel free to suggest modifications as we go along, and give ample feedback.

Even if you don’t feel like you understand any of the information as we go through it, what I want you to take away from this course if nothing else is that you can do it. All it takes is exposure to the information you need to learn, practical application (practice!), and experimentation and tinkering until it makes sense. Don’t ever be discouraged by having “broken” something — programming at its core is nothing but fixing broken code. And remember that you don’t have to know all the details about how your computer does what it does to program.

What you will learn

I’d love to be able to teach you enough that after this course you can go out into the world and get a job in front-end web development, but realistically, this will only be the beginning of your journey. I will expose you to as many concepts as I can so that you understand them on the surface, but it will be up to you to dig further: read documentation, look for real-world examples to model from, and ask questions!

This course is structured to be as hands-on as possible, and every lesson will have further material that you can consume on your own to learn more. Take time on your own to experiment with the material and go beyond what we’ll do during class. If you do that consistently, you might even be able to start applying for entry-level or internship-level positions at the end of the course. If not, you’ll know much more than you did at the beginning — and you’ll know what you need to do next.

Course Schedule

Part 1: HTML/CSS

Day 1 prerequisites:

Jan 2.

Your first webpage.

Introduction, command line, file naming standards.

Jan 7.

HTML Part 1: Structure and Colors

Tags, attributes, semantic elements, rgbrgbahexadecimal colors

Jan 9.

HTML Part 2: Complex Structures and Accessibility

Tables, forms, accessibility standards.

Jan 14.

CSS Part 1: The Basics

Selectors, properties, declarations, etc.

Jan 16.

CSS Part 2: The Cascade

Inheritance, specificity, cascade rules.

Jan 21.

CSS Part 3: The Box Model and the browser inspector.

We’re going to do the most complex, frustrating thing you’ll ever do in CSS: move and resize boxes.

Jan 23.

Responsive design.

How to make a webpage work on all screensizes, browser compatibility.

Jan 28.

Fancy box models: A Quick Introduction to Flexbox

How flexbox works and how you can get started with it.

Jan 30.

How real FEDs do it: design to web page.

We’ll take the class period to build a real webpage from a real mock-up! Wow!

(First week of Feb. will be more design to web page classes, project for Part 1 will be due second week of Feb.)

Part 2: JavaScript and Programming Concepts

Part 3: Wordpress and PHP

Part 4: Front-End Build Tools and Workflows