Desktop if I give the body 100vh. the layout renders nearly perfect. here. however viewing this on a lap top the header is missing? (which viewing 1440px should be fine) but its dragged above the screen?
What other approach should I do here?
Well, it's not too far off from the design provided. Probably should have added another breakpoint, but it gets the job done. As a first attempt at mobile-first purely with code, it's fine.
What challenges did you encounter, and how did you overcome them?Tried to implement as many different new elements as I could. The stuff didn't give too much trouble, but typography was a real headache. Started with clamp(), but it messed with everything (content size, containers etc), so I just used "manual" measurements and @media. Not happy with that, it means I don't fully grasp how responsive text functions. Will try again in the next one.
What specific areas of your project would you like help with?Honestly, any tips for responsive typography and rem-based containers will be really appreciated. Maybe, I should have had a clamp() with my min and max font sizes, but I still struggle a bit to visualize how calc() works.
Solving this with the style guide. It was indeed helpful
What challenges did you encounter, and how did you overcome them?the container and i was able to overcome it by setting the margin-inine to auto
What specific areas of your project would you like help with?all areas
Great attempt. I think Checking the correct image/font size's (and fonts) and this could be perfect.
Good work. A different way I would approach this would be using flex box to center the div.
Any feedback please?
I really struggle to get this spot on in regards to margin/s and paddings. I even did it with Pixes, for example the the image div has 40px margin but the headline still isn't inline
Can Someone explain to me how this is well off pixel perfect? I have gone through the figma file and have done all padding the same ( I think)
But the design/solution shows its well off! Also the gap between the text and the boxes at the bottom "10k, 314 12m" On figma the gap is a lot bigger than the "solution" here. I have checked this on 1440px screen, It looks perfect to me, then I Submit it nd its well off? Am I doing something wrong?
it was me :)
All sorted. Just needed an increase in fonts
Please could someone advise best practice for submitting the form and obtaining the value. I was able to get the email value and add this to the text, however I couldnt add the error message. putting required on input and onsubmit, my js didn;t work.
Any other advise/tips please let me know.
Thank you for your help
Follow me on Twitter as I am about to start the 100 Days of code https://twitter.com/leecockcroft20
I found I got myself in some unexpected problems. Ideally I wanted to have all the filter options on top of the page once selected, and removing the tab the filter would refresh. How would I do that? You can click on the tab and they all work accordingly.
Should I have approached this a different way? As this was practice there may be some ambiguous variables eg let x = .....! The only way I will get better is if someone could look at my code and advise me, what am I doing wrong? where should i approve? All advice would be appreciated.
Thanks
Hi Roman, Thank you for your feedback.
Yes I checked your code, I had a few issues using the svg as an "img" so I just embed it and swaped via JS, which obviuously didn't make it responsive.
"As for js part - you should probably insert all the content into html, and only in js aplly filter functionality. "
Usually I do, the only reason I did it this way was due to all the information being in an object, I thought it would be easier running a script (so I'n not repeating myself)
Future projects is it wise to separate, HTML,CSS,JS as much as possible? even if it takes longer?
Also, if I did separate them all, would it have been a very simple, event handler, and using my switch statement to get grab the relevent data tags?
I used this approach as I tried to use the same mentality as using React.
Many thanks for your feed much, it's much appreciated Lee
