Scribd
Upload
6 views2 pages

Web Dev Project Plan

The document outlines a 30-day web development project plan, starting with beginner HTML and CSS projects and progressing to JavaScript, React, and capstone projects. Each phase includes specific tasks to build foundational skills in web development. The plan culminates in creating a portfolio website and other advanced applications using React.

Uploaded by

1424anjali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views2 pages

Web Dev Project Plan

The document outlines a 30-day web development project plan, starting with beginner HTML and CSS projects and progressing to JavaScript, React, and capstone projects. Each phase includes specific tasks to build foundational skills in web development. The plan culminates in creating a portfolio website and other advanced applications using React.

Uploaded by

1424anjali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Skill-Building Web Development Project Plan

Day 1-2: Beginner HTML Projects


- Create a personal profile page using only HTML.

- Build a simple resume layout with HTML sections for Education, Skills, and Contact.

- Design a basic webpage with headings, lists, and images about your favorite hobby.

Day 3-4: Beginner CSS Projects


- Style your profile page with colors, fonts, padding, and margins.

- Create a responsive card UI with hover effects using CSS.

- Build a simple landing page for a product or service with a hero section and CTA.

Day 5-6: HTML Forms + Tables


- Create a contact form with name, email, message, and submit button.

- Design a table to display student marks with alternating row colors and borders.

Day 7-8: Intermediate CSS Projects


- Build a responsive navigation bar that turns into a hamburger menu on mobile.

- Use Flexbox and Grid to create a responsive photo gallery or pricing section.

Day 9-11: JavaScript Basics Projects


- Create a calculator using HTML, CSS, and JavaScript.

- Build a digital clock that updates every second.

- Create a tip calculator that takes bill amount and percentage input.

Day 12-14: JavaScript DOM Projects


- Build a to-do list app with add and delete functionality.

- Create an image slider or carousel.

- Make a dynamic FAQ section with collapsible answers.


Day 15-17: JavaScript Advanced + API
- Fetch and display data from a public API (e.g., GitHub profile viewer).

- Create a weather app using a weather API.

- Build a quote generator with a new quote on button click.

Day 18-20: Beginner React Projects


- Create a 'Hello World' React app and a greeting component.

- Build a simple counter app using useState.

- Create a React form that displays submitted input below the form.

Day 21-24: Intermediate React Projects


- Build a user list app fetching data from an API.

- Create a note-taking app with add and delete note functionality.

- Develop a theme toggle (dark/light) using useContext.

Day 25-30: Capstone Projects


- Create a portfolio website using React.

- Build a blog site with CRUD features using React and local storage.

- Develop an e-commerce product listing page with filtering and sorting features.

You might also like