Basic Components of a Web Layout

Hi! Welcome to this beginner-friendly Frontend Engineering challenge for Hacktoberfest. A project focused on people getting started with frontend development.

Everyone is encouraged to participate, regardless of your skill level (If you don't have the required skills, use this project as a motivation to learn those!). This is a practice project and should be considered a playground.

About the Project:

You've to basically make components which are used often in a website. For eg. Navbar, Sidebar, Alert box, Carousel, Pagination etc. You'll definitely learn a lot from this project.

This project will be divided into two parts:

  1. Basic HTML,CSS and JavaScript.
  2. ReactJS

Make sure the code must be unique and valid otherwise it will not be accepted.

Guidelines

Please try to follow these guidelines:

  • Use only CSS/SCSS or Styled Components for styling the app, DON'T use bootstrap, material UI, semantic UI or any other styling library. (Haha! 😉 No shortcuts here 🤣)

  • Try to make the UI as elegant as possible, use Cards, box-shadows etc. Choose a subtle color-theme.

  • Prefer functional components over class components, use react hooks.

  • Unless absolutely necessary, don't use Redux for state management, try keeping things simple!

  • Only use images/content that are available for free and don't need any special license.

  • Last but not the least, use your imagination to build the coolest app you can think of ! 😻 🔥 🔥

How to Contribute

Note 1: If you've never made a pull request before, or participated in an open-source project, we recommend taking a look at this wonderful video tutorial. And if you want a more complete tutorial on using github, creating branches etc. , here's a detailed video series.Once you've got your feet wet, you're ready to come back and dive into Hacktoberfest fun!

Note 2: Super Important Only the pull requests created between October 1st, 2021 and October 31st, 2021 will be counted!

  1. Star this repository. 😛

  2. And then you have to fork (make a copy) of this repo to your Github account.

  3. Clone (download) your fork to your computer.

  4. Set your streams so you can sync your clone with the original repo (get the latest updates)

  5. Create a branch with your username.

  6. Make the changes in your branch. For eg. You're creating a navbar using ReactJS and your username is xyz so you've to follow the path /ReactJS/Navbar/xyz/[YOUR_REACT_FILE] and same goes with others.

  7. Commit and push the code to YOUR fork.

  8. Create a pull request to have the changes merged into the origin.