Beginner demos and exercises on building web apps with HTML, CSS, and 'vanilla' JavaScript
In a field increasingly dominated by AI code generation, it is essential to have a firm grasp on the fundamentals in order to plan ahead, compose crystal-clear prompts, and recognize errors and poorly-formed code. The only way to build muscle is to exercise it, and learning programming is no different!
This collection of coding exercises focuses on HTML, CSS, JavaScript, and JSON. It is recommended to use the Live Server extension in VS Code and also be prepared to use Postman to test HTTP requests and responses.
Important
You need to deepen your problem-solving skills and core understanding of syntax and code composition independently before you can integrate AI tools in your workflow and become a more efficient developer. My learning resources are designed to do just that!
If you are unfamiliar with the basics of JavaScript, I recommend starting with my JavaScript Fundamentals Series and Modular JavaScript Series before continuing with any tutorials below that involve JavaScript.
Most topics include the following:
- Demo video on YouTube at this full playlist on the @CodeWithCarrie channel
- Starter and solution code in separate branches, with TODOs for extra practice corresponding to different stages of the DEMO code
See the tables below for specific links for each topic.
Tip
Please read my detailed instructions for how to fork, clone, and sync this repository.
Switch to the 01-html-basics-starter branch or the 01-html-basics-solution branch.
| Topics | Videos | Length |
|---|---|---|
| Structuring a Page with HTML | Demo | 10:14 |
| Structuring Content with HTML | Demo | 4:03 |
| Organizing Information with HTML | Demo | 2:43 |
| Adding Images & Links | Demo | 4:41 |
| TOTAL | 21:41 |
Switch to the 02-css-starter branch or the 02-css-solution branch.
| Topics | Code | Length |
|---|---|---|
| Introduction to CSS | Demo | 17:49 |
| Dynamic Styling | Coming soon! | |
| FlexBox Layout | Coming soon! | |
| Responsive Design with Grid & Media Queries | Coming soon! | |
| TOTAL | 0:00 |
Coming soon!
Coming soon!
...and more!
Front End Engineer and Lead Instructor at LaunchCode