Build Components in HTML, CSS & JS

Unlock CourseGet started!

Join 1661 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
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, bootcamps, paths
100s of coding challenges
Certificates of completion
Exclusive Pro members chat
New courses monthly
The course creator Jad Khalili

with Jad Khalili

1661 students enrolled

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: HTML & CSS Crash course (https://scrimba.com/learn/htmlcss) and Introduction to JavaScript(https://scrimba.com/learn/introtojavascript)

The course creator

Meet your teacher

Jad Khalili

Hi, my name is Jad Khalili, and I have been an online instructor for over 3 years, in which Ive 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.

Go Pro!
Built with Imba