zer0VAns• 30
@zer0VAns
Submitted
For some reason it only works one time. I was looking for a solution but i didn't find it
P
Cassidy
@Darknessflowers
All comments
I'm not familiar with the way you retrieved it, but I was having the same issue when building mine and the problem was that Firefox was caching it. With mine when fetching I had to add {cache: "no-cache"} to my fetch. I'm not sure what the solution is with the method you used, but I think it is the same problem of Firefox auto-caching it since it does work if you view it in other browsers. I hope that helps point you in the right direction. It's a great attempt at the challenge!
Marked as helpful
1- PApplePieGiraffe• 30,545
@ApplePieGiraffe
Submitted
Hey, everybody!
This is my first challenge with JS, and it was fun! 😃
The JS was easy, but the CSS took me a little longer to code than I initially thought. 😅
Feedback on both the design and code is welcomed and appreciated! 😊
And as always, happy coding! 🎉
Amazing job at getting this pixel perfect to the design! It looks so slick.
1 - Christopher Till• 1,070
@chri55
Submitted
I used a bit more absolute position than I would've liked. Could I improve that somehow? Positioning all these elements was a bit frustrating without it. Thanks!
Looking really good! Only thing I would consider is adding some CSS transitions to ease how jarring switching can feel. I think the instances you've used absolute positioning make sense.
0 - André Serudo• 185
@andreserudo
Submitted
Notice that the borders are not as the model. I would love a suggestion of how to design as the model visual that was given. It was because I tried to make with display grid? Thanks for the attention.
This looks really good to me! Nice job. I didn't think about using grid that way when I did it.
0 - Marcos Albarran• 10
@Marcos1203
Submitted
They are free to comment, it is my first landing page and I would like to know your opinion
Nice job! A few things to look at fixing: on mobile the logo is stretched because of the exact widths it has been told to go to. For some reason the 'See how Fylo works' link isn't using the font. Menu colour is different from in the design. You've misspellted alt as atl multiple too, but that's an easy fix.
It's really good for your first landing page. I hope you do more!
0 - incodenito-mode• 20
@incodenito-mode
Submitted
what free learning would you recommend on https://www.frontendmentor.io/resources that I can study to improve my html and css skills? Thanks!
I see you've used display: flex for this solution but if you want to understand flexbox better I found Flexbox zombies excellent for learning Flexbox - I really appreciated the way it kept building on itself. It pitches itself as something to get you away from the cheatsheets and I did find that true. I'll still occasionally look stuff up but far less than I used to. Wes Bos's CSS Grid course was great for learning grid but I would probably finish getting the hang of flexbox first. Both are on that resources page. Freecodecamp is good too for getting an overview of everything. Good luck with what you do next!
1 - Nathan Ziarczyk• 90
@nathanziarczyk
Submitted
Im relatively new to front end development, so I have a lot to learn. If you see something in the file structure, workflow or something else in my code that needs improvement please let me know!
Hi, this looks good! A couple of things: the prices could be a little bigger, and the challenge requests for the toggle to work with keyboard as well as the mouse. I don't think it would take much altering to your current JS, just add an event listener that listens for keyup or keydown and then toggles based on the keys (I used arrow keys for my version). But your JS was a lot shorter and to the point than mine. Great work!
0 - Modu9173• 40
@Modu9173
Submitted
I had a hard time making the "Reliable efficient delivery" thin, i tried changing the font-weight but it still looked the same. I did some research but still couldn't find any answer. I would love your answer on this problem.
Also I don't know why there's a huge space below, around the footer section. I tried fixing it but can't find the right solution. Would also love your help on this problem.
And it seems like the pictures go out of the box once the window is minimized, how can I fix that?
I'm a total newbie at this so I have a lot to learn
Hi there. From what I can see it looks like you're only loading in one font-weight of the font. So even though you tell the CSS that you want a different font weight it isn't 'seeing' them. When you go to Google fonts and grab the font before getting the embed code go to the customise tab and select the font weights you require.
You're positioning everything relatively. If you took off the positioning you would see them all stacked on top of each other. When you position it relatively it still takes up its old space which is why the footer is so far down. Hopefully this gives you something to go off to try fix it. I haven't done this layout yet myself so I'm not sure how I would have done it, but I will probably attempt it with flexbox.
Your relative positioning is also why the boxes disappear on mobile. Because you have it set to be left by X amount of pixels once the screen is small that amount of pixels causes it to be hidden off screen. I recommend looking into media queries.
Great job, though! Good luck with your learning.
Marked as helpful
2
