+ View more
Course overview
Project based teaching to sharpen your HTML, CSS & JavaScript skills.
What will i learn?
- Modern styling with flexbox, CSS animations, custom properties, etc
- Project based teaching to sharpen your HTML, CSS & JavaScript skill
- DOM manipulation, events, array methods, HTTP requests & more
- Perfect for beginners looking for things to build unique projects in a short timeframe
Curriculum for this course
161 Lessons
17:38:45 Hours
01 Introduction
4 Lessons
00:13:01 Hours
-
1.1 Welcome
00:01:07
-
1.2 My Environment Setup
00:04:18
-
1.3 Project Starter Boilerplate
00:07:36
-
1.4 Course Projects Code Demos
.
02 Day 1 - Expanding Cards
3 Lessons
00:16:31 Hours
-
2.1 Project Intro
00:00:43
-
2.2 Initial Cards
00:08:57
-
2.3 Expanding Effect
00:06:51
03 Day 2 - Progress Steps
3 Lessons
00:25:11 Hours
-
3.1 Project Intro
00:00:59
-
3.2 Creating The Steps
00:13:01
-
3.3 Step Functionality
00:11:11
04 Day 3 - Rotating Navigation
3 Lessons
00:12:19 Hours
-
3.2.1 Project Intro
00:01:05
-
3.2.2 Content Circle Styling
00:00:12
-
3.2.3 Rotate Slide Effect
00:11:02
05 Day 4 - Hidden Search Widget
2 Lessons
00:09:49 Hours
-
4.1 Project Intro
00:00:43
-
4.2 Hidden Search Widget
00:09:06
06 Day 5 - Blurry Loading
3 Lessons
00:13:05 Hours
-
5.1 Project Intro
00:00:53
-
5.2 Background Image Loading Text
00:04:31
-
5.3 Load Blur Effect
00:07:41
07 Day 6 - Scroll Animation
2 Lessons
00:14:13 Hours
-
6.1 Project Intro
00:01:02
-
6.2 Scroll Animation
00:13:11
08 Day 7 - Split Landing Page
3 Lessons
00:22:35 Hours
-
7.1 Project Intro
00:00:55
-
7.2 Split Landing Page HTML CSS
00:14:29
-
7.3 Adding The Hover Effect
00:07:11
09 Day 8 - Form Wave Animation
3 Lessons
00:18:55 Hours
-
8.1 Project Intro
00:00:42
-
8.2 Styling The Form
00:08:36
-
8.3 Adding The Wave Effect
00:09:37
10 Day 9 - Sound Board
2 Lessons
00:11:02 Hours
-
9.1 Project Intro
00:01:10
-
9.2 Sound Board Project
00:09:52
11 Day 10 - Dad Jokes
4 Lessons
00:33:49 Hours
-
10.1 Fetching Displaying Jokes
00:10:29
-
10.2 Working With Fetch HTTP RequestsResponses
00:06:11
-
10.3 Jokes HTML CSS
00:06:40
-
10.4 Fetching Displaying Jokes
00:10:29
12 Day 11 - Event KeyCodes
3 Lessons
00:13:55 Hours
-
11.1 Project Intro
00:01:34
-
11.2 Key Boxes HTML CSS
00:06:21
-
11.3 Display Key Codes
00:06:00
13 Day 12 - FAQ Collapse
3 Lessons
00:20:57 Hours
-
12.1 Project Intro
00:00:54
-
12.2 FAQ Boxes
00:12:52
-
12.3 Toggle Buttons
00:07:11
14 Day 13 - Random Choice Picker
4 Lessons
00:20:20 Hours
-
13.1 Project Intro
00:00:52
-
13.2 Choice Picker UI
00:06:23
-
13.3 Create Tags
00:05:41
-
13.4 Select Random Tag
00:07:24
15 Day 14 - Animated Navigation
3 Lessons
00:18:47 Hours
-
14.1 Project Intro
00:00:58
-
14.2 Nav Styling
00:10:49
-
14.3 Icon Styling Active Toggle
00:07:00
16 Day 15 - Incrementing Counter16
3 Lessons
00:12:52 Hours
-
15.1 Project Intro
00:00:38
-
15.2 Counters HTML CSS
00:05:28
-
15.3 Create Display Increment
00:06:46
17 Day 16 - Drink Water
4 Lessons
00:31:18 Hours
-
16.1 Project Intro
00:00:52
-
16.2 Create Style The Cups
00:15:15
-
16.3 Fill Small Cups
00:06:32
-
16.4 Update Big Cup
00:08:39
18 Day 17 - Movie App
4 Lessons
00:22:23 Hours
-
17.1 Project Intro
00:01:27
-
17.2 Movies UI Layout
00:00:14
-
17.3 Fetching Data From The API (2).mp4
00:11:16
-
17.4 Adding Movies To The DOM (2).mp4
00:09:26
19 Day 18 - Background Slider
3 Lessons
00:21:39 Hours
-
18.1 Project Intro
00:00:42
-
18.2 HTML CSS
00:12:36
-
18.3 Changing Slides
00:08:21
20 Day 19 - Theme Clock
4 Lessons
00:35:51 Hours
-
19.1 Project Intro
00:00:34
-
19.2 Starting The Clock
00:12:51
-
19.3 Finish Clock Styling
00:05:47
-
19.4 Mode Clock Function
00:16:39
21 Day 20 - Button Ripple Effect
3 Lessons
00:15:32 Hours
-
20.1 Project Intro
00:00:34
-
20.2 Button Style Animation
00:06:49
-
20.3 Button Click Effect
00:08:09
22 Day 21 - Drag N Drop
3 Lessons
00:20:06 Hours
-
21.1 Project Intro
00:00:58
-
21.2 Create Drop Boxes
00:05:21
-
21.3 Drag Drop Events
00:13:47
23 Day 22 - Drawing App
4 Lessons
00:21:38 Hours
-
22.1 Project Intro
00:01:17
-
22.2 Drawing Pad UI
00:06:32
-
22.3 Canvas Shapes
00:07:06
-
22.4 Mouse Events Drawing
00:06:43
24 Day 23 - Kinetic CSS Loader
2 Lessons
00:07:49 Hours
-
23.1 Project Intro
00:00:24
-
23.2 Kinetic CSS Loader
00:07:25
25 Day 24 - Content Placeholder
3 Lessons
00:11:31 Hours
-
24.1 Project Intro
00:00:53
-
24.2 Card HTML
00:05:33
-
24.3 Card CSS
00:05:05
26 Day 25 - Sticky Navbar
3 Lessons
00:23:40 Hours
-
25.1 Project Intro
00:00:48
-
25.2 Website Content Style
00:12:31
-
25.3 Navbar CSS JS
00:10:21
27 Day 26 - Double Vertical Slider
3 Lessons
00:25:50 Hours
-
26.1 Project Intro
00:01:01
-
26.2 Vertical Slider UI
00:14:02
-
26.3 Vertical Slider Function
00:10:47
28 Day 27 - Toast Notification
2 Lessons
00:16:01 Hours
-
27.1 Project Intro
00:01:02
-
27.2 Create Toast Notifications
00:14:59
29 Day 28 - Github Profiles
5 Lessons
00:43:58 Hours
-
28.1 Project Intro
00:01:49
-
28.2 Github Profile Card
00:14:48
-
28.3 Fetching Profile Data With Axios
00:11:09
-
28.4 Dynamic Profile Cards
00:08:02
-
28.5 Adding Repos To Card
00:08:10
30 Day 29 - Double Heart Click
3 Lessons
00:21:53 Hours
-
29.1 Project Intro
00:01:27
-
29.2 HTML CSS
00:07:01
-
29.3 Show Heart Based On Click Position
00:13:25
31 Day 30 - Auto Text Effect
2 Lessons
00:10:07 Hours
-
30.1 Project Intro
00:00:54
-
30.2 Auto Text Effect
00:09:13
32 Day 31 - Password Generator
5 Lessons
00:41:55 Hours
-
31.1 Project Intro
00:01:02
-
31.2 Password Generator UI
00:13:45
-
31.3 Random Functions
00:08:20
-
31.4 Generate Password
00:16:00
-
31.5 Copy Password To Clipboard
00:02:48
33 Day 32 - Good Cheap Fast Checkboxes
4 Lessons
00:17:58 Hours
-
32.1 Project Intro
00:01:00
-
32.2 Style Checkboxes
00:07:59
-
32.3 Check Ball Animation
00:04:07
-
32.4 JavaScript Logic
00:04:52
34 Day 33 - Notes App
4 Lessons
00:30:50 Hours
-
33.1 Project Intro
00:01:36
-
33.2 Notes HTML CSS
00:09:28
-
33.3 Adding Notes To The DOM
00:10:05
-
33.4 Save Notes To Local Storage (2).mp4
00:09:41
35 Day 34 - Animated Countdown
4 Lessons
00:30:22 Hours
-
34.1 Project Intro
00:01:14
-
34.2 Counter Final Sections
00:08:53
-
34.3 In Out Animations
00:09:39
-
34.4 Dynamic Animation With JS
00:10:36
36 Day 35 - Image Carousel
3 Lessons
00:18:04 Hours
-
35.1 Project Intro
00:00:30
-
35.2 Carousel UI
00:07:26
-
35.3 Carousel Functionality
00:10:08
37 Day 36 - Hoverboard
3 Lessons
00:14:10 Hours
-
36.1 Project Intro
00:00:49
-
36.2 Styling The Board Squares
00:05:05
-
36.3 Hoverboard Effect
00:08:16
38 Day 37 - Pokedex
4 Lessons
00:27:45 Hours
-
37.1 Project Intro
00:01:08
-
37.2 Pokedex UI Styling
00:11:10
-
37.3 Fetching Pokemon Data
00:05:04
-
37.4 Creating The Pokemon Cards
00:10:23
39 Day 38 - Mobile Tab Navigation
3 Lessons
00:15:34 Hours
-
38.1 Project Intro
00:00:44
-
38.2 Create Style UI
00:10:25
-
38.3 Navigation Effect
00:04:25
40 Day 39 - Password Strength Background
3 Lessons
00:14:51 Hours
-
39.1 Project Intro
00:01:13
-
39.2 Creating The Form Background
00:08:57
-
39.3 Change Blur On Input
00:04:41
41 Day 40 - 3D Background Boxes
3 Lessons
00:27:33 Hours
-
40.1 Project Intro
00:01:27
-
40.2 Creating The Button Boxes
00:15:56
-
40.3 Background Position Rotate Event
00:10:10
42 Day 41 - Verify Account UI
2 Lessons
00:14:48 Hours
-
41.1 Project Intro
00:00:58
-
41.2 Verify Account UI Project
00:13:50
43 Day 42 - Live User Filter
3 Lessons
00:27:05 Hours
-
42.1 Project Intro
00:01:00
-
42.2 User List UI
00:12:28
-
42.3 Fetch Filter Users
00:13:37
44 Day 43 - Feedback UI Design
3 Lessons
00:25:28 Hours
-
43.1 Project Intro
00:01:26
-
43.2 Feedback Boxes
00:11:08
-
43.3 Select Submit Feedback
00:12:54
45 Day 44 - Custom Range Slider
3 Lessons
00:24:19 Hours
-
44.1 Project Intro
00:01:07
-
44.2 Styling The Range
00:12:07
-
44.3 Label Value Movement
00:11:05
46 Day 45 - Netflix Navigation
3 Lessons
00:20:15 Hours
-
45.1 Project Intro
00:01:05
-
45.2 Netflix Nav - Part 1
00:08:33
-
45.3 Netflix Nav - Part 2
00:10:37
47 Day 46 - Quiz App
3 Lessons
00:12:45 Hours
-
46.1 Project Intro
00:01:01
-
46.2 Quiz UI
00:09:44
-
46.3 Quiz Functionality
00:02:00
48 Day 47 - Testimonial Box Switcher
3 Lessons
00:20:33 Hours
-
47.1 Project Intro
00:00:39
-
47.2 Create Box Progress Bar
00:12:10
-
47.3 Testimonial Switch
00:07:44
49 Day 48 - Random Image Feed
2 Lessons
00:10:17 Hours
-
48.1 Project Intro
00:01:04
-
48.2 Random Image Feed Project
00:09:13
50 Day 49 - Todo List
3 Lessons
00:15:50 Hours
-
49.1 Project Intro
00:00:53
-
49.2 Todo List UI
00:08:48
-
49.3 Add Remove Mark Complete
00:06:09
51 Day 50 - Insect Catch Game
4 Lessons
00:41:46 Hours
-
50.1 Project Intro
00:01:22
-
50.2 Game Styling - Part 1
00:12:19
-
50.3 Game Styling - Part 2
00:09:03
-
50.4 Insect Game Functionality
00:19:02
+ View more
Other related courses
06:41:37 Hours
Updated Tue, 13-Jun-2023
0
R10000
R5000
About instructor
Student feedback
Reviews
-
Somila Kolisila -
Malibongwe Mkala
-
Kwezi Mazwiwell i am done watching videos and its just that i need to submit attachments
Write a public review