Mô tả

60 NEW HTML CSS JS projects - 60 HTML5, CSS3 and vanilla JavaScript

Welcome to our all-inclusive course on mastering HTML, CSS, and JavaScript, where you will acquire the skills you need to construct modern and responsive web applications by creating entertaining and engaging projects.

Our course is designed to offer you a hands-on experience, guiding you on how to code web applications from scratch with the latest web technologies: HTML5, CSS3, and vanilla JavaScript. This approach ensures that you understand each concept thoroughly and allows you to practice your newly acquired skills without relying on copy-pasting.

You do not need any previous knowledge of HTML, CSS, or JavaScript since we will take you through every syntax and explain each step in detail. Our course is suitable for both beginners and experienced programmers. Whether you're new to coding or looking to refresh your skills, our course is perfect for you.

We believe that learning should be enjoyable and engaging, which is why we've created an array of modern, super-cool, and captivating projects that you will develop throughout the course. Each project is created independently from scratch, and you can choose which ones to work on based on your interests.

Our course features separate videos for each technology, enabling you to learn and focus on the areas that interest you the most. For instance, if you're primarily interested in JavaScript, you can skip the HTML and CSS sections and dive right into the JavaScript videos.

You can use this course for 50 days 50 projects or 100 days of code challenges.

I'm Sahand, a web developer with over 16 years of experience, and I'll be your guide throughout the course, answering any questions you may have and providing valuable feedback to help you become a proficient web developer.

Are you ready to immerse yourself in the exciting world of web development? Join us today and start building astonishing websites!

Here is the list of projects:

  1. Age Calculator

  2. Tip Calculator

  3. Recipe Book App

  4. Dice Roll Simulator

  5. Pomodoro Timer

  6. Rock Paper Scissors Game

  7. Stopwatch

  8. Weather App

  9. Image Search App

  10. Basic Calculator

  11. Dad Jokes Generator

  12. Photo Gallery

  13. English Dictionary

  14. Anime Pics Generator

  15. Note App

  16. BMI Calculator

  17. Random Quote Generator

  18. Temperature Converter

  19. Currency Converter

  20. Loan Calculator

  21. Random Emoji

  22. Weight Converter

  23. Feedback UI

  24. Button Ripple Effect

  25. Digital Clock

  26. Rotating Image Gallery

  27. Random Color Generator

  28. Real-time Character Counter

  29. Profile Statistics

  30. Heart Trail Animation

  31. Mini Calendar

  32. Animated Search Bar

  33. Social Media Selector Menu

  34. Random Password Generator

  35. Testimonial Slider

  36. New Year Countdown

  37. Emoji Rating

  38. Sticky Navbar

  39. Double Landing Page

  40. Auto Text Effect Animation

  41. Background Image Scroll Effect

  42. Blurred Background Popup

  43. Dark Mode Toggle

  44. Drum Kits

  45. To Do List

  46. Random Photos

  47. Multiplication App

  48. Step Progress Bar

  49. Mouse Event

  50. Loading Bar

  51. Image Slider

  52. Video Trailer Popup

  53. Clock

  54. Month calendar

  55. Counter

  56. Q&A Section

  57. Tabs

  58. Background Video

  59. Sidebar Menu

  60. Navbar menu

Bạn sẽ học được gì

Acquire the skills to develop exciting projects from scratch with pure HTML, CSS, and JavaScript - no external libraries or plugins needed!

Expand your knowledge of HTML, CSS, and JavaScript while mastering responsive web design principles.

mbark on a tutorial journey to learn the fundamentals of HTML, CSS, and JavaScript.

Each project kicks off with crafting the HTML section, then we progress to the CSS and JavaScript segments upon completion.

Immerse yourself in an engaging project-based course that teaches HTML, CSS, and JavaScript, while guiding you to craft sleek, trendy, and responsive websites.

Discover vital JavaScript methods in this fresh, new course.

Enhance your proficiency in HTML, CSS, and JavaScript through project-centered instruction.

Explore contemporary styling techniques like Flexbox, CSS animations, custom properties, and more.

Delve into advanced concepts such as Document Object Model (DOM) manipulation, event handling, array methods, HTTP requests, and beyond.

Perfect for beginners who desire to build unique projects within a reasonably brief timeframe.

Yêu cầu

  • No prior knowledge of HTML, CSS, or JavaScript required. This course comprehensively covers all syntax related to HTML, CSS, and JavaScript.
  • Code is never copy-pasted, and all projects are initiated from scratch.
  • To facilitate comprehension, each line of code is clarified and exemplified in the project.

Nội dung khoá học

61 sections

Introduction

2 lectures
Introduction
01:54
Source code and project demo
00:03

Project - Age Calculator

4 lectures
Preview - Age Calculator
01:11
HTML - Age Calculator
08:33
CSS - Age Calculator
14:27
JavaScript - Age Calculator
21:38

Project - Tip Calculator

4 lectures
Preview - Tip Calculator
01:25
HTML - Tip Calculator
10:07
CSS - Tip Calculator
13:05
JavaScript - Tip Calculator
09:47

Project- Recipe Book App

4 lectures
Preview - Recipe Book App
00:55
HTML - Recipe Book App
11:59
CSS - Recipe Book App
21:10
JavaScript - Recipe Book App
31:33

Project - Dice Roll Simulator

4 lectures
Preview - Dice Roll Simulator
01:35
HTML - Dice Roll Simulator
12:36
CSS - Dice Roll Simulator
14:00
JavaScript - Dice Roll Simulator
28:57

Project - Pomodoro Timer

4 lectures
Preview - Pomodoro Timer
01:41
HTML - Pomodoro Timer
09:41
CSS - Pomodoro Timer
12:55
JavaScript - Pomodoro Timer
21:45

Project - Rock Paper Scissors Game

4 lectures
Preview - Rock Paper Scissors Game
02:06
HTML - Rock Paper Scissors Game
14:55
CSS - Rock Paper Scissors Game
14:32
JavaScript - Rock Paper Scissors Game
22:44

Project - Stopwatch

4 lectures
Preview - Stopwatch
01:58
HTML - Stopwatch
11:46
CSS - Stopwatch
20:43
JavaScript - Stopwatch
32:54

Project - Weather App

4 lectures
Preview - Weather App
02:28
HTML - Weather App
20:51
CSS - Weather App
37:08
JavaScript - Weather App
44:43

Project - Image Search App

4 lectures
Preview - Image Search App
02:23
HTML - Image Search App
17:31
CSS - Image Search App
44:11
Javascript - Image Search App
49:10

Project - Basic Calculator

4 lectures
Preview - Basic Calculator
01:42
HTML - Basic Calculator
16:19
CSS - Basic Calculator
25:06
JavaScript - Basic Calculator
21:44

Project - Dad Jokes Generator

4 lectures
Preview - Dad Jokes Generator
01:22
HTML - Dad Jokes Generator
11:58
CSS - Dad Jokes Generator
19:30
JavaScript - Dad Jokes Generator
31:09

Project - Photo Gallery

4 lectures
Preview - Photo Gallery
02:13
HTML - Photo Gallery
16:53
CSS - Photo Gallery
31:22
JavaScript - Photo Gallery
54:24

Project - English Dictionary

4 lectures
Preview - English Dictionary
01:43
HTML - English Dictionary
14:47
CSS - English Dictionary
12:56
JavaScript - English Dictionary
40:06

Project - Anime Pics Generator

4 lectures
Preview - Anime Pics Generator
01:18
HTML - Anime Pics Generator
13:35
CSS - Anime Pics Generator
19:23
JavaScript - Anime Pics Generator
28:23

Project - Note App

4 lectures
Preview - Note App
01:52
HTML - Note App
10:14
CSS - Note App
21:07
JavaScript - Note App
46:35

Project - BMI Calculator

4 lectures
Preview - BMI Calculator
02:13
HTML - BMI Calculator
14:59
CSS - BMI Calculator
15:33
JavaScript - BMI Calculator
18:43

Project - Random Quote Generator

4 lectures
Preview - Random Quote Generator
01:13
HTML - Random Quote Generator
16:31
CSS - Random Quote Generator
19:01
JavaScript - Random Quote Generator
25:11

Project - Temperature Converter

4 lectures
Preview - Temperature Converter
01:36
HTML - Temperature Converter
13:37
CSS - Temperature Converter
15:39
JavaScript - Temperature Converter
20:37

Project - Currency Converter

4 lectures
Preview - Currency Converter
01:47
HTML - Currency Converter
16:21
CSS - Currency Converter
14:28
JavaScript - Currency Converter
29:22

Project - Loan Calculator

4 lectures
Preview - Loan Calculator
01:41
HTML - Loan Calculator
14:23
CSS - Loan Calculator
09:43
JavaScript - Loan Calculator
15:34

Project - Random Emoji

4 lectures
Preview - Random Emoji
01:15
HTML - Random Emoji
08:25
CSS - Random Emoji
14:20
JavaScript - Random Emoji
27:24

Project - Weight Converter

4 lectures
Preview
01:39
HTML
13:43
CSS
17:19
JavaScript
20:59

Project - Feedback UI

4 lectures
Preview
02:06
HTML
16:11
CSS
23:00
JavaScript
24:36

Project - Button Ripple Effect

4 lectures
Preview
01:09
HTML
06:56
CSS
12:47
JavaScript
10:22

Project - Digital Clock

4 lectures
Preview
01:09
HTML
08:50
CSS
17:13
JavaScript
14:15

Project - Rotating Image Gallery

4 lectures
Preview
01:12
HTML
13:06
CSS
14:39
JavaScript
13:32

Project - Random Color Generator

4 lectures
Preview
01:17
HTML
08:07
CSS
08:34
JavaScript
22:58

Project - Real-time Character Counter

4 lectures
Preview
01:38
HTML
11:15
CSS
13:57
JavaScript
12:45

Project - Profile Statistics

4 lectures
Preview
01:44
HTML
13:02
CSS
14:35
JavaScript
18:13

Project - Heart Trail Animation

4 lectures
Preview
01:16
HTML
05:44
CSS
08:06
JavaScript
18:15

Project - Mini Calendar

4 lectures
Preview
01:09
HTML
08:28
CSS
11:13
JavaScript
11:41

Project - Animated Search Bar

4 lectures
Preview
01:10
HTML
10:27
CSS
18:09
JavaScript
11:23

Project - Social Media Selector Menu

4 lectures
Preview
01:53
HTML
13:28
CSS
17:17
JavaScript
15:38

Project - Random Password Generator

4 lectures
Preview
02:05
HTML
13:28
CSS
22:10
JavaScript
25:00

Project - Testimonial Slider

4 lectures
Preview
01:07
HTML
10:25
CSS
13:10
JavaScript
13:16

Project - New Year Countdown

4 lectures
Preview
01:20
HTML
09:14
CSS
16:40
JavaScript
18:57

Project - Emoji Rating

4 lectures
Preview
01:12
HTML
13:19
CSS
15:51
JavaScript
19:57

Project - Sticky Navbar

4 lectures
Preview
01:18
HTML
13:34
CSS
20:50
JavaScript
16:04

Project - Double Landing Page

4 lectures
Preview
01:26
HTML
08:11
CSS
16:42
JavaScript
12:34

Project - Auto Text Effect Animation

4 lectures
Preview
01:05
HTML
06:26
CSS
07:09
JavaScript
15:33

Project - Background Image Scroll Effect

4 lectures
Preview
01:33
HTML
07:21
CSS
10:28
JavaScript
09:52

Project - Blurred Background Popup

4 lectures
Preview
01:33
HTML
16:34
CSS
28:05
JavaScript
12:50

Project - Dark Mode Toggle

4 lectures
Preview
01:22
HTML
06:52
CSS
13:45
JavaScript
13:27

Project - Drum Kits

4 lectures
Preview
01:18
HTML
10:37
CSS
17:40
JavaScript
21:21

Project - To Do List

4 lectures
Preview
01:27
HTML
12:40
CSS
18:38
JavaScript
33:44

Project - Random Photos

4 lectures
Preview
00:58
HTML
09:07
CSS
10:42
JavaScript
12:15

Project - Multiplication App

4 lectures
Preview
02:00
HTML
11:33
CSS
16:01
JavaScript
23:05

Project - Step Progress Bar

4 lectures
Preview
01:24
HTML
13:09
CSS
22:15
JavaScript
29:35

Project - Mouse Event

4 lectures
Preview
01:41
HTML
07:21
CSS
12:44
JavaScript
07:50

Project - Loading Bar

4 lectures
Preview
01:02
HTML
07:05
CSS
09:40
JavaScript
08:48

Project - Image Slider

4 lectures
Preview
01:15
HTML
15:31
CSS
14:06
JavaScript
22:27

Project - Video Trailer Popup

4 lectures
Preview
02:15
HTML
15:50
CSS
21:05
JavaScript
10:43

Project - Clock

4 lectures
Preview
00:52
HTML
08:45
CSS
28:22
JavaScript
14:38

Project - Month calendar

4 lectures
Preview
01:18
HTML
12:15
CSS
21:07
JavaScript
26:34

Project - Counter

8 lectures
Preview
01:10
HTML
03:53
CSS
03:20
Bootstrap - Counter
02:55
Font Awesome - Counter
03:51
JavaScript
05:55
addEventListiner Method - Counter
04:34
Adding Color to the Number - Counter
02:31

Project - Q&A Section

5 lectures
Preveiw - Q&A Section
01:04
Start the HTML of the website - Q&A Section
05:05
Using Font Awesome for adding plus and minus icons to our website - Q&A Section
03:23
Using CSS to style the title, buttom and the answere - Q&A Section
11:01
Start using JavaScript for toggling between classes - Q&A Section
11:11

Project - Tabs

4 lectures
Preview - Tabs Section
01:15
Completing the HTML part - Tabs
06:13
Styling the website using CSS - Tabs
16:55
Add functionality to the website using JavaScript - Tabs
14:56

Project - Background Video

5 lectures
Preview - Background Video
01:22
Start the project (HTML) - Background Video
04:54
CSS styling, Bootstrap and Font Awesome - Background Video
10:24
Adding functionality using Javascript - Background Video
06:21
Adding a Preloader - Background Video
07:02

Project - Sidebar Menu

7 lectures
Preveiw - Sidebar Menu
01:10
Creating the logo of the website - Sidebar Menu
01:39
Adding the logo and menu to our website using HTML
04:31
Styling the menu using CSS and adding the sidebar
07:37
Using Font Awesome to add closing button and bars icons
03:18
Styling the closing and bars buttons using CSS
06:16
Using JavaScript to add and remove the sidebar
08:06

Project - Navbar menu

8 lectures
Preview - Navbar Menu
01:51
Creating the logo of the website
01:39
Create the menu using HTML
04:47
Learning how to use Font Awesome
02:20
Start Styling our website using CSS
03:37
Styling the bars
03:35
Styling the menu
11:51
Add and remove classes using JavaScript
03:54

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.