Build Real World Projects Using CSS, HTML and Javascript

Boost your frontend knowledge by doing these little projects
Free tutorial
Rating: 4.7 out of 5 (10 ratings)
908 students
59min of on-demand video
English [Auto]

5 Web Projects with pure HTML, CSS, and JavaScript
Modern Techniques and Tricks
CSS3 Animations, Transforms, and Transitions
Modern HTML5, CSS3, and JavaScript Features


  • A text editor,
  • A modern web browser ( Chrome is recommended )
  • Basic Knowledge of HTML, CSS And Javascript


Class Overview:

The course is project is pretty basic and anyone who has just started out and have some experience in html, css and javascript, can enjoy this course.

The projects are unique and very good for beginners and intermediate, you'll learn a lot of techniques that advance developers uses.

What You Will Learn:

  • Project based teaching to sharpen your HTML, CSS & JavaScript skills.

  • Modern styling with flexbox, CSS animations, custom properties.

  • Perfect for beginners looking for things to build unique projects in a short timeframe.

Why You Should Take This Class:

The class is very interactive and has been in development for quite sometime, I have gathered all the information and created the roadmap to make you easily understand the topics through these projects.

Creating these projects will give you a boost and will motivate you create unique projects.

Who can participate:

The pre-requisites are simple, you should know the very basic of html, css and javascript and that's all you need.


I have provided the source code of each of these projects and also I have included the pdf file of the properties that were used in the project to understand it better.


  1. Animated Profile Card:- In this section we will create a animated profile card with nice hover effect and you'll learn about different properties which were used to achieve this design.

  2. Expanding Card:-

  3. Loading Animation

  4. FAQ Page Design

  5. Hidden Search Bar

Who this course is for:

  • Students who want to practice in three core technologies - HTML, CSS, and JavaScript
  • Students who have the basic knowledge of Front End Web Development and want to develop their skills
  • Students who want develop Web Design skills


Full Stack Web Developer
Daya Pandit
  • 4.7 Instructor Rating
  • 10 Reviews
  • 909 Students
  • 2 Courses

My name is Daya and I am a self learned Full stack web developer, I have been teaching web development for 2 years in a coaching institute, and I was looking for a platform to share my knowledge with the world and that's why I'm here.

I have developed more than 100+ real world projects for various platforms, and gave proper support frontend to back-end.

I am really delighted to share my knowledge that I've learned and still learning the best practices and wants to share with you guys.

Top companies trust Udemy

Get your team access to Udemy's top 19,000+ courses