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.
