Responsive social links page - CSS Flexbox/Bootstrap/Hover-Focus State
Design comparison
Solution retrospective
What I’m Most Proud Of and What I’d Do Differently Next Time
-
I’m really proud of sticking with this project and not giving up, even when faced with new challenges. It felt great to see my persistence pay off and to realize that I’m starting to retain more from previous projects—there were a few things I didn’t need to look up this time!
-
Next time, I’d like to explore alternative methods and approaches to see if I can make my workflow even smoother. I’m also interested in experimenting with different design elements and seeing how they can enhance the overall project.
For future projects, I want to:
-
Improve Responsive Design: Keep refining my ability to create layouts that work well on all devices.
-
Advance in CSS: Focus on mastering CSS animations, transitions, and grid layouts for more dynamic designs.
-
Enhance JavaScript Integration: Get better at combining JavaScript with CSS and HTML to add interactive elements and improve user experience.
I’d appreciate any constructive criticism on how to improve my code, especially in making it more concise and well-structured.
Community feedback
- @luqmanx1998Posted 3 months ago
Hey there, I like your solution ! You have a good grasp on a lot of important CSS properties, and even using custom CSS variables, which is great. I'm also learning, but it's great to see someone else do their best ! Here's my feedback after looking at your code :
- Perhaps in the future it's best not to explicitly set your container's height, as it could affect your card layout, as seen when in desktop mode, your card content is stretched out. In your
.card
container you had setheight: 80vh
. Because your content did not fill up the entire height, combined with the property you had set.card-body { flex: 1 1 auto; }
caused your content to stretch out. If you remove both these properties the card collapses, and the layout looks more even !
That being said, your card looks great, and let's keep improving :D
Marked as helpful1 - Perhaps in the future it's best not to explicitly set your container's height, as it could affect your card layout, as seen when in desktop mode, your card content is stretched out. In your
- @rupali317Posted 3 months ago
Hello @anastDev. Kudos for completing the challenge. Please refer to my suggestions:
Does the solution include semantic HTML?
The code can be more semantic as follows:
- You should not use <h4> for the color coded phrase. Because the phrase is not a heading. <span> is enough. Headings are more appropriate if you are introducing a new concept (like how you see headings and subheadings used in a blog).
- Similarly, <h5> is not correct for the quote. You can use <q> tag instead.
- The button like structures are not a <p>. They are not paragraphs. They actually represent an element that will enable you to navigate to a different page. Therefore <a> tag is more appropriate.
Is it accessible, and what improvements could be made?
Once you make the above code changes, the accessibility of the site will improve. Currently, when I use TAB key to navigate your site, I was expecting to navigate the links as well (for which you currently have as <p>). Since you have them as <p> tag, I am unable to navigate those social links. Changing to
<a href="#">Github<a>
etc will help me navigate when I use TAB key on my keyboard. Keyboard users will appreciate that.Does the layout look good on a range of screen sizes?
- Large screens -> There is huge space around the quotes
- Mobile -> I tried in my mobile, I just noticed the right and the left edges of the card sticking to edges of the screen. The challenge requires some space between the edge of the right/left side of the card and the edges of the screen. I believe that is happening because of the width 50vh on the
.card
class. You should usemax-width
instead.
Is the code well-structured, readable, and reusable?
- In CSS, I would rename
.card-img-top
toprofile-pic
to improve the readability. - To improve reusability of the code, always define CSS variables. Please refer to the the CSS definition. Notice how the CSS variables are used throughout the CSS file. If we decide to alter a property value, instead of modifying it in various places, we can just alter the value from the CSS variables. The CSS variables are the ones defined inn between
:root{...}
Does the solution differ considerably from the design?
- In larger screen, the reason there is a lot of space around the quote is because of
.card-body
class havingflex:1 1 auto
. You should remove it. - Also remove the fixed height of 80vh from the
.card
class. You do not need it.
Another piece of advice: Your project should have a CSS reset otherwise different browsers will apply their own default stylings. We want a consistent look and feel in all the browsers. Refer to this CSS reset article
Let me know if the above suggestions help!
Marked as helpful1@anastDevPosted 3 months agoHi @rupali317,
Thanks so much for sharing the article for the CSS reset and also for sharing your code.
It really helped me understand why some things work the way they do. Your suggestions were super helpful, and I feel like my code is much better now! :)
1
Please log in to post a comment
Log in with GitHubJoin 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