I’m a junior front-end developer passionate about turning design ideas into clean, functional, and responsive web experiences. I love writing efficient, scalable code and am always eager to tackle real-world challenges.
I’m currently learning...I am currently learning JavaScript and React while continuing to sharpen my CSS skills even further.
I'll always take advice on improving especially around my CSS. I've used "rem" through most of this project. Is there a better way? And if so what is the benefit of doing it differently?
I can always use advice around CSS specifically. See anything that could be done better or something that doesn't adhere to "best practice?" Feel free to let me know.
Three Quick Areas:
I have two issues that I don't understand:
Why is there a scroll bar visible at the bottom of the page when looking at the desktop version of the site? I have set the width and height according to the specifications on the Figma design docs. I'm sure it's a mistake in my CSS but I don't know how to solve it.
Why is there so much space between my top section, which holds the "hero-image" at the top of the page, and the bottom section of the page? Again, I've set the height and width of the page according to the design docs but it still seems as though I can't get the spacing just right.
Because I struggled with making the site responsive I would appreciate anyone's feedback around my use of Semantic HTML Tags, Flexbox, and the way I wrote the CSS code to be responsive. Specifically:
Matching the design as closely as possible. Next time, I would plan my CSS variables better.
What challenges did you encounter, and how did you overcome them?Tweaking spacing, font sizes, and layout
What specific areas of your project would you like help with?Making the JavaScript cleaner and ensuring I used the most semantic HTML tags.
Your solution looks good overall. The only discrepancy is the height of your cards. I would check your height and media queries just to make sure your layout is breaking on the larger screen. Also your nav options are still displaying bullet points. Try "list-style-type: none" on your .timeframe-selector class in CSS and that should fix it for you.
Ability to validate form using javascript
What challenges did you encounter, and how did you overcome them?No new challenge
What specific areas of your project would you like help with?If any feedback to improve I will appreciate
Looks good! Nicely done!
Although this project doesn't have a ton of JS, I might suggest some notes in your JS just to make it easier to read.
I'm pretty happy with the transitions for the display of the share links, and with the general layout of the code. There's a few things I'd like to look at doing a little differently for better consistency (like the layout of the footer of the card when the links show up). Maybe something to look at in the future.
What challenges did you encounter, and how did you overcome them?Getting the image aligned right was a bit of a nightmare. I tried a bunch of things, most of which I don't remember, until I managed to get it looking right.
The pointy bit on the desktop view of the share links was new for me, but turned out to be pretty easy to implement.
What specific areas of your project would you like help with?Any feedback is appreciated. Thanks!
Really nice work on this site. I wish I could offer some helpful advice but I think I actually learned some things by looking at your code! Keep up the good work!
Implementing JS, still don't fully get it but managed to make it work.
What challenges did you encounter, and how did you overcome them?Getting JS to work. A lot of research and video watching.
What specific areas of your project would you like help with?2a. And any tips on getting better at JS. (still gonna keep practicing)
Thank you in advanced
Hi RohanIV,
I don't know how much help I can be as I am still learning myself. However, it looks like your live hosted site isn't linked correctly. I wanted to take a look but wasn't able to...if you want to double check that then perhaps I can take a look and see if I can offer any helpful feedback.
This is a simple project but it my first non-tutorial project since learning to code so I am proud of simply being able to complete it on my own.
What challenges did you encounter, and how did you overcome them?The main difficulties that I encountered were learning to get the appropriate information from the Figma file and getting the page to display properly on GitHub Pages (it was a file path issue).
What specific areas of your project would you like help with?Have I completed this challenge as intended? The design file in figma does not show any additional background but the "preview" file shows an additional background applied behind the grey box background.
Hi @Johann-Alpha, thanks for the feedback! Perhaps I'm just a bit confused as to the directions for the challenge. The description says this is a good challenge if you haven't learned about building responsive websites yet. So I admittedly was unclear as to what that meant since there was a mobile and desktop view. Can you help clarify for me? Thanks for the help!
