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
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Position Relative, Absolute, Fixed
I learnt about grid system and for responsive version picture element tag is really useful for me to make a responsive image change.
<picture>
<source
media="(min-width : 1024px)"
srcset="./assets/images/image-web-3-desktop.jpg"
>
<img src="./assets/images/image-web-3-mobile.jpg" alt="" id="">
</picture>
@font-face {
font-family: "Inter, Regular";
src: url("../assets/fonts/static/Inter-Regular.ttf");
}
- resource 1 - This helped me for responsive reason. I really liked this pattern and will use it going forward.
- resource 2 - This website help me to know everything that I do not know
- Website - Yel Yan
- Frontend Mentor - @[email protected]
- Behance - @yourusername