https://github.com/jomagene/meet-landing-page

Responsive Meet landing page built with semantic HTML, Sass, and Flexbox and media querry
https://github.com/jomagene/meet-landing-page

flexbox media-queries sass semantic

Last synced: 3 days ago
JSON representation

Responsive Meet landing page built with semantic HTML, Sass, and Flexbox and media querry

• Host: GitHub
• URL: https://github.com/jomagene/meet-landing-page
• Owner: Jomagene
• License: mit
• Created: 2024-08-16T03:35:20.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-08-21T21:17:11.000Z (3 months ago)
• Last Synced: 2024-08-21T23:21:21.598Z (3 months ago)
• Topics: flexbox, media-queries, sass, semantic
• Language: SCSS
• Homepage: https://jomagene.github.io/meet-landing-page/
• Size: 3.88 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Frontend Mentor - Meet landing page solution

This is a solution to the [Meet landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/meet-landing-page-rbTDS6OUR). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

  - [Useful resources](#useful-resources)

- [Author](#author)

- [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

- View the optimal layout depending on their device's screen size

- See hover states for interactive elements

### Screenshot

![](./screenshot.jpg)

### Links

- Solution URL: [My solution here](https://www.frontendmentor.io/solutions/meet-landing-page-using-sassscss-flexbox-and-media-queries-xdq8mZXkJW)

- Live Site URL: [Live site](https://jomagene.github.io/meet-landing-page/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- Mobile-first workflow

- Sass/SCSS

### What I learned

In this project, I reinforced my skills in responsive design by using a mobile-first approach. Sass/SCSS allowed me to write more maintainable and reusable CSS. I also practiced using Flexbox for layout management, which provided flexibility across different screen sizes.

### Continued development

Moving forward, I plan to explore CSS Grid for more complex layouts. Additionally, I would like to refine my use of Sass by incorporating mixins to further improve code efficiency and reusability.

### Useful resources

- [MDN Web Docs - Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - This was helpful for understanding Flexbox properties and ensuring the layout is responsive.

- [Sass Documentation](https://sass-lang.com/documentation) - Provided insights into leveraging Sass for better CSS organization.

## Author

- Frontend Mentor - [@Jomagene](https://www.frontendmentor.io/profile/Jomagene)

- Twitter - [@Jomagene](https://www.twitter.com/Jomagene)

## Acknowledgments

I would like to thank the Frontend Mentor community for their feedback and encouragement. The challenge pushed me to enhance my skills in responsive design and Sass/SCSS.