@Leu3erySubmitted 9 months ago
Latest solutions
Latest comments
- @SergioBrandaoFPosted 9 months ago
You really nailed down matching the design provided. Well done.
0 - @SushiOnToastSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Proud that I did this with minimal help :)
What challenges did you encounter, and how did you overcome them?I had a lot of stuggle trying to achieve the layout in the desktop preview. However, I was able to achieve it by using multiple flex containers and the
What specific areas of your project would you like help with?flex-basisproperty. I also spent ages trying to centre all the content onto the page until i discovered that you needed to have the parent flex container take up the entire page.Any help is welcome :)
- @MajorFreedomSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Now I mostly use ems and rems, but I think it's still complicated to me in the way that I dont know the actual size of element. Like for my eye I know how looks 24px but I can say the same about 2em because it's different if your base font-size not the same.
What challenges did you encounter, and how did you overcome them?I get confused at the begining, because in the last article there was grids. I though I should use grids to make this layout, but for me it's easier with flex-box and I did it with it.
What specific areas of your project would you like help with?Flex-boxes is my love
@SergioBrandaoFPosted 9 months agoThe most salient issue that I can detect with your code is that the file structure doesn't follow common best practices.
There should be a CSS folder that contains both the images (or assets) folder and your stylesheet.
Other than that I believe your design looks close enough to what was requested by the challenged.
0 - @Prosper69Submitted 9 months ago@SergioBrandaoFPosted 9 months ago
Your solution doesn't really match the proposed design for the page.
I cursorily read through your code and noticed you haven't used media queries. If you were not familiar with the concept up until now, I strongly recommend you go study up on it. Being in possession of media query techniques will change your life when it comes to building responsive web sites.
0 - P@AStombaughSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I think I got the design close, but my biggest personal goal was to have clean, simplified semantic HTML and CSS—as little as I could get away with to accomplish what I needed.
What challenges did you encounter, and how did you overcome them?Due to my choosing to add padding on the `` container, I had a hard time getting the header image to fill the width of the screen on mobile. My workaround for this was to use negative margins and calc width to force overflow, but I believe there is a cleaner solution to this. It works, it's just not pretty on the backend.
main img { width: calc(100% + 3rem); height: 10rem; object-fit: cover; border-radius: 0; margin: -1.5rem -1.5rem 0 -1.5rem; }Also, a minor problem: in the Instructions section, the 1 marker has a serif character instead of sans-serif like the design, even though I believe it's the same font. I even tried overriding the font just to be sure. I'm not sure if that's something I did wrong or if it's just a small error with the image file provided.
What specific areas of your project would you like help with?Ensuring correct HTML tags were used and if there's a suggestion on how to handle my issue with the header graphic better.
@SergioBrandaoFPosted 9 months agoNot bad, but the dimensions of your solution site don't match the provided design.
0 - @rapadev1Submitted 10 months ago
