https://github.com/codewithalamin/news-homepage

News homepage is an excellent opportunity to practice CSS Grid skills. There are lots of tricky decisions to make and plenty of learning opportunities!
https://github.com/codewithalamin/news-homepage

alamin-portfolio codepapa360 coding coding-challenges css front-end-development frontend frontend-mentor frontend-mentor-challenge html news-homepage portfolio programming programming-challenge webdesign webdeveloper webdevelopment

Last synced: 4 days ago
JSON representation

News homepage is an excellent opportunity to practice CSS Grid skills. There are lots of tricky decisions to make and plenty of learning opportunities!

• Host: GitHub
• URL: https://github.com/codewithalamin/news-homepage
• Owner: CodeWithAlamin
• Created: 2023-03-29T21:30:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-02T18:32:40.000Z (over 1 year ago)
• Last Synced: 2024-10-30T10:38:27.417Z (16 days ago)
• Topics: alamin-portfolio, codepapa360, coding, coding-challenges, css, front-end-development, frontend, frontend-mentor, frontend-mentor-challenge, html, news-homepage, portfolio, programming, programming-challenge, webdesign, webdeveloper, webdevelopment
• Language: HTML
• Homepage: https://news-homepage-alamin.netlify.app/
• Size: 3.52 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Frontend Mentor - News homepage solution



Check out the Live Site here.



This is a solution to the [News homepage challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/news-homepage-H6SWTa1MFl). News homepage is an excellent opportunity to practice CSS Grid skills. There are lots of tricky decisions to make and plenty of learning opportunities!

### Screenshot

#### Desktop view



#### Mobile view



### The challenge

Users should be able to:

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

- See hover and focus states for all interactive elements on the page

- **Bonus**: Toggle the mobile menu

- **Bonus**: Added Dark Mode feature.

### Links

- 🖱️[Solution URL](https://www.frontendmentor.io/solutions/responsive-news-homepage-design-with-sass-YOVVahRS6N)

- 🖱️[Live Site URL](https://news-homepage-alamin.netlify.app/)

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- Flexbox

- CSS Grid

- JavaScript

- Mobile-first workflow

### What I learned

During the process of building the News Homepage project, I gained a deeper understanding of CSS Grid and its capabilities. I learned how to create a flexible and responsive layout that adapts to different screen sizes and how to use grid-area and grid-template-areas to create a more semantic and readable HTML structure.

I also practiced my skills in using Sass and its features like variables and nesting, which helped me write more concise and maintainable stylesheets.

Finally, I gained some insights into good design practices for news websites, such as using contrast to create visual hierarchy, and choosing appropriate font sizes and line heights for easy readability. Overall, the project provided me with lots of learning opportunities and challenged me to make tricky design decisions, which I believe will be valuable for my future front-end development work.

## Author

👤 Alamin

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

- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)

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

- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)

Feel free to contact me with any questions or feedback!

## Acknowledgments

I would like to give a huge thanks to the Frontend Mentor team for creating such an amazing challenge. It was a great opportunity for me to practice my CSS Grid skills and learn new things.