This is a solution to the News homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
![Screenshot 2023-08-04 at 9 01 45 PM](https://private-user-images.githubusercontent.com/47851457/258557410-e2d6b1c4-a4eb-41dc-87c3-e8f431780e3a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNTk3MTMsIm5iZiI6MTcyNjE1OTQxMywicGF0aCI6Ii80Nzg1MTQ1Ny8yNTg1NTc0MTAtZTJkNmIxYzQtYTRlYi00MWRjLTg3YzMtZThmNDMxNzgwZTNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE2NDMzM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAzNjQ2NWY2NjY0MjFkYzUxMjRjYjJiNjYxYzA3ZTU3NjVlZjM4NDQwMTE0MzFlOTM5NGRlNTZlNGU3YTg3OGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RtY3O-MxH6B7ZnU61FSe8tkKwbiAnJIGU25mzil0wlU)
- Solution URL: (Webite Github Repo)
- Live Site URL: (Website Live Link)
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- JavaScript
-- To be completed
-- To be completed
- Example resource 1 - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
- Example resource 2 - This amazing article helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
- Website - David McLean
- Frontend Mentor - @davupls
- Twitter - @davutech
Thanks to Frontend Mentor for providing the design files, Mozilla developer doc, and OpenAi chatGPT.