Design comparison
Solution retrospective
Finally, I placed the image with faces on the page similarly, as shown in the design.
What challenges did you encounter, and how did you overcome them?Challenges related to layouts, flexboxes, and grids. Difficulties in understanding the best names for blocks and elements.
What specific areas of your project would you like help with?Hi everyone β
Feedback on my website's layout and suggestions for improvement
I would appreciate your feedback on both its layout and the usage of HTML tags. I'm particularly interested in whether I've used the correct tags for structuring content and any suggestions for improving the layout.
What a better way to put the circle with number
How better to place the image with faces
I used a div block and css background-image for that, but I'm interested in knowing if there is a better way to place it on a webpage.
Here is a snippet of the code I'm using:
HTML:
CSS:
.image_faces {
background-image: url("./assets/tablet/image-hero.png");
width: 100%;
height: 200px;
background-size: 120%;
background-repeat: no-repeat;
background-position: top center;
}
Please help with naming blocks and elements in HTML.
Thanks a lot in advance:) Any feedback is important :)
Community feedback
- @amjadsh97Posted 4 months ago
very excellent work!!
*small notes:
1- I think you can use button element instead of this code. because button element is semantic. so it will be accessible.
<div class="button button-cyan" role="button"> <a href="#">Download <span>v1.3</span></a> </div> <button>Download <span>v1.3</span></button>2- when you add flex to element by default it take flex-direction:row, so there is no need to add it. .wrapper { display: flex; flex-direction: row;}
3- please add alternative text to img elements to make it more accessible element .
1@O-Julia-OPosted 4 months agoHello, thanks a lot for the information @amjadsh97 :) I will change it :)
1 - @ralphvirtucioPosted 4 months ago
Hi O-Julia-O,
Great job on completing this challenge!
Your approach to the hero images is impressive! I'm considering refactoring mine because I couldn't quite implement it to match the design π₯²π . I would suggest including the images in the HTML for accessibility since they are profiles of persons.
For semantic HTML, I would also recommend removing the section with the class footer from the main element and creating a separate footer element for it.
I noticed that your footer isn't exactly like the design. There are many ways to approach the footer styling. What I did was set the background color to match the design and then created a ::before pseudo-element for the background image.
I also observed that the active state of your buttons isn't working.
Lastly, I suggest including a README.md file in your repository. Itβs a great habit to have as it communicates important information about your project.
CODE UP π§βπ»βπ !*
1 - @Nico243Posted 3 months ago
Hey cool code. I'm running through this challenge now and I'm wondering. Why aren't people using grid for this one? What is your reason for using flexbox and no grid for the overall container?
Thanks in Advance!
0 - @solvmanPosted 4 months ago
Great job! π
I have a small suggestion about placing the hero image for you. It is not responsive as it sits right now. One way to do it is to have three images on the page, show the left and right images on the desktop design, with the center image hidden, and hide the left and right images for the smaller size and only show the center image. HTML layout for that might look something like this:
<section class="hero"> <img src="./assets/desktop/image-hero-left.png" alt class="hero__img-desktop" aria-hidden="true" /> <img src="./assets/tablet/image-hero.png" alt width="820" height="303" class="hero__img" aria-hidden="true" /> <div class="hero__content"> <h1 class="hero__title"> Group Chat<br /> for Everyone </h1> <p class="hero__text wrapper wrapper--sm"> Meet makes it easy to connect with others <span class="no-wrap">face-to-face</span> virtually and collaborate across any device. </p> <nav> <button class="button">Download <span>v1.3</span></button> <button class="button button--sm button--accent"> What is it? </button> </nav> </div> <img src="./assets/desktop/image-hero-right.png" alt class="hero__img-desktop" aria-hidden="true" /> </section>
You may utilize
display: none
,display: block
and media query to hide and show different images for various screen sizes:.hero__img-desktop { display: none; } .hero__img { width: 108%; height: auto; position: relative; left: -4%; } @media screen and (min-width: 968px) { .hero__img { display: none; } .hero__img-desktop { display: block; width: 33%; height: auto; position: relative; } .hero__img-desktop:first-child { left: -3%; } .hero__img-desktop:last-child { right: -3%; } }
I hope you find it useful! Great job otherwise! π
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord