HTML & CSS
These are the tools that give your websites structure and make them pretty. They're also easier to learn than JavaScript, and learning them first will make learning JS simpler later on. So take some time now to build a few pretty projects using just HTML & CSS.
Keep your projects small and simple. You will learn more from starting and finishing simpler projects than you will out of stumbling through fewer larger projects.
While you're building your projects, don't just focus on the finished product. Focus on the journey. This might sound corny, but the truth is that one of the biggest differences between beginner programmers and expert programmers is the way approach & build up projects in careful steps. You'll get a chance to learn about this in more detail later on, but it's never too late to get started!
Index
Learning Objectives
- HTML fundamentals & vocabulary
- CSS fundamentals & vocabulary
- HTML + CSS interactions
- Bootstrap
Specifications
- Take good notes. Be sure to focus on vocabulary!
- Follow a tutorial of your choice.
- Build a 5+ basic websites with only HTML & CSS
- Host them on Glitch.
- Make each one small and different. At the beginning you will learn more from a variety of smaller projects than from one large project.
- Make lots of mistakes. Explore your potential and your limits!
Resources
Awesome learning environments:
- Khan Academy - Interactively build cool websites from day 1. This environment is perfect for getting started, but do move on to Glitch as soon as you're comfortable.
- Glitch - Use this tool to develop your final projects. It is a little more challenging up front than something like CodePen, but prepares you for developing locally (on your own computer) and will grow with you (it is capable of running fullstack Node apps). It also provides convenient live hosting to show off to your friends.
Recommended Tutorials:
- (Take a look at each and Choose your favorite)
- Interneting is Hard. Very well done introduction to the web and using html/css from the bottom up.
- Quentin Watt Video Series
- FreeCodeCamp: Alternative to CodeAcademy
- CodeAcademy: Alternative to FreeCodeCamp
Vocabulary Lists:
- (These are very important, be sure to learn them well!)
- HTML: Timothy, CodeAcademy
- CSS: Divya, Timothy, CodeAcademy
Syntax References:
- W3 Schools: HTML, CSS - You will be using W3 Schools for the rest of your developer lives.
- HTML Cheat Sheet
- CSS Cheat Sheet
Other Great Resources:
- FreeCodeCamp has a forum, a chat room, and a youtube channel where you can find support from people working on the same problems as you.
- w3 Self-Assessments: HTML, CSS
- Marksheet.io - clean and friendly intro to HTML, CSS & the Internet.
- HTMLdog CSS - Somewhere between tutorial and reference
- Traversy: HTML5 - Traversy is always great
- Traversy: Bootstrap - Traversy is always great
- Austin pdf
Advanced CSS:
And as always, don't forget to ask each other for help on Slack!
