https://github.com/jacobgrisham/grid-layout-with-responsive-design

Home Rental Landing Page using Sass, a grid layout, and responsive design.
https://github.com/jacobgrisham/grid-layout-with-responsive-design

bem-css bem-methodology bem-naming css css-grid css3 grid-layout media-queries npm-scripts responsive responsive-web-design sass scss

Last synced: 2 months ago
JSON representation

Home Rental Landing Page using Sass, a grid layout, and responsive design.

• Host: GitHub
• URL: https://github.com/jacobgrisham/grid-layout-with-responsive-design
• Owner: JacobGrisham
• Created: 2020-09-16T00:47:39.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-11-19T00:48:56.000Z (over 5 years ago)
• Last Synced: 2025-06-16T01:44:04.674Z (about 1 year ago)
• Topics: bem-css, bem-methodology, bem-naming, css, css-grid, css3, grid-layout, media-queries, npm-scripts, responsive, responsive-web-design, sass, scss
• Language: HTML
• Homepage: https://jacobgrisham.github.io/Grid-Layout-with-Responsive-Design/
• Size: 64.1 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [Nexter: Grid Layout with Responsive Design](https://jacobgrisham.github.io/Grid-Layout-with-Responsive-Design/)

### Coding project from the Udemy Course [Advanced CSS and Sass: Flexbox, Grid, Animations, and more](https://www.udemy.com/course/advanced-css-and-sass/)

I wrote the code in the sass directory and package.json. The other files were provided by the instructor.

## App Demo

![AppDemo](img/appdemo.gif)

## Responsive Design

![ResponsiveDemo](img/respdemo.gif)

## 💡Lessons Learned

- grid layout

- media queries

- animations

- Sass mixins

- Sass variables

- BEM notation

- responsive images in HTML and CSS

- responsive design

- setting up build process with npm scripts

## 🚀 Getting Started

To run this project locally:

- In your terminal, navigate to the root folder and run the following commands

```

$ npm install

$ npm start

```

## 📣 Reference

- Section 9: Nexter Project - Master Grid Layouts of the Udemy Course [Advanced CSS and Sass: Flexbox, Grid, Animations, and more](https://www.udemy.com/course/advanced-css-and-sass/)