Leu3ery• 70
@Leu3ery
Submitted
SergioBrandaoF
@SergioBrandaoF
All comments
- SergioBrandaoF• 130
@SergioBrandaoF
Posted
You really nailed down matching the design provided. Well done.
0 - Sushi• 170
@SushiOnToast
Submitted
What 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
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.What specific areas of your project would you like help with?
Any help is welcome :)
SergioBrandaoF• 130@SergioBrandaoF
Posted
Looks really good. Congrats.
0 - Airat Galeev• 100
@MajorFreedom
Submitted
What 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
SergioBrandaoF• 130@SergioBrandaoF
Posted
The 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 - Prosper69• 40
@Prosper69
Submitted
SergioBrandaoF• 130@SergioBrandaoF
Posted
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 What 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.
SergioBrandaoF• 130@SergioBrandaoF
Posted
Not bad, but the dimensions of your solution site don't match the provided design.
0- rapadev1• 50
@rapadev1
Submitted
SergioBrandaoF• 130@SergioBrandaoF
Posted
Looks good.
0 - 2AWebDeveloper• 50
@2AWebDeveloper
Submitted
SergioBrandaoF• 130@SergioBrandaoF
Posted
I really like the README intro to your project you wrote, and how you manage to replicate the stipulated dimensions for the main blog post div almost exactly.
The only thing I would change is the file structure of your code: the standard for web projects such as these is to have a CSS subfolder inside the project's folder, wherein not only you store your assets, but also the relevant CSS files themselves.
Aside from that, everything seems great to me.
Marked as helpful
1 - tonydevpro• 10
@tonydevpro
Submitted
SergioBrandaoF• 130@SergioBrandaoF
Posted
Not really anything I'd change in here. I especially like how you set a CSS folder for both the stylings and the assets.
Marked as helpful
0
