This series is based on the Udemy course by Brad Traversy
and Florin Pop
. This is a certification course on DOM (Document Object Model). I made 50 projects based on this course.
This projects series have different type of projects. It helped me to learn many concepts of JavaScript, CSS and HTML. I used APIs in some projects, learned many types of events, build some well known projects.
To keep projects in sequence, I used this number sequence -
- A0-A9 for 1-10,
- B0-B9 for 11-20,
- C0-C9 for 21-30,
- D0-D9 for 31-40,
- E0-E9 for 41-50
Snapshots of some of the projects -
A0. Exapnding Cards
-
Solution URL: Source Code
-
Live Site URL: Live link
B6. Movie App
-
Solution URL: Source Code
-
Live Site URL: Live link
C6. Toast Notification
-
Solution URL: Source Code
-
Live Site URL: Live link
D0. Password Generator
-
Solution URL: Source Code
-
Live Site URL: Live link
E7. Random Image Feed
-
Solution URL: Source Code
-
Live Site URL: Live link
Read my article on this project series- Introduction of Project Making Process
This is first introductory article in this series. More to come.
No. | Project Name | Source Code | Live Link |
---|---|---|---|
A0. | Expanding Cards | Code | Live |
A1. | Progress steps | Code | Live |
A2. | Rotating Navigation | Code | Live |
A3. | Hidden Search Widget | Code | Live |
A4. | Blurry Loading | Code | Live |
A5. | Scroll Animation | Code | Live |
A6. | Split Landing Page | Code | Live |
A7. | Form Wave Animation | Code | Live |
A8. | Sound Board Project | Code | Live |
A9. | Dad Jokes | Code | Live |
B0. | Event Keycodes | Code | Live |
B1. | FAQ Collapse | Code | Live |
B2. | Random Choice Picker | Code | Live |
B3. | Animated Navigation | Code | Live |
B4. | Incrementaing Counter | Code | Live |
B5. | Drink Water | Code | Live |
B6. | Movie App | Code | Live |
B7. | Background Slider | Code | Live |
B8. | Theme Clock | Code | Live |
B9. | Button Ripple Effect | Code | Live |
C0. | Drag and Drop | Code | Live |
C1. | Drawing App | Code | Live |
C2. | Kinetic CSS Loader | Code | Live |
C3. | Content Placeholder | Code | Live |
C4. | Sticky Navbar | Code | Live |
C5. | Double Vertical Slider | Code | Live |
C6. | Toast Notification | Code | Live |
C7. | GitHub Profiles | Code | Live |
C8. | Double Heart Click | Code | Live |
C9. | Auto Text Effect | Code | Live |
D0. | Password Generator | Code | Live |
D1. | Good, Cheap, Fast Checkboxes | Code | Live |
D2. | Notes App | Code | Live |
D3. | Animated Countdown | Code | Live |
D4. | Image Carousel | Code | Live |
D5. | Hoverboard | Code | Live |
D6. | Pokedex | Code | Live |
D7. | Mobile Tab Navigation | Code | Live |
D8. | Password Strength Background | Code | Live |
D9. | 3D Background Boxes | Code | Live |
E0. | Verify Account UI | Code | Live |
E1. | Live User Filter | Code | Live |
E2. | Feedback UI Design | Code | Live |
E3. | Custom Range Slider | Code | Live |
E4. | Netflix Navigation | Code | Live |
E5. | Quiz App | Code | Live |
E6. | Testimonial Box Switcher | Code | Live |
E7. | Random Image Feed | Code | Live |
E8. | To Do List | Code | Live |
E9. | Insect Catch Game | Code | Live |
-
Vanilla JavaScript
-
Semantic HTML5 markup
-
CSS custom properties
-
Flexbox
-
Desktop-first workflow
-
APIs
-
DOM manipuation
-
Event listener
-
Array methods
-
async/await
-
Template literals
-
Arrow function
-
Ternary operator
-
Lots of CSS properties 🎨
And many more...
Need to work on background designs, UI/UX, add more functionality.
Your suggestions are welcome. 🙌
-
Udemy - Udemy course on DOM 📚
-
freecodecamp - All the problems I solved. Helped me a lot. 🙌
-
w3schools - This helped me throughout my journey. Still doing. 🙂
-
Google API - For fonts 🆎
-
cdnjs - For icons
Basant Soni 👨💻
-
GitHub - @SoniBasant
-
Frontend Mentor - @SoniBasant
-
CodePen - @SoniBasant
-
Hashnode - @SoniBasant
Two person who made this 50 project series :
Brad Traversy :
Florin Pop :
For "author" and "keywords" tag :
Ecem Gokdogan :
Due to Ecem's projects, I got to know about "author" and "keywords" tag. Since then I am adding these tags in all of my projects.