Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review command in your #code-reviews channel
Join 3669 other students
Log in to get
Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.
Subscription includes
Course level: Intermediate
Practice your HTML, CSS and JavaScript skills by building reusable website components independently. Create a personalized nav bar, a text revealing button, a framed image loader, a theme selector, and an image gallery for use in a wide range of projects. Please note: this course does not cover Web Components.
This course contains 21 interactive scrims
How to build a Personalized Navbar
How to build a Text-revealing button
How to build a Framed Image Loader
How to build a Page Theme Selector
How to build a Gallery with Key Click
Flexbox
Element manipulation in the DOM
Basic JS
Creating elements using the JavaScript DOM
Transitions
Event listeners
HTML forms
HTML dropdown menus
Key Codes
In this project, you'll create a Navbar which shows your name, as entered in the input box.
Here, you'll create a button which shows and hides text (or anything else) - perfect for use in many types of projects.
This project lets you build an image loader to show off all your awesome photos.
Practice adding themes to your page.
Show off even more photos by building a clickable gallery.
Before taking this course, you should have a basic understanding of HTML, CSS, and JavaScript. If you're not there yet, check out these free courses:
Hi, my name is Jad Khalili, and I have been an online instructor for over 3 years, in which I've taught over 60,000 students from around the world. I especially enjoy teaching HTML, CSS, and design.
Think you know HTML, CSS and JavaScript? Want a chance to flex your skills and see how you’ll manage in the real world? This is the course for you.
In Build Components with HTML, CSS and JavaScript, you'll practice building five useful components which can be used across a range of websites and apps.
You'll create a personalized nav bar, a text revealing button, a framed image loader, a theme selector, and an image gallery, all by yourself, giving you the confidence to code independently, just like you would on the job.
If you're worried you won't be able to complete all the projects, don't be! It's all too easy to underestimate our own abilities, so give it a try!
After each component, teacher Jad Khalili will run you through how he would've approached the challenge, and you’ll have the chance to compare your work and perhaps pick up some new tips and tricks along the way.
You’ll finish up with a freestyle project to put your new components to the test and show off your new skills.
So what are we waiting for? Let's get building!
to the QThis course is a little different from usual courses. Rather than teaching you concepts and then letting you practice, this course challenges you to build various components on your own, before running you through a suggested solution. This gives you the chance to practice your skills independently and code as you would on the job.
If you don't manage to build one of the components, don't worry! Jad will talk you through how he would build it, and you'll have the knowledge for next time.
