• Description: Embark on your web development journey by understanding the fundamentals of HTML. All while setting up your coding environment with Visual Studio Code (VS Code), a powerful and user-friendly code editor. A proper coding environment enhances your productivity and provides tools for efficient code management.

  • VS Code Setup
  • MDN Web Docs - HTML Elements
  • HTML Basics

• Description: Dive deeper into HTML by exploring advanced concepts. Learn about semantic HTML elements, which convey the meaning of content to both browsers and developers.

  • Advanced HTML

• Description: Transition to styling your web pages with Cascading Style Sheets (CSS). Begin with the basics, including selectors, properties, and values.

  • CSS Basics Playlist

• Description: Delve into the world of responsive web design with CSS Flexbox and Grid. These layout systems empower you to create flexible, grid-based designs that adapt seamlessly to different screen sizes.

  • Flexbox Playlist
  • Grid Playlist

• Description: Elevate your web pages by incorporating CSS animations and transitions. Explore techniques to add movement and visual appeal to your content.

  • CSS Animation Playlist

• Description: Apply your knowledge by working on a hands-on, code-along project. This project provides a practical application of HTML and CSS concepts learned throughout the week.

  • Code Along Project

• Description: Introduce yourself to the world of version control with Git and collaborative development using GitHub. Understand the significance of version control in tracking changes, collaborating seamlessly with teammates, and maintaining a well-organized project history.

• Git Basics

• GitHub Tutorial

• Description: Learn how CSS frameworks, such as Bootstrap and Tailwind CSS, provide pre-built styles and components, enabling you to create responsive and consistent designs with less effort.

  • What is a CSS Framework?

  Day 3: Basic Bootstrap

  • Description: Dive into the popular CSS framework, Bootstrap. Learn about its foundational components, responsive grid system, and utility classes.

    • Bootstrap Documentation
    • Bootstrap Tutorial Playlist

  Day 4-5: Tailwind CSS

  • Description: Explore the utility-first approach of Tailwind CSS. Understand how Tailwind's approach differs from traditional CSS frameworks and why it can be a gamechanger.

    • Tailwind CSS Documentation
    • Tailwind CSS Playlist

  Day 6-7: Portfolio

  • Description: Create your personal portfolio website using the skills acquired from CSS frameworks. A portfolio serves as a showcase of your projects and skills, allowing potential employers or clients to understand your capabilities.

    • Portfolio Tutorial

  Week 3: JavaScript Fundamentals and API Integration

  Day 1: JavaScript Basics

  • Description: Kickstart your JavaScript journey by understanding the basics and why it is so important for making the webpages interactive.

    • JavaScript Reference - W3Schools
    • JavaScript Basics
    • JavaScript Tutorial

  Day 2: DOM and Event Listeners

  • Description: Explore the Document Object Model (DOM) to dynamically manipulate HTML and CSS. Learn about event listeners and handlers to respond to user interactions effectively.

    • MDN Web Docs - DOM Introduction
    • DOM Manipulation with Vanilla JavaScript
    • DOM Manipulation Playlist

  Day 3: API Fundamentals

  • Description: Explore the world of APIs (Application Programming Interfaces) and understand how they enable communication between different software systems.

    • What is an API?
    • API Introduction
    • HTTP Requests in JavaScript
    • JavaScript Fetch API
    • JavaScript Fetch API Tutorial
    • API Glossary - Parameters

  Day 4-5: Mini Projects

  • Description: Apply your JavaScript skills by working on mini projects. These projects provide hands-on experience and reinforce the concepts learned throughout the week.

    • JavaScript Mini Projects

  Day 6-7: Weather App and Hosting

  • Description: Create a weather application by integrating an external API. Learn how to fetch data from an API and display it dynamically on your web page. Explore hosting options for your projects, including platforms like Vercel.

    • Weather App Tutorial
    • Vercel Documentation
    • How to host webapp on vercel

  Week 4: JavaScript Frameworks

  Day 1: Introduction to JavaScript Frameworks

  • Description: Explore the world of JavaScript frameworks and understand their significance in modern web development. Learn why developers use frameworks and how they can streamline the development process.

    • JS Frameworks: A Brief Overview
    • Why Use JavaScript Frameworks?
    • Which JavaScript FrameWork to choose

  Day 2-3: React Basics

  • Description: Dive into React, a popular JavaScript library for building user interfaces. Explore the fundamentals of React, including components, state, and props.

    • React Documentation
    • React Basics Playlist

  Day 4-7: React Project

  • Description: Apply your React skills by working on a hands-on project. Create a React application that incorporates the concepts learned throughout the week. This project will reinforce your understanding of React and provide practical experience.

    • React Projects Tutorial

  Extras

  • Description: Understand the folder structure in React and how it organizes your project files and components.

    • React Folder Structure Best Practices

  Week 5: Node.js and Express

  Day 1-2: Introduction to Node.js

  • Description: Learn about the basics of Node.js, its architecture, and how it enables server-side JavaScript development.

    • Node.js Documentation
    • Introduction to Node.js
    • Node.js Crash Course

  Day 3: npm and Yarn

  • Description: Understand package management in Node.js with npm (Node Package Manager) and Yarn. Explore the basics of npm, its commands, and learn about Yarn as an alternative package manager.

    • npm Website
    • What is npm?
    • npm Tutorial
    • Yarn Documentation
    • What is Yarn and Should We Use It?
    • npm vs Yarn

  Day 4-5: Express.js

  • Description: Dive into Express.js, a popular web application framework for Node.js. Learn about routing, middleware, and how to build robust web applications with Express.

    • Express.js Documentation
    • Introduction to Node's Express.js
    • Express.js Crash Course

  Day 6-7: Express.js Project

  • Description: Apply your knowledge by working on a hands-on project using Express.js. Create a simple web application that incorporates the concepts learned throughout the week.

    • Express.js Project Tutorial

  Week 6: MongoDB and Mongoose

  Day 1-2: MongoDB Basics

  • Description: Explore MongoDB, a NoSQL database that stores data in flexible, JSON-like documents. Learn the basics of MongoDB, its advantages, and how to get started.

    • MongoDB Official Website
    • MongoDB: A Beginner's Guide
    • MongoDB Tutorial

  Day 3-4: Mongoose

  • Description: Dive into Mongoose, an Object Data Modeling (ODM) library for MongoDB and Node.js. Learn how to interact with MongoDB using Mongoose, including creating models, querying, and more.

    • Mongoose Official Website
    • Introduction to Mongoose for MongoDB
    • Mongoose Tutorial

  Day 5-6-7: MongoDB and Mongoose Project

  • Description: Apply your MongoDB and Mongoose knowledge by working on a hands-on project. Create a web application that integrates MongoDB as the database and uses Mongoose for data modeling. This project will reinforce your understanding of database interactions in a Node.js environment.

    • MongoDB and Mongoose Project Tutorial
    • Node.js, Express, MongoDB & Mongoose Project

    Contributing to the Resources

If you'd like to contribute or add a new topic/resource to this collection, we welcome your input! Follow the steps below to create a pull request (PR) and contribute to this repository:

1. Fork the Repository: Click on the "Fork" button at the top right corner of this repository to create your copy.

2. Clone Your Fork: Clone your forked repository to your local machine using the following command:

   git clone https://github.com/your-username/Hackoverflow-24-resources.git

3. Create a New Branch: Create a new branch with a descriptive name to work on your changes:

   git checkout -b new-topic-name

4. Make Changes: Add your new topic or make changes to existing content in the Markdown files.

5. Commit Changes: Commit your changes with a descriptive commit message:

   git add .
   git commit -m "Added new topic: Your New Topic"

6. Push Changes: Push your changes to your forked repository and the new branch:

   git push origin new-topic-name

7. Create a Pull Request: Go to the GitHub repository and create a new pull request. Ensure that your PR description clearly explains the changes you made.