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
- Chapter 1 : Introduction and Essential Installations
- Chapter 2 : Project - Photo Gallery
- Chapter 3 : Project - English Dictionary
- Chapter 4 : Project - Note App
- Chapter 5 : Project - BMI Calculator
- Chapter 6 : Project - Random Quote Generator
- Chapter 7 : Project - Temperature Converter
- Chapter 8 : Project - Currency Converter
- Chapter 9 : Project - Loan Calculator
- Chapter 10 : Project - Random Emoji
- Chapter 11 : Project - Weight Converter
- Chapter 12 : Project - Feedback UI
- Chapter 13 : Project - Button Ripple Effect
- Chapter 14 : Project - Digital Clock
- Chapter 15 : Project - Rotating Image Gallery
- Chapter 16 : Project - Random Color Generator
- Chapter 17 : Project - Real-Time Character Counter
- Chapter 18 : Project - Profile Statistics
- Chapter 19 : Project - Heart Trail Animation
- Chapter 20 : Project - Mini Calendar
- Chapter 21 : Project - Animated Search Bar
- Chapter 22 : Project - Social Media Selector Menu
- Chapter 23 : Project - Random Password Generator
- Chapter 24 : Project - Testimonial Slider
- Chapter 25 : Project - New Year Countdown
- Chapter 26 : Project - Emoji Rating
- Chapter 27 : Project - Sticky Navbar
- Chapter 28 : Project - Double Landing Page
- Chapter 29 : Project - Auto Text Effect Animation
- Chapter 30 : Project - Background Image Scroll Effect
- Chapter 31 : Project - Blurred Background Popup
- Chapter 32 : Project - Dark Mode Toggle
- Chapter 33 : Project - Drum Kits
- Chapter 34 : Project - To Do List
- Chapter 35 : Project - Random Photos
- Chapter 36 : Project - Multiplication App
- Chapter 37 : Project - Step Progress Bar
- Chapter 38 : Project - Mouse Event
- Chapter 39 : Project - Loading Bar
- Chapter 40 : Project - Image Slider
- Chapter 41 : Project - Video Trailer Popup
- Chapter 42 : Project - Clock
- Chapter 43 : Project - Month Calendar
- Chapter 44 : Project - Counter
- Chapter 45 : Project - Q Section
- Chapter 46 : Project - Tabs
- Chapter 47 : Project - Background Video
-
Chapter 48 : Project - Sidebar Menu
- Preview - Sidebar Menu
- Creating the Logo of the Website - Sidebar Menu
- Adding the Logo and Menu to Our Website Using HTML
- Styling the Menu Using CSS and Adding the Sidebar
- Using Font Awesome to Add Closing Button and Bars Icons
- Styling the Closing and Bars Buttons Using CSS
- Using JavaScript to Add and Remove the Sidebar
- Chapter 49 : Project - Navbar Menu
- Chapter 50 : Project – Age Calculator
- Chapter 51 : Project - Tip Calculator
- Chapter 52 : Project - Recipe Book App
- Chapter 53 : Project - Dice Roll Simulator
- Chapter 54 : Project - Pomodoro Timer
- Chapter 55 : Project - Rock Paper Scissors Game
- Chapter 56 : Project - Stopwatch
- Chapter 57 : Project - Weather App
- Chapter 58 : Project - Image Search App
- Chapter 59 : Project - Basic Calculator
Product information
- Title: Hands-On Projects with HTML, CSS, and JavaScript
- Author(s):
- Release date: August 2023
- Publisher(s): Packt Publishing
- ISBN: 9781835087725
You might also like
video
30+ Web Projects with HTML, CSS, and JavaScript
We will build together more than 30 different and creative web projects with three core technologies—HTML, …
video
Front-End Web Development with Modern HTML, CSS, and JavaScript
JavaScript code runs your browser as your HTML page loads. Adding JavaScript to your code can …
video
The Front-End Web Developer Bootcamp: HTML, CSS, JS and React
Are you interested in learning the skills and tools required to create modern, interactive, and responsive …
video
The Front-End Web Developer Bootcamp - HTML, CSS, JS, and React
This course covers essential topics including HTML and CSS fundamentals, creating responsive layouts, JavaScript for interactivity, …