Probably could have been more accurate with the spacing of different elements. I should have come up with a system that easier to update at different sizes.
What challenges did you encounter, and how did you overcome them?Spacing.
Your solution looks good and works over various screen sizes. I noticed you left the hero images fully inside the container, without going past it, so the photos look cut off as to the original design. I completed the same project and almost did the same as it was proving a pain to achieve but come across a way making the max width of the image greater than the container and then putting a minus left and right margin on them, which seemed to work... Unfortunately I still had some kind of an issue with the left image though when it came to the screenshot.
Though I prefer what you did not cutting the images off as it looks more complete to me...
There's a handy free chrome extension tool called PerfectPixel, it allows you to overlay the design files on your project and control the opacity so helps with getting the correct spacing etc. Well worth trying if you don't already know about it...
I like your project, I just completed this one myself. I used the The toggle() method within the function in JavaScript. I made the share bar appear and disappear each time it's clicked, check it out if you don't know about it as it might be useful to you on some projects...
Mobile first design...
Next time I would probably experiment and try grid areas.
Maybe I’d include more breakpoints in the media queries as it goes straight from mobile to desktop and back. I never thought much about changing the design for tablet size, although the mobile will show and work ok.
What challenges did you encounter, and how did you overcome them?I enjoyed getting to grips with grid and found it tricky on the as desktop layout at times but enjoyed the learning process.
What specific areas of your project would you like help with?Any feedback and suggested improvements always welcome, thanks...
Thanks for taking the time to check out my project/code. I get what you mean about too many sections, I'm still improving my semantic html knowledge. Thankfully it's better than it was when I started as I just used div's for everything!!! There's always more to learn on this path that's for sure. Thanks for your encouragement and feedback...
This time I started with the mobile-first approach, as it was advised. This was a bit unusual for me, but I thin I got it.
I used Pixelay extension in Figma again to compare the code with the provided design.
What challenges did you encounter, and how did you overcome them?When comparing my code with the design in Pixelay extension, I still couldn't get the font exactly the same.
Sometimes I had to go against the instructions from the design, to make it look exactly as it is on design (it's usually margins and padding).
What specific areas of your project would you like help with?I'd appreciate to hear others developers' practices in implementing fonts and following design instructions.
Your design looks close to the original, nice work...
I've noticed the design images don't always match the figma designs 100%, often spacing is different, or things are misaligned etc. Also there was one where the font had changed slightly on google fonts so the font didn't match the design exactly and threw things out . When all said and done I've realised not to worry about getting things 100% pixel perfect, close enough is good enough to build skills, which is ultimately what we are doing with these projects.
I did notice one thing that you could change on your project (if you wanted to try and keep to the original design) when it goes to mobile it keeps the border radius top left and bottom left on the image, on the mobile design the bottom left changes to top right so there's a radius on the top corners only. That said yours still looks good as it matches the desktop design by not changing...
..
What challenges did you encounter, and how did you overcome them?..
What specific areas of your project would you like help with?..
Looks very close to the original design...
I like the way it goes from desktop to smaller screen sizes on responsive mode instead of going from desktop to mobile design (and vice versa) at a certain breakpoint/s. It's a more flexible approach...
adjust better the screen size
What challenges did you encounter, and how did you overcome them?media query, I checked online and read how to do better.
What specific areas of your project would you like help with?all sizes of screen
Your design is larger than the original but a good representation style wise.
Something I've been using is a chrome extension called PerfectPixel, it helps for getting the sizing more accurate. It allows you to overlay the design files on top of your own design and change the opacity so you can size and line things up better to the original designs. It's well worth a try and it's free....
