Hi Guys,

Here is a link to a full stack e-commerce project from July 24 batch.
Have a look on the code and play around it and complete the missing parts and use this projects as your project in resume or use this as a guidance project for your next project.

💻Github Link: https://github.com/AyusofAyush/teachnook-webdev-july24/tree/main/Final_E-Commerce-project

🎨Design Link: https://websitedemos.net/earth-store-02/?customize=template
🚀🚀🚀🚀🚀💻🚀🚀🚀🚀🚀

Hi everyone,

Here is a link to the code for Day 1 to Day 5 of the October 24 batch. Explore the code, complete the missing parts, and use this as a project to practice your skills.


💻Github Link: https://github.com/AyusofAyush/teachnook-webdev-oct24

Hey Web Dev Rockstars! 👨‍💻👩‍💻

Feeling stuck in your code or overwhelmed by all the new tech? Don’t worry—I’ve got your back! Whether it’s React, Next.js, Node.js, Python, Spring Boot, Java, Django, or leveling up in web development, I’m here to guide you.

We’ll keep it simple, cool, and focused on what you need—be it fixing bugs, building projects, or mapping out your career.

👉 Catch me on Topmate: https://topmate.io/ayusofayush
👔 Connect with me on LinkedIn: https://www.linkedin.com/in/ayusofayush/

Let’s work together to break through challenges and make your web dev journey exciting and rewarding. 🚀

See you there! 😊

Hi everyone,

Here is a link to the code for Day 1 to Day 19 of the November 24 batch. Explore the code, complete the missing parts, and use this as a project to practice your skills.


💻Github Link: https://github.com/AyusofAyush/teachnook-webdev-nov24

Hi everyone,

Here is a link to the code for Day 1 to Day 4 of the December 24 batch. Explore the code, complete the missing parts, and use this as a project to practice your skills.


💻Github Link: https://github.com/AyusofAyush/teachnook-webdev-dec24

📢 Welcome to the Web Development Batch – February 2025! 🚀

Dear Mentees,

I’m excited to embark on this learning journey with all of you as we dive into the world of Web Development! To ensure smooth access to all our notes, resources, and materials, I will be maintaining a dedicated repository where you can find everything you need throughout the course.

📌 All notes will be uploaded here:
🔗 GitHub Repository https://github.com/AyusofAyush/launched-webdev-feb25

I encourage you to regularly check the repository, as I will be updating it with new notes and key takeaways from our sessions. This will be your go-to resource for reinforcing concepts, revising topics, and staying aligned with the course structure.

Let's make the most of this opportunity by actively participating, sharing knowledge, and growing together as developers. Looking forward to an enriching and collaborative learning experience!

If you have any questions or need clarification, feel free to reach out. Let’s build something amazing!

Happy coding! 💻✨

Best,
Ayush Raj
Web Development Mentor

Hi Guys,
I share cool tech & AI highlights 🔥, mind-blowing inventions 🤯, and the latest trends in AI & Technology 🌍💻.
If you love tech, AI, and staying ahead of the game, this is for YOU!

👉 Subscribe on YouTube 🎥: SKutirX (https://youtube.com/@skutirx?feature=shared)
👉 Follow on Instagram 📸: @skutirx (https://www.instagram.com/skutirx/)

Consider joining.... see you on the other side. Thanks.

Hi Guys,
Please Consider
👉 Subscribe on YouTube 🎥: SKutirX (https://youtube.com/@skutirx?feature=shared)
👉 Follow on Instagram 📸: @skutirx (https://www.instagram.com/

Hi Guys,
I want you guys, to help me grow the channel. If you find the content helpful and relevant.
Please consider following / subscribing.
Thank you in advance.

👉 Subscribe on YouTube 🎥: SKutirX (https://youtube.com/@skutirx?feature=shared)
👉 Follow on Instagram 📸: @skutirx (https://www.instagram.com/

http://cssreference.io/
You guys can use this website for finding all different kinds of CSS properties and usage with images to help you understand
Try it today.

Welcome to the Web Development Batch – March 2025! 🚀

Dear Mentees,

I’m excited to embark on this learning journey with all of you as we dive into the world of Web Development! To ensure smooth access to all our notes, resources, and materials, I will be maintaining a dedicated repository where you can find everything you need throughout the course.

📌 All notes will be uploaded here:
🔗 GitHub Repository https://github.com/AyusofAyush/launched-webdev-mar25

I encourage you to regularly check the repository, as I will be updating it with new notes and key takeaways from our sessions. This will be your go-to resource for reinforcing concepts, revising topics, and staying aligned with the course structure.

Let's make the most of this opportunity by actively participating, sharing knowledge, and growing together as developers. Looking forward to an enriching and collaborative learning experience!

If you have any questions or need clarification, feel free to reach out. Let’s build something amazing!

Happy coding! 💻✨

Best,
Ayush Raj
Web Development Mentor

Welcome to the Web Development Batch – May 2025! 🚀

Dear Mentees,

I’m excited to embark on this learning journey with all of you as we dive into the world of Web Development! To ensure smooth access to all our notes, resources, and materials, I will be maintaining a dedicated repository where you can find everything you need throughout the course.

📌 All notes will be uploaded here:
🔗 GitHub Repository https://github.com/AyusofAyush/launched-webdev-may_Eng25

I encourage you to regularly check the repository, as I will be updating it with new notes and key takeaways from our sessions. This will be your go-to resource for reinforcing concepts, revising topics, and staying aligned with the course structure.

Let's make the most of this opportunity by actively participating, sharing knowledge, and growing together as developers. Looking forward to an enriching and collaborative learning experience!

If you have any questions or need clarification, feel free to reach out. Let’s build something amazing!

Happy coding! 💻✨

Best,
Ayush Raj
Web Development Mentor

Here are the list of questions that you need to complete May batch 2025

1.Project: Personal Portfolio Website (HTML Structure, Semantic HTML, Basic CSS)

Question: Design and build a personal portfolio website. This should include an "About Me" section, a "Projects" section (with at least three project entries), and a "Contact Me" section with a basic form. Ensure you use appropriate HTML5 semantic tags (<header>, <nav>, <main>, <section>, <footer>, <article>, etc.) to structure your content. Apply basic CSS to style the typography (fonts, colors, sizes) and provide a clean, readable layout without using advanced layout techniques.

2 .Project: Product Landing Page (Box Model, Basic Layout, Advanced HTML Forms)

Question: Create a responsive landing page for a fictional product. This page should feature a compelling headline, product description, a clear call-to-action button, and a signup form for a newsletter. Utilize the CSS Box Model (margin, border, padding) effectively to space out your elements. Experiment with different input types in your form (e.g., text, email, submit, checkbox). How would you ensure the form fields are clearly labeled and accessible?

3.Project: Blog Post Template (Semantic HTML, Advanced HTML, Basic CSS)

Question: Develop a robust HTML template for a single blog post. This template should include the post title, author information, publication date, the main article content (with headings, paragraphs, lists, and potentially an image), and a section for comments. Focus heavily on using semantic HTML tags (e.g., <article> for the post, <section> for comments, <time> for dates). Apply CSS to make the main article content readable and visually appealing, using basic text styling and perhaps a simple border around images.

4.Project: Simple Grid-Based Gallery (CSS Layout, Responsive Design)

**Question: Build a photo gallery page that displays at least 6 images. Use CSS to arrange these images in a basic grid-like layout (you can start with floats or display: inline-block for now, as flexbox/grid might be introduced later). Implement media queries to make this gallery responsive: on small screens (e.g., mobile), images should stack vertically or display in a single column; on medium screens (e.g., tablet), they should display in two columns; and on large screens (e.g., desktop), they should display in three columns.

5.Project: Sticky Navigation Bar (CSS Positioning, HTML Structure)

Question: Create a simple webpage with a relatively long scrollable content area. Implement a navigation bar at the top of the page that uses position: sticky; to remain visible as the user scrolls down the page. The navigation bar should contain at least three links that scroll smoothly to different sections of the page (you'll need to use IDs and anchor links for this).

6.Project: Basic E-commerce Product Listing (HTML Tables/Lists, Semantic HTML, CSS Styling)

Question: Design a product listing page for a small online store. You should display at least five fictional products, each with a name, description, price, and an "Add to Cart" button. Consider using an HTML <table> to structure your product data or a series of <div> elements with semantic structuring. Apply CSS to make the product listings visually distinct and appealing. How would you handle displaying a "Sold Out" status for a product semantically?

7.Project: "About Us" Page with Sections (HTML Structure, Semantic HTML, Basic CSS)

Question: Develop an "About Us" page for a fictional company. This page should be divided into at least three distinct sections (e.g., "Our History," "Our Mission," "Our Team"). Each section should have its own heading and descriptive paragraphs. Use the <section> tag appropriately for these divisions. Style each section with a background color or border to visually separate them, and ensure consistent padding and margins using the Box Model.

8.Project: Basic Blog Homepage (Multiple Articles, Semantic HTML, Basic Layout)

Question: Create the homepage for a blog that displays excerpts of at least three different blog posts. Each blog post excerpt should be contained within an <article> tag and include a title, a short summary, and a "Read More" link. Arrange these articles vertically with some spacing using CSS. Consider how you would display the author and publication date for each article within its respective <article> tag.

9.Project: Simple FAQ Section (HTML Lists, Basic CSS)

Question: Build a Frequently Asked Questions (FAQ) section. This section should contain at least five questions and their corresponding answers. Use HTML list elements (<ul>, <li>) to structure the questions and answers. Apply CSS to style the questions to stand out (e.g., bolding) and ensure the answers are easily readable. How might you visually distinguish between a question and its answer?

10.Project: Responsive Card Layout for Services (CSS Layout, Media Queries)

Question: Create a "Our Services" page that displays at least four different services. Each service should be presented as a "card" (a <div> or <section> with content and a border/shadow). Use CSS to arrange these cards in a flexible layout: on large screens, they should display in two columns; on medium screens, they should display in one column with a wider width; and on small screens, they should stack vertically. This project will heavily test your understanding of basic CSS layout properties (like display: block; or display: inline-block; combined with widths) and media queries.

Here is the list of questions that you need to complete May batch 2025

1.Project: Interactive To-Do List (DOM Manipulation, Event Listeners)

Question: Build a simple web-based To-Do List application. Users should be able to:

Add new tasks (text input).

Mark tasks as complete (e.g., toggle a strike-through style).

Delete tasks.

Ensure the tasks are added/removed dynamically using JavaScript and the DOM. How would you handle adding a unique ID to each task for easy manipulation?

2.Project: Basic Calculator (Event Listeners, Functions, Basic Arithmetic)

Question: Create a functional basic calculator with buttons for digits (0-9), arithmetic operations (+, -, *, /), clear, and equals. When a user clicks a button, the display should update. On clicking '=', calculate and show the result. Focus on JavaScript logic for handling button clicks and performing the calculations, updating a single display element.

3.Project: Image Carousel/Slider (DOM Manipulation, Timers, Event Listeners)

Question: Develop an image carousel that displays a series of images one at a time. Implement "Next" and "Previous" buttons to navigate through the images. Additionally, make it auto-advance every few seconds. How would you ensure the carousel loops infinitely (from the last image back to the first, and vice-versa)?

4.Project: Dynamic FAQ Accordion (DOM Manipulation, Event Listeners, CSS Classes)

Question: Convert your previous static FAQ section into an interactive accordion. When a user clicks on a question, its answer should expand/collapse. Use JavaScript to toggle a CSS class on the answer element to control its display or max-height property. How would you ensure only one answer is open at a time, closing any previously open answers when a new one is clicked?

5.Project: Simple Form Validation (Event Listeners, String Methods, Conditional Logic)

Question: Enhance a basic contact or signup form (from your previous projects) with client-side JavaScript validation. For fields like Name, Email, and Password:

Name: Must not be empty.

Email: Must be a valid email format (using a simple regex or string methods like includes('@') and includes('.')).

Password: Must be at least 8 characters long and contain at least one number and one uppercase letter.

Prevent form submission if validation fails, and display clear, user-friendly error messages next to the invalid fields.

6.Project: Live Character Counter (Event Listeners, DOM Manipulation, Input Events)

Question: For a <textarea> or <input type="text"> element, create a live character counter that updates as the user types. Display the current character count and a maximum allowed character count (e.g., "50/200 characters"). Implement a visual indicator (e.g., change text color) if the user exceeds the maximum limit.

7.Project: Dynamic Filtering/Searching (DOM Manipulation, Array Methods, Input Events)

Question: Take your product listing or blog homepage. Add an input field that allows users to filter the displayed items (products or blog posts) based on keywords in their title or description. As the user types, the list should update in real-time, showing only matching items and hiding others. Utilize JavaScript array methods (filter()) and DOM manipulation to achieve this.

8.Project: Basic Timer/Countdown (Timers, DOM Manipulation)

Question: Build a simple countdown timer. The user should be able to input a time (e.g., in minutes and seconds), start, pause, and reset the timer. The display should update every second. How would you handle formatting the time display (e.g., "05:30" instead of "5:30")?

9.Project: Random Quote Generator (Arrays, Math Object, DOM Manipulation)

Question: Create a webpage that displays a random inspirational quote. Include a button that, when clicked, fetches and displays a new random quote from a pre-defined array of quotes. Each quote should have an author.

10.Project: Simple Dark Mode Toggle (DOM Manipulation, CSS Variables/Classes, Local Storage - Bonus)

Question: Implement a "Dark Mode" toggle switch on any of your existing pages. When the toggle is activated, the page's color scheme should switch to a darker theme. When deactivated, it should revert to the light theme.

Core: Use JavaScript to add/remove a class on the <body> element (e.g., dark-mode). Your CSS will define the dark mode styles based on this class.

Bonus (Persistence): Use localStorage to remember the user's last chosen mode (dark or light) so it persists even after they close and reopen the browser.

Here are the list of questions that you need to complete the June batch 2025

1.Project: Personal Portfolio Website (HTML Structure, Semantic HTML, Basic CSS)

Question: Design and build a personal portfolio website. This should include an "About Me" section, a "Projects" section (with at least three project entries), and a "Contact Me" section with a basic form. Ensure you use appropriate HTML5 semantic tags (<header>, <nav>, <main>, <section>, <footer>, <article>, etc.) to structure your content. Apply basic CSS to style the typography (fonts, colors, sizes) and provide a clean, readable layout without using advanced layout techniques.

2 .Project: Product Landing Page (Box Model, Basic Layout, Advanced HTML Forms)

Question: Create a responsive landing page for a fictional product. This page should feature a compelling headline, product description, a clear call-to-action button, and a signup form for a newsletter. Utilize the CSS Box Model (margin, border, padding) effectively to space out your elements. Experiment with different input types in your form (e.g., text, email, submit, checkbox). How would you ensure the form fields are clearly labeled and accessible?

3.Project: Blog Post Template (Semantic HTML, Advanced HTML, Basic CSS)

Question: Develop a robust HTML template for a single blog post. This template should include the post title, author information, publication date, the main article content (with headings, paragraphs, lists, and potentially an image), and a section for comments. Focus heavily on using semantic HTML tags (e.g., <article> for the post, <section> for comments, <time> for dates). Apply CSS to make the main article content readable and visually appealing, using basic text styling and perhaps a simple border around images.

4.Project: Simple Grid-Based Gallery (CSS Layout, Responsive Design)

**Question: Build a photo gallery page that displays at least 6 images. Use CSS to arrange these images in a basic grid-like layout (you can start with floats or display: inline-block for now, as flexbox/grid might be introduced later). Implement media queries to make this gallery responsive: on small screens (e.g., mobile), images should stack vertically or display in a single column; on medium screens (e.g., tablet), they should display in two columns; and on large screens (e.g., desktop), they should display in three columns.

5.Project: Sticky Navigation Bar (CSS Positioning, HTML Structure)

Question: Create a simple webpage with a relatively long scrollable content area. Implement a navigation bar at the top of the page that uses position: sticky; to remain visible as the user scrolls down the page. The navigation bar should contain at least three links that scroll smoothly to different sections of the page (you'll need to use IDs and anchor links for this).

6.Project: Basic E-commerce Product Listing (HTML Tables/Lists, Semantic HTML, CSS Styling)

Question: Design a product listing page for a small online store. You should display at least five fictional products, each with a name, description, price, and an "Add to Cart" button. Consider using an HTML <table> to structure your product data or a series of <div> elements with semantic structuring. Apply CSS to make the product listings visually distinct and appealing. How would you handle displaying a "Sold Out" status for a product semantically?

7.Project: "About Us" Page with Sections (HTML Structure, Semantic HTML, Basic CSS)

Question: Develop an "About Us" page for a fictional company. This page should be divided into at least three distinct sections (e.g., "Our History," "Our Mission," "Our Team"). Each section should have its own heading and descriptive paragraphs. Use the <section> tag appropriately for these divisions. Style each section with a background color or border to visually separate them, and ensure consistent padding and margins using the Box Model.

8.Project: Basic Blog Homepage (Multiple Articles, Semantic HTML, Basic Layout)

Question: Create the homepage for a blog that displays excerpts of at least three different blog posts. Each blog post excerpt should be contained within an <article> tag and include a title, a short summary, and a "Read More" link. Arrange these articles vertically with some spacing using CSS. Consider how you would display the author and publication date for each article within its respective <article> tag.

9.Project: Simple FAQ Section (HTML Lists, Basic CSS)

Question: Build a Frequently Asked Questions (FAQ) section. This section should contain at least five questions and their corresponding answers. Use HTML list elements (<ul>, <li>) to structure the questions and answers. Apply CSS to style the questions to stand out (e.g., bolding) and ensure the answers are easily readable. How might you visually distinguish between a question and its answer?

10.Project: Responsive Card Layout for Services (CSS Layout, Media Queries)

Question: Create a "Our Services" page that displays at least four different services. Each service should be presented as a "card" (a <div> or <section> with content and a border/shadow). Use CSS to arrange these cards in a flexible layout: on large screens, they should display in two columns; on medium screens, they should display in one column with a wider width; and on small screens, they should stack vertically. This project will heavily test your understanding of basic CSS layout properties (like display: block; or display: inline-block; combined with widths) and media queries.

July batch complete this 10 questions related to HTML and CSS