100 days web design and development challenge

Here’s a 100 Days Web Design Challenge step-by-step outline to guide you through mastering web design. Each day focuses on a specific topic or skill to develop your expertise. This challenge covers the basics of design principles, coding languages, tools, and real-world projects.

design by author

Find Me fiverr

Phase 1: Web Design Fundamentals & Tools (Days 1–15)

Days 1–5: Introduction to Web Design

Day 1: Overview of web design — structure, purpose, user-centered design.

On the first day of your web design journey, it’s important to understand the foundation of web design. Web design encompasses the creation of websites that are visually appealing, user-friendly, and functional. It involves a blend of technical skills (coding and programming) and creative skills (layout, color schemes, and typography).

1. Structure: Web design follows a structured process where the designer creates a blueprint for how the website’s content will be organized. This involves breaking down the website into headers, footers, navigation bars, sidebars, and content areas. Wireframes are often used to visualize the layout before coding begins.
2. Purpose: Every website serves a purpose, whether it’s to inform, sell, entertain, or provide a service. Understanding the website’s purpose ensures that the design aligns with its goals. Websites should be designed with a clear purpose to guide users to the information they need.
3. User-Centered Design: At the core of effective web design is the concept of user-centered design (UCD), which focuses on creating an experience tailored to the user’s needs and behaviors. This involves understanding your audience, and ensuring that the website is easy to navigate and that it solves the user’s problems efficiently. User experience (UX) and user interface (UI) design principles play a crucial role here, as the goal is to make the user’s interaction with the website as smooth and intuitive as possible.

Day 2: Understanding the Difference Between Web Design and Development

On Day 2, it’s essential to distinguish between web design and web development — two fields that often overlap but have distinct roles.

1. Web Design: This focuses on the visual and aesthetic aspects of a website. Web designers create the look and feel of a website, working with elements such as layout, colors, fonts, and images. They use tools like Adobe XD, Figma, or Sketch to create wireframes and mockups of what the website will look like.
2. Web Development: Once the design is ready, web developers take over to bring the design to life by coding the website. Web development is divided into two main categories:

• Front-End Development: This involves coding the parts of the website that users interact with, using languages like HTML, CSS, and JavaScript. The front-end developer’s job is to ensure the design functions properly in the browser.
• Back-End Development: This deals with the server, database, and application logic. Back-end developers work behind the scenes using languages like PHP, Ruby, Python, and SQL to manage data and ensure that the website operates smoothly.

1. Design vs. Development: While designers focus on how a website looks, developers focus on how a website works. Both roles are essential to creating a functional, visually pleasing website. However, designers need a good understanding of front-end development (HTML and CSS) to create designs that can be easily implemented by developers.

Day 3: Introduction to responsive design (mobile-first design).

By Day 3, you’ll dive into the concept of responsive design, one of the most important principles in modern web design. Responsive design ensures that your website looks and functions well on all devices — whether it’s a desktop, tablet, or smartphone.

1. What is Responsive Design?: Responsive design refers to designing and coding a website so that it adapts to different screen sizes and devices. This means that the layout, images, and content automatically adjust to provide an optimal viewing experience no matter the device.
2. Mobile-First Design: In a mobile-first design approach, the designer starts by designing for smaller screens (like smartphones) and then scales up for larger devices (tablets and desktops). This is crucial because mobile traffic makes up a significant portion of web users today. By focusing on mobile first, designers ensure that the site works smoothly on smaller devices, which often have slower load times and limited screen real estate.
3. Media Queries: One of the key tools used in responsive design is CSS media queries. Media queries allow you to apply different styles depending on the screen size of the device. For example, you can use one layout for a smartphone and a different layout for a desktop without having to create separate websites.
4. Fluid Grids and Flexible Images: Responsive design often incorporates fluid grids, which allow the layout to resize proportionally, and flexible images, which adjust their size based on the width of the screen. Together, these techniques ensure that the website looks great on all devices.
5. Day 4: Learn how to use Adobe XD, Figma, or Sketch for wireframes.
6. Day 5: Learn about color theory and typography for web design.

Days 6–10: HTML Basics

1. Day 6: Introduction to HTML — Understanding the structure of a web page.
2. Day 7: Learn about HTML elements and semantic tags.
3. Day 8: Create a basic webpage using HTML.
4. Day 9: Learn how to add images, links, and forms using HTML.
5. Day 10: Build a multi-page website structure.

Days 11–15: CSS Basics

1. Day 11: Introduction to CSS — Styling your website.
2. Day 12: Learn about CSS selectors, properties, and values.
3. Day 13: Learn how to use CSS for layout (box model, margin, padding).
4. Day 14: Introduction to CSS Grid and Flexbox for page layout.
5. Day 15: Build a simple portfolio page using HTML and CSS.

Phase 2: Advanced HTML & CSS (Days 16–30)

Days 16–20: Responsive Design with Media Queries

1. Day 16: Understanding media queries and breakpoints.
2. Day 17: Creating a responsive navigation menu.
3. Day 18: Responsive grids and layouts with Flexbox.
4. Day 19: Learn how to use CSS Grid for responsive design.
5. Day 20: Design and build a fully responsive homepage.

Days 21–25: CSS Animations & Effects

1. Day 21: Learn basic CSS transitions and animations.
2. Day 22: Using hover effects and button animations.
3. Day 23: Create image sliders and galleries using CSS.
4. Day 24: Parallax scrolling effects using CSS.
5. Day 25: Animate your portfolio page and add interactive elements.

Days 26–30: Introduction to CSS Frameworks

1. Day 26: Overview of popular CSS frameworks (Bootstrap, Tailwind CSS).
2. Day 27: Learn how to use Bootstrap for responsive design.
3. Day 28: Customize Bootstrap components for your site.
4. Day 29: Learn how to use Tailwind CSS for utility-first design.
5. Day 30: Build a responsive website using Bootstrap or Tailwind.

Phase 3: JavaScript Basics & Dynamic Websites (Days 31–50)

Days 31–35: Introduction to JavaScript

1. Day 31: Learn JavaScript basics — variables, functions, events.
2. Day 32: DOM manipulation — selecting and editing elements.
3. Day 33: Create interactive elements (e.g., image sliders, modals).
4. Day 34: Learn how to use JavaScript to validate forms.
5. Day 35: Build a dynamic webpage with basic JavaScript interactivity.

Days 36–40: Advanced JavaScript Concepts

1. Day 36: Learn about arrays, objects, and loops in JavaScript.
2. Day 37: Introduction to JavaScript frameworks (jQuery).
3. Day 38: Learn AJAX for loading content dynamically.
4. Day 39: Create a JavaScript-powered contact form.
5. Day 40: Build a small project using vanilla JavaScript.

Days 41–45: Responsive Design with JavaScript

1. Day 41: Build responsive navigation with JavaScript.
2. Day 42: Learn how to use JavaScript for responsive design adjustments.
3. Day 43: Implement a JavaScript image gallery.
4. Day 44: Build a responsive portfolio page with JavaScript.
5. Day 45: Improve your website’s performance and interactivity with JavaScript.

Days 46–50: Web Design Accessibility & Usability

1. Day 46: Understand web accessibility (WAI-ARIA, screen readers).
2. Day 47: Optimize your website for users with disabilities.
3. Day 48: Learn about web design usability principles.
4. Day 49: Conduct a usability test on your website.
5. Day 50: Improve the accessibility and usability of your portfolio.

Phase 4: Real-World Projects (Days 51–80)

Days 51–60: Design a Blog Website

1. Day 51: Research blog website design.
2. Day 52: Plan the wireframe and structure for the blog.
3. Day 53: Design a homepage for the blog using HTML and CSS.
4. Day 54: Build a blog post template.
5. Day 55: Add JavaScript for interactivity (e.g., comments section).
6. Day 56: Make the blog fully responsive.
7. Day 57: Test and refine the blog for accessibility.
8. Day 58: Optimize the blog for SEO and page speed.
9. Day 59: Add a contact form and subscription form to the blog.
10. Day 60: Launch your blog website.

Days 61–70: Design an E-Commerce Website

1. Day 61: Research and plan the structure of an e-commerce website.
2. Day 62: Create a wireframe for product and category pages.
3. Day 63: Design a homepage for the e-commerce website.
4. Day 64: Build product listing and product detail pages.
5. Day 65: Implement a shopping cart using HTML, CSS, and JavaScript.
6. Day 66: Design and build a responsive checkout page.
7. Day 67: Add product filters and search functionality with JavaScript.
8. Day 68: Ensure the website is mobile-friendly and responsive.
9. Day 69: Test the website for usability and performance.
10. Day 70: Finalize the design and launch the e-commerce website.

Days 71–80: Design a Portfolio Website

1. Day 71: Plan your personal portfolio website’s structure and design.
2. Day 72: Create a wireframe for your portfolio homepage.
3. Day 73: Design the homepage using HTML and CSS.
4. Day 74: Build a projects section with filters (e.g., JavaScript).
5. Day 75: Add a contact form and testimonials section.
6. Day 76: Implement a blog section (if applicable).
7. Day 77: Ensure the website is fully responsive.
8. Day 78: Improve the performance of the portfolio website.
9. Day 79: Add SEO elements and test for usability.
10. Day 80: Launch your portfolio website.

Phase 5: Mastering Advanced Skills (Days 81–100)

Days 81–90: Learning WordPress for Web Design

1. Day 81: Introduction to WordPress — Themes, Plugins, and Templates.
2. Day 82: Build a custom WordPress theme from scratch.
3. Day 83: Learn how to use page builders (Elementor, WPBakery).
4. Day 84: Add custom CSS and JavaScript to WordPress.
5. Day 85: Create a blog or e-commerce website using WordPress.
6. Day 86: Optimize your WordPress site for performance.
7. Day 87: Add essential plugins (SEO, security, caching).
8. Day 88: Test your WordPress site for mobile and responsive performance.
9. Day 89: Finalize and launch the WordPress site.
10. Day 90: Learn how to manage and update WordPress sites.

Days 91–100: Final Capstone Project

1. Day 91: Plan your capstone project — choose between a blog, e-commerce, or portfolio.
2. Day 92: Create wireframes and mockups.
3. Day 93: Build the homepage and key pages.
4. Day 94: Add dynamic content (JavaScript, CMS integration).
5. Day 95: Ensure the website is mobile-friendly.
6. Day 96: Conduct user testing and usability improvements.
7. Day 97: Optimize the website for SEO and performance.
8. Day 98: Finalize and launch the capstone project.
9. Day 99: Present the website to a mentor or peers for feedback.
10. Day 100: Celebrate your completion of the 100 Days Web Design Challenge!

I will update it day by day and I will make a video every single of day…it’s my own challenge.

Find My youtube channel and subscribe