FED 101: An Introduction to Front-End Web Development
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.
Part 1: HTML/CSS
Day 1 prerequisites:
- Install git: https://git-scm.com/downloads
- If you have a Windows computer, install cmder: http://cmder.net/
- Install Visual Studio Code: https://code.visualstudio.com/
- Install GitKraken: https://www.gitkraken.com/
Your first webpage.
Introduction, command line, file naming standards.
HTML Part 1: Structure and Colors
Tags, attributes, semantic elements, rgbrgbahexadecimal colors
HTML Part 2: Complex Structures and Accessibility
Tables, forms, accessibility standards.
CSS Part 1: The Basics
Selectors, properties, declarations, etc.
CSS Part 2: The Cascade
Inheritance, specificity, cascade rules.
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.
How to make a webpage work on all screensizes, browser compatibility.
Fancy box models: A Quick Introduction to Flexbox
How flexbox works and how you can get started with it.
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.)