[Feature Request]: Adding CSS roadmap

[Khushi-Pushkar]

Is there an existing issue for this?

• [X] I have searched the existing issues

Feature Description

i would like to add CSS roadmap

Use Case

.

Benefits

No response

Add ScreenShots

No response

Priority

High

Record

• [X] I have read the Contributing Guidelines
• [X] I'm a GSSOC'24 contributor
• [X] I have starred the repository

[github-actions[bot]]

Hi @Khushi-Pushkar! Thanks for opening this issue. We appreciate your contribution to this open-source project. Your input is valuable and we aim to respond or assign your issue as soon as possible. Thanks again!

[Ajay-Dhangar]

@Khushi-Pushkar, I have created a structure for our roadmaps similar to the image below:

However, our page currently has a layout similar to this: HTML Roadmap.

I am working on the design, and once it's complete, I will assign it. In the meantime, if you want to contribute, you can write the content in a JSON-like format.

Navigate to the /src/database folder and create a new folder named roadmap/css. Inside this folder, create a file named index.tsx and structure the content as follows:

const cssRoadmap = [
  // your data in structured format
];

export default cssRoadmap;

Feel free to add your structured data in the cssRoadmap array.

For Example

src/database/roadmap/css/index.tsx

type ResourceLink = {
  url: string;
  text: string;
};

type SubTopic = {
  id: string;
  title: string;
  description: string;
  links: ResourceLink[];
};

type Topic = {
  id: number;
  title: string;
  content: SubTopic[];
};

const cssRoadmap: Topic[] = [
  {
    id: 1,
    title: "Introduction to CSS",
    content: [
      {
        id: "1.1",
        title: "What is CSS?",
        description: "Learn about the basics of CSS and its importance in web development.",
        links: [
          { url: "https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS", text: "MDN Web Docs" },
          { url: "https://www.w3schools.com/css/css_intro.asp", text: "W3Schools Introduction to CSS" }
        ]
      },
      {
        id: "1.2",
        title: "CSS Syntax and Selectors",
        description: "Understand the syntax of CSS and how to use selectors to style elements.",
        links: [
          { url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors", text: "MDN CSS Selectors" },
          { url: "https://www.w3schools.com/css/css_syntax.asp", text: "W3Schools CSS Syntax" }
        ]
      }
    ]
  },
  {
    id: 2,
    title: "CSS Fundamentals",
    content: [
      {
        id: "2.1",
        title: "Colors and Backgrounds",
        description: "Learn how to apply colors and background styles to elements.",
        links: [
          { url: "https://developer.mozilla.org/en-US/docs/Web/CSS/color", text: "MDN Colors" },
          { url: "https://www.w3schools.com/css/css_background.asp", text: "W3Schools Backgrounds" }
        ]
      },
      {
        id: "2.2",
        title: "Box Model",
        description: "Understand the CSS box model and how it affects element layout.",
        links: [
          { url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model", text: "MDN Box Model" },
          { url: "https://www.w3schools.com/css/css_boxmodel.asp", text: "W3Schools Box Model" }
        ]
      }
    ]
  },
  {
    id: 3,
    title: "Advanced CSS",
    content: [
      {
        id: "3.1",
        title: "Flexbox",
        description: "Learn about the Flexbox layout model and how to use it for responsive designs.",
        links: [
          { url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout", text: "MDN Flexbox" },
          { url: "https://www.w3schools.com/css/css3_flexbox.asp", text: "W3Schools Flexbox" }
        ]
      },
      {
        id: "3.2",
        title: "Grid",
        description: "Understand CSS Grid and how it can be used to create complex layouts.",
        links: [
          { url: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout", text: "MDN Grid" },
          { url: "https://www.w3schools.com/css/css_grid.asp", text: "W3Schools Grid" }
        ]
      }
    ]
  }
];

export default cssRoadmap;

[Khushi-Pushkar]

Okay 👍🏻