CSS Art Gallery ·

Run the project

Run the yarn install command in the terminal to download the dependencies.
Run the yarn start command to run the project in the development mode.

Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

Some rules and suggestions for making the CSS Art.

1. Please do not make any more logos.
2. Create your folder inside the /art folder.
3. The folder name should be as follows. YourName + ArtName
   For example, SalilNaikTeddy,
4. Give gradient or solid background colours to the .container class. Kindly do not keep the background white in colour.
5. To test your component, import your component to app.js. DO NOT FORGET to revert the changes made to App.js and art/index.js before you push. Since multiple contributors are going to contribute at the same time, almost every contributor will get merge conflicts. So, edit app.js and art/index.js file only for test purpose, DO NOT push the changes to GitHub.
6. Check out index.css for common CSS. DO NOT EDIT THIS FILE.
7. If you are coding an object inside the container, for example, a logo, a geometrical shape or an object, kindly make sure the total dimensions (width and height) do not exceed 150px. You may take up to 180px only when required.
8. Do not copy the code from elsewhere. If I find any code has been plagiarised from some other platform, I'll have to revert the PR and block you from making any further contributions.
9. Please create an issue and start working only after it is assigned to you. During live sessions, you may directly start working without having the issue assigned to you as it might not be feasible for me to assign issues to individuals. But it is important to create an issue so that others don't work on the same art as you are working on.
10. When you create a pull request, please specify the updates branch as all the contributor's changes are going to be merged in the updates branch and then to the main branch.

Folder Structure

frontend
├── art
│   ├── 1_template (this is the template)
│   │    ├── template.jsx
│   │    └── style.module.css
│   |
│   ├── SalilNaikTeddy
│   │    ├── SalilNaikTeddy.jsx
│   │    └── style.module.css
│   |
│   └── RajCar
│        ├── RajCar.jsx
│        └── style.module.css
│
└──  App.js

React Component Conventions

1. Strictly follow PascalCase naming convention for naming React Components.
2. Import CSS module file as style in all the pages and components. Example, import style from 'style.module.scss'
3. Do not edit or remove anything from the template provided. Only add the code where you are told to add.

Some learning resources

Learn about CSS Modules
CSS position properties explained
CSS Pseudo-Elements - Before and After Selectors Explained