This is a solution to the Sunnyside agency landing page 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 site depending on their device's screen size
- See hover states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
- Javascript
- Sass/scss
- BEM (naming)
Trial and error led me to my ultimate solution for this challenge, but the most crucial part is that I learnt a lot while developing it, especially about using a grid for layout then use Flex for one-dimensional layout. Note! This is my second challenge that focuses on a grid system (it's tough, but the grid helps 😂), My first grid challenges. This challenge is more difficult than my first one, but it is still useful if you want to gauge your understanding of basic layout principles. Therefore, I urge you to take up this Challenge.
Now, let's walk through this approach and how I end up with this solution
My initial strategy was to start with the div as a container for all content and then classify the div of each child as a container as well. I therefore have 10 divs that are under the container class.
<div class="container">
<div class="header"><div>
<div class="text"><div>
<div class="picture"><div>
<div class="picture"><div>
<div class="text"><div>
<div class="graphic"><div>
<div class="photography"><div>
<div class="testimonial"><div>
<div class="gallery"><div>
<div class="footer"><div>
<div>the second children div contain a text content and the second has an image inside of it
<div class="text">text content<div>
<div class="picture"><img src="" alt="" /><div>and so on. I added the grid to the parent (container) and started adding columns and rows to it to start the layout. However, after working on this layout (not the styles), I realized that I had forgotten to include the semantic elements, so I did.
<div class="container">
<header class="header"><header>
<section class="text"><section>
<div class="picture"><div>
<div class="picture"><div>
<section class="text"><section>
<section class="graphic"><section>
<section class="photography"><section>
<section class="testimonial"><section>
<div class="gallery"><div>
<footer class="footer"><div>
</div>Not bad, but how about to add and wrap all the section element and the non semantic element with the main element? so It looks like this
<div class="container">
<header class="header"><header>
<main>
<section class="text"><section>
<div class="picture"><div>
<div class="picture"><div>
<section class="text"><section>
<section class="graphic"><section>
<section class="photography"><section>
<section class="testimonial"><section>
<div class="gallery"><div>
</main>
<footer class="footer"><div>
</div>and then decided to make the body element as container and end up like this as final structure
<body class="container">
<header class="header"><header>
<main>
<section>
<div class="text"><div>
<div class="picture"><div>
<div class="picture"><div>
<div class="text"><section>
</section>
<section class="graphic">
<div><div>
<div><div>
<section>
<section class="testimonial">
<div></div>
<div></div>
<div></div>
<section>
<div class="gallery">
<div></div>
<div></div>
<div></div>
<div></div>
<div>
</main>
<footer class="footer"><body>
</body>Not related to the structure of html elements but, If you're just learning grid or want to practice a bit before taking on this task. It's best to prepare your layout before writing any code. 👋
- Clip path - good resources for clip path
- Highligth text - for highlight the text using html css
- Website - Add your name here
- Frontend Mentor - tan911