Responsive Clipboard landing page using CSS Grid and Flexbox
Design comparison
Solution retrospective
This is my first landing page. What I would do differently next time is I would start with a plan and set up as this took longer to complete than I expected. For instance, implementing the footer section was particularly challenging as there were many ways to tackle it, and especially deciding on breakpoints and adjustments.
What challenges did you encounter, and how did you overcome them?Figuring out how to implement the hover color effect on the social links took some creative problem solving. Through this process, I learned about the filter property and used a filter generator to achieve the desired effect.
Structure and layout of the sections. Feedback is welcome 😄
Community feedback
- @R3ygoskiPosted 7 months ago
Hello again @stautuan, and congratulations on the project, it turned out wonderfully perfect, truly, my sincere congratulations.
A small observation: between 595px and 1120px, the titles in the "snippets" section end up aligning to the left, which is slightly awkward, but this is just a minor detail.
Regarding your code organization, it is very good, I would say almost impeccable. If you want to improve it even further, you could use Sass and distribute its sections into partial Sass files, so you can organize it better. The idea of using "utils" was very good, and a tip about "utils", in sass you can use mixins for this. Sass - Mixins
Your HTML organization is very good, the comments help to understand where we are in each section, which is great for maintenance, congratulations.
I just wanted to give you a tip related to your semantic HTML, it is very good, but there are some parts that can be improved, they are here:
- In the Hero section, your
<section class="hero-section text-center">can be changed to<header>, because it serves as an introductory section. - Below the Download section, your
<section class="footer">can be changed to<footer>, because it is the end of your content, so it is more appropriate to use it.
Again, congratulations on your project, it turned out very well, really, I really liked it as you could tell 😅. If you have any questions, you know where to ask.
Marked as helpful1@stautuanPosted 7 months ago@R3ygoski Hello Bernardo! 😄 Thank you for the feedback once again! I've implemented all your suggestions, except for the mixins. I'm not quite sure how to integrate them effectively along with concepts like "include" and "functions". 😅 They seem a bit intimidating to me at the moment, but I'm committed to learning more about them and incorporating them into my work. Perhaps, I'll tackle them in the next challenge haha. Thank you for sharing the link!
And I completely agree regarding the footer section, it's the correct semantic choice. I had the footer for attribution which led me to structure it this way. But, you're absolutely correct, it is more semantic this way.
I'm also a fan of dividing the sections into files as it's easier to maintain and organize the code. Oddly enough, I opted to keep everything in one file this time for no apparent reason haha 😂 So I wrote the comments instead to track and organize the sections. Once again, thank you for your feedback and suggestions. They're incredibly helpful in my development journey. 🙏
1 - In the Hero section, your
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord