Hands-On Projects with HTML, CSS, and JavaScript

Video description

Building modern websites requires a solid foundation in HTML, CSS, and JavaScript. In this comprehensive course, you will embark on an exciting journey of learning these core web technologies to create visually stunning and highly functional websites.

The course starts with an easy-to-follow tutorial on setting up Visual Studio Code and its essential extensions. Then, you will dive into the projects, starting with the HTML part and gradually moving on to CSS and JavaScript. Each project is built entirely from scratch, without any copied and pasted code.

Throughout the course, you will create modern, super cool, and responsive websites. You will delve into event handling, DOM manipulation, and asynchronous programming. With this knowledge, you will be able to create dynamic content, handle user interactions, and build engaging web experiences. You will also work on a series of hands-on projects that reinforce your learning and allow you to apply the concepts in real-world scenarios. From creating a loading bar and image slider to building a clock and implementing a Q&A section, each section can be treated as a separate project, expanding your skills and understanding.

By the end of the course, you will have learned how to write clean and efficient HTML, CSS, and JavaScript code. You will be able to confidently build modern, responsive websites from scratch, incorporating interactive elements and captivating designs.

What You Will Learn

  • Create visually appealing and functional websites using HTML, CSS, and JavaScript
  • Understand and write HTML, CSS, and JavaScript code with ease
  • Build modern and responsive websites from scratch without any copied code
  • Master important JavaScript methods and techniques
  • Explore contemporary styling techniques such as Flexbox, CSS animations, custom properties, and more
  • Delve into concepts such as DOM manipulation, event handling, array methods, HTTP requests, and beyond

Audience

This course is perfect for students interested in learning web development using HTML, CSS, and JavaScript. Whether you are a complete beginner or have some familiarity with coding, this course will take you from the basics to building modern websites. If you want to create visually appealing and functional websites using only HTML, CSS, and JavaScript, this course is for you.

This course is also suitable for individuals who want a hands-on environment to learn JavaScript fundamentals. Web development enthusiasts who want to enhance their skills and build responsive websites will find this course valuable.

No prior knowledge of HTML, CSS, or JavaScript is required.

About The Author

Dr. Sahand Ghavidel: Dr. Sahand Ghavidel holds degrees in mathematics, electrical, and computer science, and has earned a doctoral degree from the Faculty of Engineering and IT, University of Technology, Sydney.

He has researched for more than a decade about artificial algorithms and optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended many international conferences.

The number of people using and citing Sahand’s publications is significantly high, which is more than 1,600 citations, according to Google Scholar (April, 2021). He was also awarded the outstanding reviewer in the “International Journal of Electrical Power & Energy Systems” with a CiteScore of 5.79 in recognition of his contributions added to the quality of the journal.

Sahand has more than 15 years of programming experience. The first programming language he learned was Visual Basic when he was just 12 years old. Since then, he has made hundreds of websites and apps with different programming languages such as JavaScript and Python.

Table of contents

  1. Chapter 1 : Introduction and Essential Installations
    1. Introduction
    2. Installing VS Code and Its Extensions
  2. Chapter 2 : Project - Photo Gallery
    1. Preview - Photo Gallery
    2. HTML - Photo Gallery
    3. CSS - Photo Gallery
    4. JavaScript - Photo Gallery
  3. Chapter 3 : Project - English Dictionary
    1. Preview - English Dictionary
    2. HTML - English Dictionary
    3. CSS - English Dictionary
    4. JavaScript - English Dictionary
  4. Chapter 4 : Project - Note App
    1. Preview - Note App
    2. HTML - Note App
    3. CSS - Note App
    4. JavaScript - Note App
  5. Chapter 5 : Project - BMI Calculator
    1. Preview - BMI Calculator
    2. HTML - BMI Calculator
    3. CSS - BMI Calculator
    4. JavaScript - BMI Calculator
  6. Chapter 6 : Project - Random Quote Generator
    1. Preview - Random Quote Generator
    2. HTML - Random Quote Generator
    3. CSS - Random Quote Generator
    4. JavaScript - Random Quote Generator
  7. Chapter 7 : Project - Temperature Converter
    1. Preview - Temperature Converter
    2. HTML - Temperature Converter
    3. CSS - Temperature Converter
    4. JavaScript - Temperature Converter
  8. Chapter 8 : Project - Currency Converter
    1. Preview - Currency Converter
    2. HTML - Currency Converter
    3. CSS - Currency Converter
    4. JavaScript - Currency Converter
  9. Chapter 9 : Project - Loan Calculator
    1. Preview - Loan Calculator
    2. HTML - Loan Calculator
    3. CSS - Loan Calculator
    4. JavaScript - Loan Calculator
  10. Chapter 10 : Project - Random Emoji
    1. Preview - Random Emoji
    2. HTML - Random Emoji
    3. CSS - Random Emoji
    4. JavaScript - Random Emoji
  11. Chapter 11 : Project - Weight Converter
    1. Preview - Weight Converter
    2. HTML - Weight Converter
    3. CSS - Weight Converter
    4. JavaScript - Weight Converter
  12. Chapter 12 : Project - Feedback UI
    1. Preview - Feedback UI
    2. HTML - Feedback UI
    3. CSS - Feedback UI
    4. JavaScript - Feedback UI
  13. Chapter 13 : Project - Button Ripple Effect
    1. Preview - Button Ripple Effect
    2. HTML - Button Ripple Effect
    3. CSS - Button Ripple Effect
    4. JavaScript - Button Ripple Effect
  14. Chapter 14 : Project - Digital Clock
    1. Preview - Digital Clock
    2. HTML - Digital Clock
    3. CSS - Digital Clock
    4. JavaScript - Digital Clock
  15. Chapter 15 : Project - Rotating Image Gallery
    1. Preview - Rotating Image Gallery
    2. HTML - Rotating Image Gallery
    3. CSS - Rotating Image Gallery
    4. JavaScript - Rotating Image Gallery
  16. Chapter 16 : Project - Random Color Generator
    1. Preview - Random Color Generator
    2. HTML - Random Color Generator
    3. CSS - Random Color Generator
    4. JavaScript - Random Color Generator
  17. Chapter 17 : Project - Real-Time Character Counter
    1. Preview - Real-Time Character Counter
    2. HTML - Real-Time Character Counter
    3. CSS - Real-Time Character Counter
    4. JavaScript - Real-Time Character Counter
  18. Chapter 18 : Project - Profile Statistics
    1. Preview - Profile Statistics
    2. HTML - Profile Statistics
    3. CSS - Profile Statistics
    4. JavaScript - Profile Statistics
  19. Chapter 19 : Project - Heart Trail Animation
    1. Preview - Heart Trail Animation
    2. HTML - Heart Trail Animation
    3. CSS - Heart Trail Animation
    4. JavaScript - Heart Trail Animation
  20. Chapter 20 : Project - Mini Calendar
    1. Preview - Mini Calendar
    2. HTML - Mini Calendar
    3. CSS - Mini Calendar
    4. JavaScript - Mini Calendar
  21. Chapter 21 : Project - Animated Search Bar
    1. Preview - Animated Search Bar
    2. HTML - Animated Search Bar
    3. CSS - Animated Search Bar
    4. JavaScript - Animated Search Bar
  22. Chapter 22 : Project - Social Media Selector Menu
    1. Preview - Social Media Selector Menu
    2. HTML - Social Media Selector Menu
    3. CSS - Social Media Selector Menu
    4. JavaScript - Social Media Selector Menu
  23. Chapter 23 : Project - Random Password Generator
    1. Preview - Random Password Generator
    2. HTML - Random Password Generator
    3. CSS - Random Password Generator
    4. JavaScript - Random Password Generator
  24. Chapter 24 : Project - Testimonial Slider
    1. Preview - Testimonial Slider
    2. HTML - Testimonial Slider
    3. CSS - Testimonial Slider
    4. JavaScript - Testimonial Slider
  25. Chapter 25 : Project - New Year Countdown
    1. Preview - New Year Countdown
    2. HTML - New Year Countdown
    3. CSS - New Year Countdown
    4. JavaScript - New Year Countdown
  26. Chapter 26 : Project - Emoji Rating
    1. Preview - Emoji Rating
    2. HTML - Emoji Rating
    3. CSS - Emoji Rating
    4. JavaScript - Emoji Rating
  27. Chapter 27 : Project - Sticky Navbar
    1. Preview - Sticky Navbar
    2. HTML - Sticky Navbar
    3. CSS - Sticky Navbar
    4. JavaScript - Sticky Navbar
  28. Chapter 28 : Project - Double Landing Page
    1. Preview - Double Landing Page
    2. HTML - Double Landing Page
    3. CSS - Double Landing Page
    4. JavaScript - Double Landing Page
  29. Chapter 29 : Project - Auto Text Effect Animation
    1. Preview - Auto Text Effect Animation
    2. HTML - Auto Text Effect Animation
    3. CSS - Auto Text Effect Animation
    4. JavaScript - Auto Text Effect Animation
  30. Chapter 30 : Project - Background Image Scroll Effect
    1. Preview - Background Image Scroll Effect
    2. HTML - Background Image Scroll Effect
    3. CSS - Background Image Scroll Effect
    4. JavaScript - Background Image Scroll Effect
  31. Chapter 31 : Project - Blurred Background Popup
    1. Preview - Blurred Background Popup
    2. HTML - Blurred Background Popup
    3. CSS - Blurred Background Popup
    4. JavaScript - Blurred Background Popup
  32. Chapter 32 : Project - Dark Mode Toggle
    1. Preview - Dark Mode Toggle
    2. HTML - Dark Mode Toggle
    3. CSS - Dark Mode Toggle
    4. JavaScript - Dark Mode Toggle
  33. Chapter 33 : Project - Drum Kits
    1. Preview - Drum Kits
    2. HTML - Drum Kits
    3. CSS - Drum Kits
    4. JavaScript - Drum Kits
  34. Chapter 34 : Project - To Do List
    1. Preview - To Do List
    2. HTML - To Do List
    3. CSS - To Do List
    4. JavaScript - To Do List
  35. Chapter 35 : Project - Random Photos
    1. Preview - Random Photos
    2. HTML - Random Photos
    3. CSS - Random Photos
    4. JavaScript - Random Photos
  36. Chapter 36 : Project - Multiplication App
    1. Preview - Multiplication App
    2. HTML - Multiplication App
    3. CSS - Multiplication App
    4. JavaScript - Multiplication App
  37. Chapter 37 : Project - Step Progress Bar
    1. Preview - Step Progress Bar
    2. HTML - Step Progress Bar
    3. CSS - Step Progress Bar
    4. JavaScript - Step Progress Bar
  38. Chapter 38 : Project - Mouse Event
    1. Preview - Mouse Event
    2. HTML - Mouse Event
    3. CSS - Mouse Event
    4. JavaScript - Mouse Event
  39. Chapter 39 : Project - Loading Bar
    1. Preview - Loading Bar
    2. HTML - Loading Bar
    3. CSS - Loading Bar
    4. JavaScript - Loading Bar
  40. Chapter 40 : Project - Image Slider
    1. Preview - Image Slider
    2. HTML - Image Slider
    3. CSS - Image Slider
    4. JavaScript - Image Slider
  41. Chapter 41 : Project - Video Trailer Popup
    1. Preview - Video Trailer Popup
    2. HTML - Video Trailer Popup
    3. CSS - Video Trailer Popup
    4. JavaScript - Video Trailer Popup
  42. Chapter 42 : Project - Clock
    1. Preview - Clock
    2. HTML - Clock
    3. CSS - Clock
    4. JavaScript - Clock
  43. Chapter 43 : Project - Month Calendar
    1. Preview - Month Calendar
    2. HTML - Month Calendar
    3. CSS - Month Calendar
    4. JavaScript - Month Calendar
  44. Chapter 44 : Project - Counter
    1. Preview - Counter
    2. HTML - Counter
    3. CSS - Counter
    4. Bootstrap - Counter
    5. Font Awesome - Counter
    6. JavaScript - Counter
    7. addEventListener Method - Counter
    8. Adding Color to the Number - Counter
  45. Chapter 45 : Project - Q Section
    1. Preview - Q Section
    2. Start the HTML of the Website - Q Section
    3. Using Font Awesome for Adding Plus and Minus Icons to Our Website - Q Section
    4. Using CSS to Style the Title, Button, and the Answer - Q Section
    5. Start Using JavaScript for Toggling Between Classes - Q Section
  46. Chapter 46 : Project - Tabs
    1. Preview - Tabs Section
    2. Completing the HTML Part - Tabs
    3. Styling the Website Using CSS - Tabs
    4. Adding Functionality to the Website Using JavaScript - Tabs
  47. Chapter 47 : Project - Background Video
    1. Preview - Background Video
    2. Start the Project (HTML) - Background Video
    3. CSS Styling, Bootstrap, and Font Awesome - Background Video
    4. Adding Functionality Using JavaScript - Background Video
    5. Adding a Preloader - Background Video
  48. Chapter 48 : Project - Sidebar Menu
    1. Preview - Sidebar Menu
    2. Creating the Logo of the Website - Sidebar Menu
    3. Adding the Logo and Menu to Our Website Using HTML
    4. Styling the Menu Using CSS and Adding the Sidebar
    5. Using Font Awesome to Add Closing Button and Bars Icons
    6. Styling the Closing and Bars Buttons Using CSS
    7. Using JavaScript to Add and Remove the Sidebar
  49. Chapter 49 : Project - Navbar Menu
    1. Preview - Navbar Menu
    2. Creating the Logo of the Website
    3. Create the Menu Using HTML
    4. Learning How to Use Font Awesome
    5. Start Styling Our Website Using CSS
    6. Styling the Bars
    7. Styling the Menu
    8. Add and Remove Classes Using JavaScript
  50. Chapter 50 : Project – Age Calculator
    1. Preview - Age Calculator
    2. HTML - Age Calculator
    3. CSS - Age Calculator
    4. JavaScript - Age Calculator
  51. Chapter 51 : Project - Tip Calculator
    1. Preview - Tip Calculator
    2. HTML - Tip Calculator
    3. CSS - Tip Calculator
    4. JavaScript - Tip Calculator
  52. Chapter 52 : Project - Recipe Book App
    1. Preview - Recipe Book App
    2. HTML - Recipe Book App
    3. CSS - Recipe Book App
    4. JavaScript - Recipe Book App
  53. Chapter 53 : Project - Dice Roll Simulator
    1. Preview - Dice Roll Simulator
    2. HTML - Dice Roll Simulator
    3. CSS - Dice Roll Simulator
    4. JavaScript - Dice Roll Simulator
  54. Chapter 54 : Project - Pomodoro Timer
    1. Preview - Pomodoro Timer
    2. HTML - Pomodoro Timer
    3. CSS - Pomodoro Timer
    4. JavaScript - Pomodoro Timer
  55. Chapter 55 : Project - Rock Paper Scissors Game
    1. Preview - Rock Paper Scissors Game
    2. HTML - Rock Paper Scissors Game
    3. CSS - Rock Paper Scissors Game
    4. JavaScript - Rock Paper Scissors Game
  56. Chapter 56 : Project - Stopwatch
    1. Preview - Stopwatch
    2. HTML - Stopwatch
    3. CSS - Stopwatch
    4. JavaScript - Stopwatch
  57. Chapter 57 : Project - Weather App
    1. Preview - Weather App
    2. HTML - Weather App
    3. CSS - Weather App
    4. JavaScript - Weather App
  58. Chapter 58 : Project - Image Search App
    1. Preview - Image Search App
    2. HTML - Image Search App
    3. CSS - Image Search App
    4. JavaScript - Image Search App
  59. Chapter 59 : Project - Basic Calculator
    1. Preview - Basic Calculator
    2. HTML - Basic Calculator
    3. CSS - Basic Calculator
    4. JavaScript - Basic Calculator

Product information

  • Title: Hands-On Projects with HTML, CSS, and JavaScript
  • Author(s): Dr. Sahand Ghavidel
  • Release date: August 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781835087725