Web Development Bootcamp 2023 HTML CSS JS React Node MongoDB

Focused View

Ryan Dhungel

17:35:26

156 View

1. Introduction to Web Development

1. Course Introduction.mp4

02:47

2. What is Web Development.mp4

01:36

3. What are the roles of a Web Developer.mp4

01:17

4. Difference between Frontend, Backend and Full Stack Web Developer.mp4

01:49

5. Path to become a Full Stack Web Developer.mp4

01:53

6. Why learn JavaScript.mp4

01:55

7. Code editor setup.mp4

04:08

8.1 1 HtmlCss.pdf

8.2 2 Bootstrap.pdf

8.3 3 Javascript.pdf

8.4 4 NodeJs.pdf

8.5 5 ReactJs.pdf

8.6 6 NextJs13.pdf

8.7 7 FullStackJS.pdf

8. Download 7 PDF Booklets.html

9.1 web dev bootcamp source code.zip

9. Download All Projects Source Code.html

2. HTML And CSS

1. Headings and paragraphs.mp4

03:13

2. Vs code plugins and themes.mp4

05:20

3. HTML document and head section.mp4

04:29

4. Using CSS stylesheet.mp4

04:20

5. Writing CSS.mp4

08:05

6. Learning tips and writing comments.mp4

03:49

7. Using Google fonts.mp4

04:43

8. Display image on HTML page.mp4

03:43

9. Media queries CSS for responsive images.mp4

07:19

10. Margins and paddings.mp4

04:50

11. HTML list items.mp4

03:34

12. Clickable links.mp4

05:23

13. Border styling and hover effects.mp4

07:40

14. Text shadow and background color.mp4

03:45

15. Image as background.mp4

05:45

16. Parallax image background.mp4

09:02

17. Gradient color background.mp4

05:31

18. HTML form.mp4

09:56

19. Styling HTML form.mp4

06:25

20. Using icons.mp4

06:07

21. HTML header and footer.mp4

07:08

3. Bootstrap CSS Framework

1. Bootstrap CSS framework.mp4

02:59

2. Using Bootstrap via CDN.mp4

05:53

3. Downloading Bootstrap (optional).mp4

06:56

4. Containers, rows and columns.mp4

09:11

5. Columns styling, offset, background, margin and padding.mp4

12:06

6. Styling divs and texts using margin, padding and colors.mp4

03:22

7. Responsive images.mp4

09:32

8. Buttons and lists.mp4

10:30

9. Bootstrap forms.mp4

08:15

10. Bootstrap tables.mp4

04:58

11. Bootstrap navigation menu.mp4

06:59

12. Bootstrap carousel image slider.mp4

09:37

13. Bootstrap popup modal.mp4

03:59

4. Github

1. Using Github.mp4

05:32

2. Push and pull code with Github.mp4

08:49

3. Static website hosting with Github.mp4

06:10

4. Push code changes.mp4

08:43

5. Using Bootstrap themes.mp4

03:13

5. JavaScript

1. What is JavaScript.mp4

04:34

2. JavaScript in HTML.mp4

04:33

3. Different ways of creating variables.mp4

08:13

4. String manipulation.mp4

09:55

5. Doing math with numbers.mp4

02:37

6. JavaScript objects.mp4

07:13

7. Display object info on the page.mp4

09:46

8. JavaScript operators.mp4

12:09

9. If else statements.mp4

04:16

10. Loops in JavaScript.mp4

05:57

11. Object info display using for-in loop.mp4

05:44

12. Functions in JavaScript.mp4

06:14

13. Arrow functions.mp4

03:03

14. Greeting app.mp4

12:18

15. Template literals.mp4

02:28

16. Arrays in JavaScript.mp4

06:07

17. Display array item in HTML.mp4

03:48

18. Working with object.mp4

05:15

19. new Keyword, constructor function and prototype.mp4

03:42

20. Classes in JavaScript.mp4

01:37

21. Regular expressions.mp4

09:01

22. BOM - Browser object model.mp4

10:57

23. DOM - Document object model.mp4

06:10

6. Projects using JavaScript, jQuery And VueJs

1. Project overview.mp4

02:19

2. Todo app with plain JavaScript.mp4

11:39

3. Todos render, delete and save in local storage.mp4

13:59

4. Tasks project using jQuery.mp4

11:58

5. Tasks display, store and remove using jQuery.mp4

09:04

6. Todo app with VueJs overview.mp4

09:10

7. Vuejs todo app create, read and delete.mp4

09:54

7. NodeJs

1. Installing NodeJs.mp4

05:24

2. Browser vs NodeJs environment.mp4

06:05

3. Module exports and require.mp4

09:31

4. Using NodeJS core module.mp4

04:31

5. Using NPM packages.mp4

08:15

6. Create express server.mp4

06:44

7. Continuously running NodeJs server.mp4

02:26

8. NodeJs event loop explained.mp4

05:47

9. NodeJs event loop in action.mp4

05:52

10. Synchronous vs Asynchronous programming.mp4

05:35

8. ReactJs with NextJs

1. What is React.mp4

01:43

2. Why learn React and NextJs.mp4

04:09

3. Setup React and NextJs project.mp4

06:16

4. React component.mp4

05:36

5. Passing properties and default parameters.mp4

04:45

6. useState hook and spread operator.mp4

06:37

7. Using NPM packages with React.mp4

04:00

8. useEffect hook to make API calls.mp4

06:34

9. Conditional rendering, state changes and inline styling.mp4

03:39

10. Breaking code into reusable components.mp4

05:41

11. NextJs custom App component.mp4

04:44

12. Using CSS files.mp4

03:33

13. Serving images.mp4

03:46

14. Global state using React Context.mp4

11:50

15. Route queries.mp4

05:47

16. Fetch request based on route query.mp4

07:27

17. Client vs server side rendering.mp4

04:40

18. Fetch data using server side rendering.mp4

06:58

19. Head section for meta content.mp4

02:27

20. Using CDN links.mp4

03:49

9. NextJs 13 with App Directory

1. NextJs 13 with App directory.mp4

02:24

2. NextJs 13 setup with page layout.mp4

08:03

3. Data fetching inside App directory server components.mp4

04:15

4. Route params inside App directory.mp4

09:05

5. Loading in App directory.mp4

01:19

6. Client components in App directory.mp4

05:39

7. Error - Text did not match server.mp4

01:38

10. API Development with NodeJs And MongoDB

1. Welcome to Full Stack JavaScript.mp4

02:18

2. NodeJS server setup.mp4

06:34

3. Routes log view using morgan.mp4

02:54

4. Connect to MongoDB.mp4

09:28

5. Working with routes.mp4

07:17

6. Working with controllers.mp4

06:42

7. POST request and JSON data.mp4

06:37

8. Create User model.mp4

04:54

9. Password hashing and compare.mp4

03:38

10. Save user in MongoDB.mp4

05:44

11. Validation on user registration.mp4

08:18

12. JWT - Json web token.mp4

06:33

13. Login user.mp4

06:14

14. Protecting route for logged in user.mp4

13:37

15. Admin middleware.mp4

06:20

16. Blog Schema.mp4

05:47

17. Form data on blog create.mp4

08:47

18. Validation on blog create.mp4

05:23

19. Create blog with image upload.mp4

12:13

20. Access uploaded images.mp4

02:50

21. Getting single blog by route params slug.mp4

05:06

22. Getting all blogs with user info.mp4

04:53

23. Update blog and image.mp4

11:41

24. Blog Delete.mp4

05:30

25. Resize image.mp4

09:07

26. CORS - Cross origin resource sharing.mp4

03:08

11. Frontend Web Development with ReactJs And NextJs

1. NextJs React app setup.mp4

08:38

2. Creating navigation.mp4

04:22

3. Register page.mp4

05:19

4. Register success.mp4

16:15

5. Global state using Context and Local Storage.mp4

13:44

6. Login page.mp4

02:45

7. Conditional rendering and logout.mp4

05:26

8. Role based redirect.mp4

04:06

9. Protected admin pages.mp4

07:12

10. Protected user pages.mp4

02:30

11. Blog create form using rich text editor.mp4

15:59

12. Blog create API request.mp4

07:48

13. Fetch blogs in server rendered page.mp4

03:12

14. Blog cards.mp4

08:26

15. Single blog view.mp4

09:24

16. Blog view with details and metadata.mp4

10:39

17. Using react icons.mp4

08:52

18. Loading page.mp4

01:57

19. Blogs list for admin.mp4

08:25

20. Blog delete by admin.mp4

06:09

21. Blog edit page.mp4

07:03

22. Blog update by admin.mp4

05:02

23. Wrap up.mp4

01:36

24. Push code to Github.mp4

07:45

25. Create NGINX server in Digital Ocean.mp4

11:41

26. Running full stack app in Digital Ocean.mp4

17:04

27. NextJS caching and render html issues fix.mp4

10:04

Description

[With 7 PDF Booklet] All in One Web Developer Bootcamp to Learn Coding Full Stack Web Apps Front to Back DB & API

What You'll Learn?

Master the Fundamentals: Develop a solid understanding of HTML, CSS, and JavaScript, gaining the essential skills needed to build professional-quality websites.
Build Dynamic Web Apps: Learn how to leverage the power of ReactJs to create interactive and responsive user interfaces, providing better user experience.
Develop Full-Stack Expertise: Acquire proficiency in both front-end and back-end API development by mastering ReactJs, NextJs, NodeJs and MongoDB.
Create Industry-Standard Projects: Engage in hands-on, project-based learning to develop real-world web applications, ensuring you have practical experience.
Implement Best Practices: Learn coding standards, allowing you to write clean, efficient and maintainable code like a seasoned professional.
Version Control and : Learn to use Github to push code and deploy static websites.
Deploy and Launch Websites: Gain expertise in deploying web applications to production servers and hosting platforms like Digital Ocean.
Troubleshoot and Debug: Develop strong problem-solving abilities through techniques and tools to identify and fix common errors and bugs.
Stay Current with Industry Trends: Stay up-to-date with the latest advancements in web development, frameworks, and tools, ensuring your skills remain relevant.

Who is this for?

Absolute beginners: This course is designed for individuals with little to no prior experience in web development. If you have never written a line of code before or have dabbled in web development but want to strengthen your foundational knowledge, this course is perfect for you.

Aspiring Web Developers: If you have a strong interest in web development and want to pursue it as a career, this course will provide you with the necessary skills and knowledge to kick-start your journey. Whether you aim to work as a front-end developer, back-end developer, or full-stack developer, this course will equip you with the essential tools.

Career Switchers: If you are considering a career change and want to transition into the field of web development, this course will serve as an excellent starting point. It will provide you with a solid understanding of the core concepts and technologies in web development, helping you make a smooth transition into your new career path.

Entrepreneurs and Small Business Owners: If you are an entrepreneur or small business owner looking to create and manage your own website, this course will empower you with the necessary skills to develop and maintain your online presence effectively. You will gain the ability to build custom websites and understand the technical aspects of web development.

Designers and Creatives: If you are a designer or creative professional seeking to expand your skill set and enhance your ability to bring your designs to life on the web, this course is ideal for you. You will learn how to translate your design concepts into functional and visually appealing websites using HTML, CSS, and JavaScript.

Self-Learners and Hobbyists: If you are a self-driven learner or hobbyist passionate about web development, this course will provide a structured learning path and comprehensive curriculum to deepen your understanding of web development concepts. You will have the opportunity to practice and build real-world projects, solidifying your skills and knowledge.

Professionals Seeking Web Development Skills: If you are already working in a related field and want to acquire web development skills to complement your existing skill set, this course will offer you a practical and focused approach to learning the necessary technologies. It will enhance your versatility and expand your professional opportunities.

What You Need to Know?

No prior experience required: This course is designed for absolute beginners, so no prior knowledge or experience in web development is necessary.

Basic computer literacy: Familiarity with using a computer, navigating the internet, and basic file management skills will be helpful throughout the course.

Enthusiasm to learn: A positive attitude, eagerness to acquire new skills, and a willingness to invest time and effort into the learning process are essential for success in this course.

Reliable internet connection: As this is an online course, a stable internet connection is required to access the learning materials, participate in interactive exercises, and watch video tutorials.

Computer setup: A computer (desktop or laptop) running a modern operating system (e.g., Windows, macOS, Linux) is needed to install software and tools required for web development.

Willingness to practice: Web development is a hands-on skill, and practice is crucial for mastery. Students should be prepared to dedicate time to complete coding exercises and work on projects outside of the course curriculum.

Self-motivation and discipline: Online learning requires self-motivation and discipline to stay on track, manage time effectively, and complete the course.

Openness to problem-solving: Web development often involves troubleshooting and problem-solving. Students should approach challenges with a problem-solving mindset and be willing to seek solutions independently or with the help of available resources.

More details

Description
Welcome to the Web Development Bootcamp 2023, a comprehensive program designed specifically for individuals with no prior coding or programming experience. This course aims to transform beginners into professional full-stack web developers, equipping them with the knowledge and skills needed to succeed in the industry as web developers. Drawing from over 10 years of learning and teaching experience, this course covers everything you need to know to embark on a successful web development career as a web developer. This course also includes 7 PDF booklets (totaling 128 pages of well-crafted theories and coding examples) that cover everything that is included in the videos, making it absolutely easier to recap and cement what you learn in the videos. A great way to remember what you learned and use as a reference whenever needed.
Section 1: Introduction to Web Development
Lay the foundation of web development by understanding its core concepts and principles.
Gain a solid understanding of how the web works and the fundamentals of web technologies.
Section 2: HTML & CSS
Learn how to create the structure and design of web pages using HTML and CSS.
Discover the essential tags and properties to build well-structured and visually appealing websites.
Section 3: Bootstrap CSS Framework
Explore the power of the Bootstrap CSS Framework for building responsive and mobile-friendly websites.
Learn how to leverage Bootstrap's pre-built components and grid system to enhance your web designs.
Section 4: Github
Understand version control, an essential tool for modern web development.
Learn how to manage your projects effectively, work in teams, and contribute to open-source projects.
Section 5: JavaScript
Dive into JavaScript and explore its syntax, concepts, and advanced topics like asynchronous programming and object-oriented programming.
Master the language that brings interactivity and dynamism to the web.
Section 6: Projects using JavaScript, jQuery & VueJs
Apply your JavaScript skills to practical projects and gain hands-on experience with popular frameworks like jQuery and Vue.js.
Build interactive applications and understand how these frameworks enhance web development.
Section 7: NodeJs
Learn Node.js, a server-side JavaScript runtime, and explore its capabilities for building scalable web applications.
Discover how to use Node.js to handle server-side logic and create efficient and high-performance web servers.
Section 8: ReactJs with NextJs
Master React.js, a powerful JavaScript library for building user interfaces, combined with Next.js, a framework for server-side rendered React applications.
Create dynamic and highly performant web experiences using component-based architecture.
Section 9: NextJs 13
Explore brand new ways of building production ready react applications using NextJs 13.
Learn how version 13 has introduces app directory that completely changes the way you write React.js applications using Next.js.
Section 10: API Development with NodeJs & MongoDB
Build robust APIs using Node.js and integrate MongoDB, a popular NoSQL database, for storing and retrieving data.
Learn how to design RESTful APIs, handle authentication and authorization, and ensure the security of your backend systems.
Section 11: Frontend Web Development with ReactJs & NextJs
Explore advanced frontend development techniques using React.js and Next.js.
Dive into topics such as state management, routing, and styling to create polished and professional-grade websites.
Summary:
The Web Development Bootcamp 2023 may not appear lengthy at first glance, but rest assured that it is meticulously crafted with over 10 years of learning and teaching experience. This comprehensive course covers all the essential topics required to become a professional full-stack web developer, even for individuals without any prior coding experience.
To enhance the learning experience, the course includes 7 PDF booklets that cover everything taught in the video lectures. These booklets serve as valuable resources, making learning incredibly easy and providing a handy reference for future use. With the combination of video lectures and supporting materials, students can solidify their understanding and cement the concepts learned throughout the course.
Join the Web Development Bootcamp 2023 and embark on a transformative learning journey, where carefully crafted content and supplementary materials will empower you to become a skilled and confident web developer.
Who this course is for:
Absolute beginners: This course is designed for individuals with little to no prior experience in web development. If you have never written a line of code before or have dabbled in web development but want to strengthen your foundational knowledge, this course is perfect for you.
Aspiring Web Developers: If you have a strong interest in web development and want to pursue it as a career, this course will provide you with the necessary skills and knowledge to kick-start your journey. Whether you aim to work as a front-end developer, back-end developer, or full-stack developer, this course will equip you with the essential tools.
Career Switchers: If you are considering a career change and want to transition into the field of web development, this course will serve as an excellent starting point. It will provide you with a solid understanding of the core concepts and technologies in web development, helping you make a smooth transition into your new career path.
Entrepreneurs and Small Business Owners: If you are an entrepreneur or small business owner looking to create and manage your own website, this course will empower you with the necessary skills to develop and maintain your online presence effectively. You will gain the ability to build custom websites and understand the technical aspects of web development.
Designers and Creatives: If you are a designer or creative professional seeking to expand your skill set and enhance your ability to bring your designs to life on the web, this course is ideal for you. You will learn how to translate your design concepts into functional and visually appealing websites using HTML, CSS, and JavaScript.
Self-Learners and Hobbyists: If you are a self-driven learner or hobbyist passionate about web development, this course will provide a structured learning path and comprehensive curriculum to deepen your understanding of web development concepts. You will have the opportunity to practice and build real-world projects, solidifying your skills and knowledge.
Professionals Seeking Web Development Skills: If you are already working in a related field and want to acquire web development skills to complement your existing skill set, this course will offer you a practical and focused approach to learning the necessary technologies. It will enhance your versatility and expand your professional opportunities.

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

JavaScript

CSS

HTML

HTML5

Node.Js

MongoDB

Ryan Dhungel

Instructor's Courses

Ryan Dhungel is a Web Developer from Sydney, Australia. He builds Web apps using JavaScript, Node JS, React JS, Vue JS, Laravel and other emerging platforms.He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical Tutorials and Training packages for fellow developers.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.