Go Pro!Bootcamp

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

Build Components in HTML, CSS & JS

Enroll for freeGet started!

Join 3665 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses and career paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
The course creator Jad Khalili

with Jad Khalili

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.

You'll learn

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

You'll build

screenshot
Personalized Navbar

In this project, you'll create a Navbar which shows your name, as entered in the input box.

screenshot
Text-revealing button

Here, you'll create a button which shows and hides text (or anything else) - perfect for use in many types of projects.

screenshot
Framed Image Loader

This project lets you build an image loader to show off all your awesome photos.

screenshot
Page Theme Selector

Practice adding themes to your page.

screenshot
Gallery with Key Click

Show off even more photos by building a clickable gallery.

man

Prerequisites

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:

Meet your teacher

The course creator

Jad Khalili

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.

Why this course rocks

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!

F to the A oracle to the Q
How does this course work?

This 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.

Will it matter if I don't know how to build one of the projects?

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.