https://github.com/bondok6/nexter
Pure CSS website to practice advanced CSS/SCSS (SASS) and delve deeper into Grid Layout.
https://github.com/bondok6/nexter
css3 grid-layout html5 npm sass scss
Last synced: about 2 months ago
JSON representation
Pure CSS website to practice advanced CSS/SCSS (SASS) and delve deeper into Grid Layout.
- Host: GitHub
- URL: https://github.com/bondok6/nexter
- Owner: Bondok6
- Created: 2022-10-08T11:24:52.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-10-09T19:33:20.000Z (over 2 years ago)
- Last Synced: 2025-02-05T17:17:29.252Z (3 months ago)
- Topics: css3, grid-layout, html5, npm, sass, scss
- Language: HTML
- Homepage: http://kyrillos.me/Nexter/
- Size: 8.42 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nexter
> ### Pure CSS website to practice advanced CSS/SCSS (SASS) and delve deeper into Grid Layout.
## Built With
- HTML - HTML5
- CSS - CSS3
- Sass - Scss
## Additional Used
- Google Fonts
- npm
## Live Demo
[Trillo Live Demo](https://bondok6.github.io/Nexter/)
## Objectives & What I learned
- How to build a complex and modern layout using advanced CSS Grid techniques?
- How to choose different row and column track sizes for different types of content?
- How and why to create grids inside of grids?
- How to create a responsive component without media queries?
- How to build a small component using CSS Grid?
- How to deal with overlapping grid items?
- Why images are special and behave differently than other grid items?
- How to decide if flexbox is a better tool in certain situations?
- How to build a rather complex component using a mix of CSS Grid properties, overlapping and flexbox?
- How to create a complex grid-looking gallery?
- Using object-fit together with images for grid items.
- How to manage vertical spacing in a responsive layout using CSS Grid techniques?
- How to use ::before and ::after as grid items?
## Getting Started
To get a local copy up and running follow these simple example steps.
```bash
git clone [email protected]:Bondok6/Nexter.git
```
```bash
cd Nexter
```
## Authors
👤 **Kyrillos Hany**
- GitHub: [@Bondok6](https://github.com/Bondok6)
- LinkedIn: [LinkedIn](https://linkedin.com/in/linkedinhandle)
## 🤝 Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
## Acknowledgments
- Inspired by Jonas Schmedtmann for his online course **Advanced CSS and SASS**