MERN TECH STACK
BEGINNERS
BEGINNERS
BEGINNERS
BEGINNERS
BEGINNERS
2 weeks
COURSE
Week 1: Introduction to Web
Development, HTML and CSS
Day 0 : Intro and VSCode Setup
Welcome to the world of web development! In this course, we’ll explore the essentials of
HTML, CSS, and JavaScript to build beautiful and functional websites. Whether you're a
complete beginner or looking to brush up on your skills, this course is designed to guide
you through the fundamentals step-by-step.
Go through this video to get a brief about web development:
https://www.youtube.com/watch?v=rarJvL5tDUA
Before starting do follow this VSCode setup video: https://youtu.be/NFE_avBNGfU
Day 1: HTML and CSS Basics
HTML (HyperText Markup Language) is the backbone of web content. In this section,
you'll learn how to structure your web pages with HTML, including creating headings,
paragraphs, links, images, and more.
CSS (Cascading Style Sheets) is used to style and layout your web pages, you’ll learn how
to enhance the visual appearance of your website by applying colours, fonts, layouts, and
responsive design techniques.
Complete the first 4 Lessons from the given video. Code Along with the tutor as the
tutorial goes on: https://youtu.be/G3e-cpL7ofc?si=fJ3FONm7FzfR1ubO
Day 2: Some more Basics
Today you will learn about some more css properties(text styles) and HTML basics
(including the structure of HTML, images and text boxes).
Complete the lessons ( , and ) from the given video. on’t skip anything as these are
5 6 7 D
the building blocks for web development :
https://youtu.be/G3e-cpL7ofc?si=fJ3FONm7FzfR1ubO
Day 3: CSS Display and The CSS Grid
Now we will be diving into how to create a proper layout of a website. For this u will have
to learn some techniques about how to think about the layout and how to implement it.
Complete the lessons (8, 9, 10 and 11) from the given video. Be thorough and if you are not
able to understand anything do watch it again:
https://youtu.be/G3e-cpL7ofc?si=fJ3FONm7FzfR1ubO
Day 4: A Responsive Website
Now you will learn how to create responsive web layouts using Flexbox. Complete the
lessons 12, 13 and 14 from the given video:
https://youtu.be/G3e-cpL7ofc?si=fJ3FONm7FzfR1ubO
Now as you know what a responsive website is, you might be confused about what to
use for creating a responsive design CSS Grids or Flexbox. Do watch this video to get an
answer:
https://www.youtube.com/watch?v=3elGSZSWTbM&t=6s
Day 5: The Last Step
This will be the last day of your HTML and CSS tutorial. Today you will learn about
Absolute and Relative Position and some more CSS features.
Complete the rest of the lessons from the video:
https://youtu.be/G3e-cpL7ofc?si=fJ3FONm7FzfR1ubO
Now as you have completed the basics of HTML and CSS and you think that you forgot
some things, No need to worry. This is normal, refer to these notes whenever you feel that
you forgot something:
HTML Notes: https://developer.mozilla.org/en-US/docs/Web/HTML
CSS Notes: https://developer.mozilla.org/en-US/docs/Web/CSS
Week 2: JavaScript, The DOM
And Asynchronous JavaScript
Day 1: JavaScript Introduction
Now as you have completed the basics of HTML and CSS, now it is the time to know
about JavaScript. JavaScript brings interactivity to your web pages. In this section you'll
learn how to set up JavaScript and about its basic syntax.
Watch videos 1 and 2 from this playlist:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
Day 2: Control Flow, Objects & Functions
Today you will learn about some of the most important topics of Javascript which are the
JS Control Flow, JS Objects and JS Functions.
Without wasting any time let’s start learning. Watch videos 3, 4 and 5 from this playlist:
https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
Day 3 & 4: The JavaScript DOM
The Document Object Model (DOM) represents the structure of a web page and allows
JavaScript to interact with it dynamically. In this section, you'll explore how to use
JavaScript to access, modify, and manipulate HTML and CSS elements on a page. You'll
learn techniques for creating interactive features, updating content, and responding to
user events, which are essential for building engaging and dynamic web experiences.
Complete this playlist in the next 2 days:
https://youtube.com/playlist?list=PL4cUxeGkcC9gfoKa5la9dsdCNpuey2s-V&si=VF-
jx2olcfr4HiBC
Day 5: Asynchronous JavaScript
Asynchronous programming allows JavaScript to handle operations like API requests,
timers, and other tasks without blocking the execution of other code. In this section, you'll
learn about JavaScript's asynchronous features, including callbacks, promises, and
async/await. These tools enable you to manage complex tasks more efficiently,
improving the responsiveness of your web applications.
Watch this playlist to get a good knowledge of Async Side of JavaScript:
https://youtube.com/playlist?
list=PL4cUxeGkcC9jx2TTZk3IGWKSbtugYdrlu&si=mnWCk-lxxYesdvmG
Day 6: Putting It All Together
In this final section, you'll combine everything you've learned to create a complete,
functional web project. This project will demonstrate how to apply HTML, CSS, and
JavaScript to build a portfolio website for your future use.
Code Along with this tutorial: https://www.youtube.com/watch?v=0YFrGy_mzjY
Be creative and modify your portfolio as per your choice. And if anywhere you face some
difficulty refer to these notes for a quick recap:
HTML Notes: https://developer.mozilla.org/en-US/docs/ Web/HTML
CSS Notes: https://developer.mozilla.org/en-US/docs/ Web/CSS
JS Notes: https://developer.mozilla.org/en-US/docs/ Web/JavaScript
DOM Notes: https://developer.mozilla.org/en-US/docs/ Web/API/Daocument_Object_Model
Async JS Notes: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous
Day 7: Advanced JavaScript (Optional)
This section is an optional section. If you want to learn more about Javascript or if at
some point in future, you feel the need to learn advanced Javascript, refer to this one shot
video. It will be very helpful to you.
Video Link: https://www.youtube.com/watch?v=R9I85RhI7Cg&t=145s
