https://github.com/olgaprikhodko/better-photos

A stylish homepage for a photography community. Developed with FLEXBOX, CSS GRID
https://github.com/olgaprikhodko/better-photos

Last synced: 1 day ago
JSON representation

A stylish homepage for a photography community. Developed with FLEXBOX, CSS GRID

• Host: GitHub
• URL: https://github.com/olgaprikhodko/better-photos
• Owner: OlgaPrikhodko
• Created: 2024-02-02T14:00:29.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-02-03T16:57:20.000Z (10 months ago)
• Last Synced: 2024-02-04T09:26:53.401Z (10 months ago)
• Language: HTML
• Size: 144 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Better Photos

Better Photos is a website made for photographers to show their photos and get comments and feedback on them. It's a study project from ByteGrad.com that shows how to use CSS well.

## Structure

- serching photos on site

- explore tranding photos and users profile

- Entice visitors to sign up

- ability immediately upload the file

- grid of photos (trending or presentation)

- educational 3 steps how to use website: upload photo -> get feedback -> improve skills

## The demo includes:

- **Implement Layout with Flexbox and CSS Grid**: Organizing the page layout using modern CSS techniques.

- **Block Element Modifier (BEM) Syntax**: Implementing BEM methodology for structured and scalable CSS.

- **Utility classes**: Using one particular type of styling accross multiple different blocks.

- **Custom CSS Reset**: Ensuring consistency across different browsers.

- **REM Font Sizing**: Using REM units for fonts to improve scalability and accessibility.

- **Controlled Animations and Effects**: Adding engaging and educational animations.

- **Media Queries**: Making the layout responsive to different screen sizes.

- **Use SASS preprocessor**: To utilise some features like reusable variables (for example for colors) and nesting styles.

- **Use simple build process**: Optimizing process that will add vendor prefixes for supporting some of the older browser versions and minifify the CSS file for production. 

- **Deployment**: Ready to be launched online [BeterMeApp](https://helga-better-photops-app.netlify.app/)