Giter Club home page Giter Club logo

basic-components-of-a-web-layout's Introduction

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.

basic-components-of-a-web-layout's People

Contributors

200anjali avatar amit-k-umar avatar ankitkr437 avatar ayush-ambasta avatar coldmilkhottea avatar deepak-kr-26 avatar dipti821 avatar harshagrawal2412 avatar iamakhileshmishra avatar ishika414 avatar jumble-glitch avatar kazinizamul avatar nehansh10 avatar pixelcaliber avatar pragya7156 avatar priya-singh07 avatar rajoriaakash avatar sai-sri-nandan avatar sauravsinchow avatar shreya587 avatar shubhamhzb avatar subham5376 avatar suryansh012 avatar svredeveld avatar ugauniyal avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.