Learn to create web development projects with JavaScript Interactive DOM Elements, build your own version of the projects, all while having fun. Read more.
I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today. Providing Web development courses and digital marketing
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Beginners to JavaScript
- Anyone who wants to practice and learn more about JavaScript
- Anyone who wants to create fun interactive projects with JavaScript
- Anyone who wants to learn more about DOM manipulation of page elements
- Web developers
- Web designers
- HTML and CSS coders
What you’ll learn:Â
- JavaScript how to apply JavaScript Code to mini projects
- Practice JavaScript while coding fun mini projects
- Explore how to interact with JavaScript Document Object Manipulate elements on page
- Create Dynamic Content with JavaScript
- Create Interactive Page content with JavaScript
- Download files with JavaScript – DOM interaction – Common JavaScript methods
Requirements:Â
- Prior Coding Experience
- HTML CSS and JavaScript Base Knowledge
Practice and learn more about JavaScript as you create 5 amazing projects all with Vanilla JavaScript
Explore and sharpen your skills with mini projects that you can extend upon to create some amazing functionality and interactions for web users. Add them to your portfolio, and have fun while you learn.
Challenge yourself and design your own versions. Source code is included to get you started.
Perfect for Beginner and intermediate web developers that want to build fun and useful projects with HTML, CSS and JavaScript. Sharpen your skills with these projects!
These are unique coding mini projects you won’t find anywhere else.
Taught by an instructor with over 20 years of REAL WORLD experience ready to answer any questions you may have.
You have nothing to lose – build your own version of the projects HAVE FUN – Join NOW!
Our Promise to You
By the end of this course, you will have learned how to create projects with JavaScript DOM elements.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about web development.
Course Curriculum
| Section 1 - Introduction | |||
| Introduction To JavaScript Mini Projects | 00:00:00 | ||
| Section 2 - Lorem Ipsum Generator App With JavaScript | |||
| Introduction To How To Create A Lorem Ipsum Generator With JavaScript | 00:00:00 | ||
| Resources And Reference For JavaScript | 00:00:00 | ||
| Setup HTML And Files | 00:00:00 | ||
| Select DOM Elements | 00:00:00 | ||
| Add EventListener | 00:00:00 | ||
| Add Data To Output | 00:00:00 | ||
| Using String Methods And Regex To Clean String Values | 00:00:00 | ||
| Random Word Paragraphs | 00:00:00 | ||
| Create Sentences From Words Randomly | 00:00:00 | ||
| How To Capitalize A String | 00:00:00 | ||
| User Input For Word Count | 00:00:00 | ||
| Lorem Ipsum Generator Complete Code Review | 00:00:00 | ||
| JavaScript Lorem Ipsum Text Generator Coding Example Source Code | 00:00:00 | ||
| Section 3 - Pagination From Json Data Multiple Pages And Content Loading App | |||
| Pagination With JavaScript Introduction | 00:00:00 | ||
| Page Setup Fetch Request | 00:00:00 | ||
| Resources For Section | 00:00:00 | ||
| Localhost Setup Liveserver | 00:00:00 | ||
| Make Request Get Page Data | 00:00:00 | ||
| Output Contents To Page | 00:00:00 | ||
| Page Buttons Next Prev | 00:00:00 | ||
| Load Content By Page Number | 00:00:00 | ||
| Jump To Page By Value | 00:00:00 | ||
| Page Nav Buttons Next And Prev Last And First Source Code V1 | 00:00:00 | ||
| JavaScript Load More At The Bottom Of Content Load More To The Bottom | 00:00:00 | ||
| Click Event Load More | 00:00:00 | ||
| Load More Content Button Pages JavaScript Code Examples | 00:00:00 | ||
| Section 4 - How To Create A JavaScript Carousel Images Slider Component | |||
| JavaScript Carousel Introduction To Project | 00:00:00 | ||
| Setup HTML And Image Details | 00:00:00 | ||
| Section Resources And Examples | 00:00:00 | ||
| Carousel Container Add Images | 00:00:00 | ||
| Apply CSS Create Style | 00:00:00 | ||
| Hide And Show Images | 00:00:00 | ||
| Conditions For Images | 00:00:00 | ||
| Image Dot Indicators | 00:00:00 | ||
| Autoload Next Image Intervals | 00:00:00 | ||
| Add Active Indicator Dot. | 00:00:00 | ||
| Carousel Final Updates | 00:00:00 | ||
| JavaScript Carousel Conclusion Of Mini Project And Code Review | 00:00:00 | ||
| JavaScript Image Carousel Code Example Image Slider With JavaScript Source Code | 00:00:00 | ||
| Section 5 - Downloadable List Items Create A JavaScript Task List And Download As File | |||
| Task List Introduction | 00:00:00 | ||
| Section Resources | 00:00:00 | ||
| Page Setup Create List | 00:00:00 | ||
| Create List Item | 00:00:00 | ||
| Add Input Event Listener | 00:00:00 | ||
| CrossOut And Delete Page Elements | 00:00:00 | ||
| Task List Styling | 00:00:00 | ||
| Download List As Text File 1 | 00:00:00 | ||
| Download List As Text File 2 | 00:00:00 | ||
| List Saved To Local Storage 1 | 00:00:00 | ||
| List Saved To Local Storage 2 | 00:00:00 | ||
| Dynamic Task List With JavaScript Download And Interact With List Code Review | 00:00:00 | ||
| JavaScript Project Downloadable Task List And Local Storage List Source Code | 00:00:00 | ||
| Section 6 - JavaScript Dynamic Timeline From JSON | |||
| JavaScript Timeline Introduction | 00:00:00 | ||
| JavaScript Coding Examples 1 | 00:00:00 | ||
| JavaScript Coding Examples For Section | 00:00:00 | ||
| JavaScript Coding Examples 2 | 00:00:00 | ||
| JavaScript Coding Examples For Timeline Mini Project | 00:00:00 | ||
| Section Resources And Code Examples | 00:00:00 | ||
| Setup HTML And JS Data | 00:00:00 | ||
| Create Random Content Data | 00:00:00 | ||
| Output Content To Page | 00:00:00 | ||
| Sort Object Data By Property | 00:00:00 | ||
| Indicator List Of Events | 00:00:00 | ||
| Indicator Styling And Position | 00:00:00 | ||
| Create Interaction With JavaScript | 00:00:00 | ||
| Hide Show Content | 00:00:00 | ||
| Add Line For Timeline Effect | 00:00:00 | ||
| JavaScript Timeline Project Tweaks | 00:00:00 | ||
| Final Adjustments | 00:00:00 | ||
| JavaScript Timeline Project Code Review | 00:00:00 | ||
| JavaScript Timeline Dynamic And Interactive Mini Project Source Code | 00:00:00 | ||
About This Course
Who this course is for:
- Beginners to JavaScript
- Anyone who wants to practice and learn more about JavaScript
- Anyone who wants to create fun interactive projects with JavaScript
- Anyone who wants to learn more about DOM manipulation of page elements
- Web developers
- Web designers
- HTML and CSS coders
What you’ll learn:Â
- JavaScript how to apply JavaScript Code to mini projects
- Practice JavaScript while coding fun mini projects
- Explore how to interact with JavaScript Document Object Manipulate elements on page
- Create Dynamic Content with JavaScript
- Create Interactive Page content with JavaScript
- Download files with JavaScript – DOM interaction – Common JavaScript methods
Requirements:Â
- Prior Coding Experience
- HTML CSS and JavaScript Base Knowledge
Practice and learn more about JavaScript as you create 5 amazing projects all with Vanilla JavaScript
Explore and sharpen your skills with mini projects that you can extend upon to create some amazing functionality and interactions for web users. Add them to your portfolio, and have fun while you learn.
Challenge yourself and design your own versions. Source code is included to get you started.
Perfect for Beginner and intermediate web developers that want to build fun and useful projects with HTML, CSS and JavaScript. Sharpen your skills with these projects!
These are unique coding mini projects you won’t find anywhere else.
Taught by an instructor with over 20 years of REAL WORLD experience ready to answer any questions you may have.
You have nothing to lose – build your own version of the projects HAVE FUN – Join NOW!
Our Promise to You
By the end of this course, you will have learned how to create projects with JavaScript DOM elements.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about web development.
Course Curriculum
| Section 1 - Introduction | |||
| Introduction To JavaScript Mini Projects | 00:00:00 | ||
| Section 2 - Lorem Ipsum Generator App With JavaScript | |||
| Introduction To How To Create A Lorem Ipsum Generator With JavaScript | 00:00:00 | ||
| Resources And Reference For JavaScript | 00:00:00 | ||
| Setup HTML And Files | 00:00:00 | ||
| Select DOM Elements | 00:00:00 | ||
| Add EventListener | 00:00:00 | ||
| Add Data To Output | 00:00:00 | ||
| Using String Methods And Regex To Clean String Values | 00:00:00 | ||
| Random Word Paragraphs | 00:00:00 | ||
| Create Sentences From Words Randomly | 00:00:00 | ||
| How To Capitalize A String | 00:00:00 | ||
| User Input For Word Count | 00:00:00 | ||
| Lorem Ipsum Generator Complete Code Review | 00:00:00 | ||
| JavaScript Lorem Ipsum Text Generator Coding Example Source Code | 00:00:00 | ||
| Section 3 - Pagination From Json Data Multiple Pages And Content Loading App | |||
| Pagination With JavaScript Introduction | 00:00:00 | ||
| Page Setup Fetch Request | 00:00:00 | ||
| Resources For Section | 00:00:00 | ||
| Localhost Setup Liveserver | 00:00:00 | ||
| Make Request Get Page Data | 00:00:00 | ||
| Output Contents To Page | 00:00:00 | ||
| Page Buttons Next Prev | 00:00:00 | ||
| Load Content By Page Number | 00:00:00 | ||
| Jump To Page By Value | 00:00:00 | ||
| Page Nav Buttons Next And Prev Last And First Source Code V1 | 00:00:00 | ||
| JavaScript Load More At The Bottom Of Content Load More To The Bottom | 00:00:00 | ||
| Click Event Load More | 00:00:00 | ||
| Load More Content Button Pages JavaScript Code Examples | 00:00:00 | ||
| Section 4 - How To Create A JavaScript Carousel Images Slider Component | |||
| JavaScript Carousel Introduction To Project | 00:00:00 | ||
| Setup HTML And Image Details | 00:00:00 | ||
| Section Resources And Examples | 00:00:00 | ||
| Carousel Container Add Images | 00:00:00 | ||
| Apply CSS Create Style | 00:00:00 | ||
| Hide And Show Images | 00:00:00 | ||
| Conditions For Images | 00:00:00 | ||
| Image Dot Indicators | 00:00:00 | ||
| Autoload Next Image Intervals | 00:00:00 | ||
| Add Active Indicator Dot. | 00:00:00 | ||
| Carousel Final Updates | 00:00:00 | ||
| JavaScript Carousel Conclusion Of Mini Project And Code Review | 00:00:00 | ||
| JavaScript Image Carousel Code Example Image Slider With JavaScript Source Code | 00:00:00 | ||
| Section 5 - Downloadable List Items Create A JavaScript Task List And Download As File | |||
| Task List Introduction | 00:00:00 | ||
| Section Resources | 00:00:00 | ||
| Page Setup Create List | 00:00:00 | ||
| Create List Item | 00:00:00 | ||
| Add Input Event Listener | 00:00:00 | ||
| CrossOut And Delete Page Elements | 00:00:00 | ||
| Task List Styling | 00:00:00 | ||
| Download List As Text File 1 | 00:00:00 | ||
| Download List As Text File 2 | 00:00:00 | ||
| List Saved To Local Storage 1 | 00:00:00 | ||
| List Saved To Local Storage 2 | 00:00:00 | ||
| Dynamic Task List With JavaScript Download And Interact With List Code Review | 00:00:00 | ||
| JavaScript Project Downloadable Task List And Local Storage List Source Code | 00:00:00 | ||
| Section 6 - JavaScript Dynamic Timeline From JSON | |||
| JavaScript Timeline Introduction | 00:00:00 | ||
| JavaScript Coding Examples 1 | 00:00:00 | ||
| JavaScript Coding Examples For Section | 00:00:00 | ||
| JavaScript Coding Examples 2 | 00:00:00 | ||
| JavaScript Coding Examples For Timeline Mini Project | 00:00:00 | ||
| Section Resources And Code Examples | 00:00:00 | ||
| Setup HTML And JS Data | 00:00:00 | ||
| Create Random Content Data | 00:00:00 | ||
| Output Content To Page | 00:00:00 | ||
| Sort Object Data By Property | 00:00:00 | ||
| Indicator List Of Events | 00:00:00 | ||
| Indicator Styling And Position | 00:00:00 | ||
| Create Interaction With JavaScript | 00:00:00 | ||
| Hide Show Content | 00:00:00 | ||
| Add Line For Timeline Effect | 00:00:00 | ||
| JavaScript Timeline Project Tweaks | 00:00:00 | ||
| Final Adjustments | 00:00:00 | ||
| JavaScript Timeline Project Code Review | 00:00:00 | ||
| JavaScript Timeline Dynamic And Interactive Mini Project Source Code | 00:00:00 | ||
Related Courses
Are you interested in higher education?
All Rights Reserved