Skip to content
OverviewSolutions
3
Comments
18
HassanArafa-dev
@HassanArafa-dev

All comments

  • Peepytoo•110
    @Peepytoo
    What are you most proud of, and what would you do differently next time?

    I focused heavily on making the site accessible and using proper semantic HTML5 markup, which I think I have achieved to a greater effect than my previous project.

    What challenges did you encounter, and how did you overcome them?

    the main challenge was making the site more accessible, and I used tips from feedback on my previous project.

    What specific areas of your project would you like help with?

    the footer element - I tried to always make it stay at the bottom of the page, but when the viewport is made shorter, it just overlaps on top of the main container (I used position: absolute; bottom: 0px; in the original code). Is there a way to make it stay at the bottom of the viewport, but also always make it stay under the container (not overlap on top?). I'd also appreciate any feedback on the accessibility of my code, as well as on my use of semantic HTML5 markup.

    Social Links Profile using basic pseudo classes

    2
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi @Peepytoo i hope you're doing well, the reason your footer is overlapping or isn't at the bottom of page it's because the flex on body element, you got justify and alignment center that will make everything on page be at the center, here's a quick fix:

    • Remove jusify-content and align-items from body element.
    • Create a .container and add .mainbox inside of it.
    • add display: flex; || align-items: center; || justify-content: center; || flex: 1; to .container
    • Remove position: relative; || top: 12vh; from .attribution
    • add margin: 0; to body element.

    one more thing, please don't use fixed width and height for buttons or the whole container it's not a good idea to do that, instead use padding to space buttons and the whole container.

    Keep up the good work proud of you 👏, and if you need further help feel free to reply to my comment.

    if you find my comment helpful Please click the button "Mark as helpful" Thanks.

    Marked as helpful
  • Blessing Akanimoh James•250
    @Jahsbaby
    What specific areas of your project would you like help with?

    I believe every developer all had issues with understanding grids right? please I need tips and how to confidently deal with it

    Bento-grid

    2
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi @Jahsbaby i hope you're doing well, i know this one is kinda tricky i think most people had hard time doing this one including myself, you did 3 columns and row which is wrong it should be 4 columns and rows and here's a picture to explain why.

    • https://ibb.co/J855Y9c

    Plus you don't need to have something like this (grid-template-columns: 1fr 1fr 1fr) or (grid-template-rows: 1rem 1rem 1rem)... DELETE all of that and just add the following:

    • grid-auto-columns: 1fr;
    • grid-auto-rows: auto;

    grid-auto-columns: 1fr; -- will just make every card in the container to be 1fr.

    grid-auto-row: auto; -- will make sure every row to be the exact size of it's content. (That's the default behavior you can choose not to add grid-auto-row in your code if you want).

    here's my solution for this challenge if you wanna understand better and need to look at html or css code:

    • https://github.com/HassanArafa-dev/Front-end-mentor-challenges/tree/main/bento-grid-main

    one more thing, i notice you're grouping 2 cards in one container! that's not a good idea just have 8 cards each card on it's own and use grid-template-area to overlap grid items

    and if it's hard for you to understand watch Kevin's video on youtube building this exact same design:

    • https://www.youtube.com/watch?v=h4dHvo09cG4

    Please if you found my comment helpful click the button "Mark as helpful", and if you need further help reply to my comment 🥰

    Keep up the good work proud of you 👏

    Marked as helpful
  • Douglas•40
    @code-douglas
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I managed to implement all the core features of the project within the planned timeline. It was a great opportunity to apply what I’ve been learning and see everything come together in a real application. If I were to do it again, I would spend more time planning the project structure and setting up reusable components to make the development process smoother and more scalable.

    What challenges did you encounter, and how did you overcome them?

    One of the challenges I encountered was properly styling the social media links to ensure they were responsive and visually aligned with the design. The layout was tricky, especially when dealing with different screen sizes, as I wanted the icons to be consistent across all devices. I overcame this by using Flexbox to create a flexible layout that could easily adapt to different screen sizes. I also used media queries to adjust the alignment and spacing on smaller screens, ensuring the social media links maintained a clean and organized appearance across all devices.

    What specific areas of your project would you like help with?

    I would appreciate feedback on the responsiveness of the social media links layout. Specifically, I’m looking for advice on how to handle edge cases where the screen size is extremely small or large, and whether there are better practices to optimize the use of Flexbox in this situation. Additionally, if anyone has suggestions on improving the accessibility of the links (like adding appropriate ARIA labels or making sure they are keyboard-navigable), I would love to hear those as well.

    Responsive CSS social link profile.

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi i hope you're doing well!, here's some things i noticed that is not good practice in most cases.

    • having width & height on container or a button.
    • the avatar/image doesn't need it's own container it could be with rest of the info name..etc. (not a big deal but it's better html structure).
    • there's a flex-wrap and gap on .info-container that's not doing anything because it's not a flex container (just remove them).
    • also use paddings to space things (try padding: 1rem 6rem; on .links-container a -- and play with it using @media instead of width or height) & (try padding: 1.5rem; on .container after removing width and height).
    • try playing with font-sizes on buttons using @media but make sure you're using "rem" unit so you don't override a user font size preference on their own browser (don't worry about that right now if you're a beginner but it's a good idea just to search or read about it a little bit). Other than that you did great keep up the good work 💪🏻.

    Please if you found that helpful click the button "Mark as helpful"

  • Emmalcd•30
    @Emmalcd
    What are you most proud of, and what would you do differently next time?

    I'm proud of the way I addressed the responsiveness aspect, because I did it in previous challenges, but not consciously.

    What challenges did you encounter, and how did you overcome them?

    I was trying to make the card responsive, but I had no idea that I needed to put a clear width on the parent tag to put a responsive width on the child element.

    What specific areas of your project would you like help with?

    At the moment, I don't think I have any questions, but if anyone has any suggestions, I'd be happy to hear them.

    Social links profile responsive

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi i hope you're doing great, you did great on the challenge but here's a tip for better links visuals when hovered just add the following to .nav a

    • transition: 0.3s ease;. -- PS: Keep up the good work 💪🏻
    Marked as helpful
  • Utkarsh9571•640
    @Utkarsh9571
    What are you most proud of, and what would you do differently next time?

    This i was able to made 90% on my own, by learning the previous projects.

    What challenges did you encounter, and how did you overcome them?

    i was struggling to made the background change when hover effect applies. but i got it eventually.

    What specific areas of your project would you like help with?

    i got solution from community and i corrected my mistake. don't know why i can't get that card in center, it just don't move in center vertically, it moves horizontally, so i needed help with that.

    Social links profile main

    2
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi great job on your work 👌🏻, it is actually centered vertically and horizontally but the reason you don't see it is because body element is not taking 100% height of page!, a simple min-height: 100vh; on body element will fix the issue. if you need further help please reply to my comment!, good luck on your next projects 🫡

    Marked as helpful
  • usman frontend 360•160
    @Tech-Badhead
    What are you most proud of, and what would you do differently next time?

    I loved how i tackle the challenge heads on!

    What challenges did you encounter, and how did you overcome them?

    When i was trying to center the container horizontal and vertical, i was using the the flexbox property but it was not just giving me what i want, however i overcome it with the "display:block" property!

    What specific areas of your project would you like help with?

    When i hover on the social-links link, the hover state moves the whole element and which i guess is not right

    Responsive SocialLink Profile

    2
    HassanArafa-dev•250
    @HassanArafa-dev

    plus please remove margin and max-width and padding from .container-bg and add min-height: 100vh.

    • and if you need further help please reply to my comment.
    Marked as helpful
  • usman frontend 360•160
    @Tech-Badhead
    What are you most proud of, and what would you do differently next time?

    I loved how i tackle the challenge heads on!

    What challenges did you encounter, and how did you overcome them?

    When i was trying to center the container horizontal and vertical, i was using the the flexbox property but it was not just giving me what i want, however i overcome it with the "display:block" property!

    What specific areas of your project would you like help with?

    When i hover on the social-links link, the hover state moves the whole element and which i guess is not right

    Responsive SocialLink Profile

    2
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi Usman!, i hope you're doing well.

    • it moves the whole element because you have a 1px border on the element so when you hover it the 1px is being added on the element size, to fix this remove the border on hover and add hsl(75, 94%, 57%) to background instead that should fix it. i wish you the best Usman! keep going you're doing great!
    Marked as helpful
  • Davi Samuel Schneider•30
    @davvisamuel
    What challenges did you encounter, and how did you overcome them?

    In the comparison image, the social media links appear slightly larger than the paragraph above. I’m not sure how to fix this without setting a fixed size.

    What specific areas of your project would you like help with?

    I really need help with something — I want to know if I can set fixed sizes on elements, and when I should or can do that.

    Responsive landing page using flexbox.

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi, i hope you're doing well, you did a great job on the challenge.

    for your 1st question just increase the font-weight on links.

    for the 2nd question, avoiding fixed px sizes in general is good practice use paddings and margins to play with elements sizes and space things.

    • here's an example why using fixed sizes or px is bad practice, let's say we want everything in out page to be 24px..if we simply put on body selector font-size: 24px , that will prevent users to change their default font-size on their own browser, so what should we do in this case? we should have on html selector font-size: 100%. and for the body we will convert 24 from px unit to rem unit 24 / 16 = 1.5rem , and i divided on 16 because on most browsers default font-size is 16px...that's just an example don't give it too much attention right now if you're still a beginner, but it's worth it to have it in mind and look more into it later on.
    Marked as helpful
  • yogitrap•90
    @yogitrap
    What specific areas of your project would you like help with?

    any advices?

    CSS grid + flex

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    • Hi, i hope you're doing great.

    • here's kevin's video building that exact same design using grid, please watch it you'll learn alot by following his code

    • https://www.youtube.com/watch?v=rg7Fvvl3taU

    Marked as helpful
  • beqqi•90
    @beqqi
    What challenges did you encounter, and how did you overcome them?

    I still didn't grasp the whole grid; I will keep working

    What specific areas of your project would you like help with?

    I had difficulty with making the paragraphs underneath the image

    testimonials page using CSS Grid

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi, i hope you're doing well, i suggest you watch kevin's video on grid building this exact same design, you'll learn alot i promise :)

    https://www.youtube.com/watch?v=rg7Fvvl3taU&t=454s

  • melanielogan74•140
    @melanielogan74
    What specific areas of your project would you like help with?

    Any recommendations on how to get the paragraph text to fill the cards, would be greatly appreciated.

    Testimonials Grid Section

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi, Great job on the design!, i noticed you're using grid-area method without really telling how the grid should manage it self regarding the size of columns, just add grid-auto-columns: 1fr; to your .container it will fix every card to be 1fr, if you wanna learn more about grid watch kevin's video on youtube building this exact page.

    https://www.youtube.com/watch?v=rg7Fvvl3taU&t=453s

    • also as per page styel-guide font-size on everything should be 13px
    Marked as helpful
  • Lawrence Webber•160
    @lwebbz
    What challenges did you encounter, and how did you overcome them?

    Couldn't get the spacing between the elements in the Kira card correct. Used css grid but for some reason the implicit cells were the wrong size.

    Testimonials Grid

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi, after looking at your code i noticed multiple things that made your layout look weird.

    • margin: 0; in * remove it.
    • Using template rows in .grid-container is unnecessary (remove it) it's making the design look weird.
    • there's too much padding on every card, maybe use 1rem or 16px, also as per style-guide file in the design files the whole body should be 13px every text is 13px.
    • please watch kevin's video on youtube building this exact design and you'll understand grid alot better.

    https://www.youtube.com/watch?v=rg7Fvvl3taU&t=448s

  • DoomCrusher•120
    @VADER900000
    What are you most proud of, and what would you do differently next time?

    my css grid use

    What challenges did you encounter, and how did you overcome them?

    the little quotation mark detail wouldnt go behind the text then someone suggested i put it as a background image that doesnt repeat and use background position to change where it is

    What specific areas of your project would you like help with?

    any suggestions regarding improving would be nice

    Testimonial Grid Section

    3
    HassanArafa-dev•250
    @HassanArafa-dev
    • and to have the quote sign behind text use z-index: -1; on and quote mark itself, and z-index: 1; on the parent of text
  • Michael-Alans•410
    @Michael-Alans
    What challenges did you encounter, and how did you overcome them?

    Using Grid to create the whole layout was challenging, but I completed the project by adopting the use of flex.

    What specific areas of your project would you like help with?

    I need feedback on how to use grid to do create the whole layout because I know its possible.

    Testimonial-grid-page

    1
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi, please watch kevins building this page and you'll understand how the layout should be.

    • https://www.youtube.com/watch?v=rg7Fvvl3taU&t=443s
  • Obiwumma•170
    @Obiwumma
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that I learned how to use Grid

    What challenges did you encounter, and how did you overcome them?

    It was challenging when I tried to use grid to arrange the 5th card by the side(desktop view). While trying to sleep, an idea popped up. To separate the the first for cards from the fifth card, make their container display flex then display the first 4 in Grid.

    What specific areas of your project would you like help with?

    Any advice for how i can improve with Grid?

    Responsive page using CSS grid as well as flexbox

    3
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi i hope you're doing well, please go ahead and watch Kevin's video about grid, he'll be building that exact same page, you'll learn alot about grid and do so much better if you try and build that page again without using flex.

    https://www.youtube.com/watch?v=rg7Fvvl3taU&t=442s

    Marked as helpful
  • DoomCrusher•120
    @VADER900000
    What are you most proud of, and what would you do differently next time?

    my css grid use

    What challenges did you encounter, and how did you overcome them?

    the little quotation mark detail wouldnt go behind the text then someone suggested i put it as a background image that doesnt repeat and use background position to change where it is

    What specific areas of your project would you like help with?

    any suggestions regarding improving would be nice

    Testimonial Grid Section

    3
    HassanArafa-dev•250
    @HassanArafa-dev

    Hi i hope you're doing well, i salute you for your effort, i suggest you watch Kevin's video building that exact same page you'll learn alot about grid and you'll do so much better next time you use grid i promise :)

    https://www.youtube.com/watch?v=rg7Fvvl3taU&t=442s

  • Mohamed Ghazali•20
    @Ghazali-Sufi
    What are you most proud of, and what would you do differently next time?

    I'm proud of that I have learned how to effectively use a grid system to organize content on a webpage, ensuring that each section, like testimonials, is neatly placed according to a defined area. I've also mastered incorporating media queries to ensure the layout adapts to different screen sizes, making the website responsive. This project has significantly improved my skills in web design and CSS.

    What challenges did you encounter, and how did you overcome them?

    I encountered challenges with setting up the grid template in the project. To solve this, I did a lot of research online and read articles to understand better how the grid system works. After trying different examples and practicing, I finally understood how to use the grid correctly and was able to set it up the way I needed. This experience taught me to keep trying and learning new things, even when they seem difficult at first.

    Testimonials grid section

    #sass/scss#web-components#gulp
    2
    HassanArafa-dev•250
    @HassanArafa-dev

    • and for the font size, as per challenge style-guide file the whole body element should be 13px so put font-size: 13px; in body element.

    • also you should never put a fixed font size on any project you build because some users have specific font size preferences that they like to change in their own browser but don't worry about that right now, here's a reference to what i'm talking about.

    https://fedmentor.dev/posts/font-size-px/#:~:text=If%20you've%20used%20pixels,the%20user's%20text%20size%20preferences!&text=The%20good%20news%20is%2C%20if,they%20make%20in%20their%20settings.

  • Mohamed Ghazali•20
    @Ghazali-Sufi
    What are you most proud of, and what would you do differently next time?

    I'm proud of that I have learned how to effectively use a grid system to organize content on a webpage, ensuring that each section, like testimonials, is neatly placed according to a defined area. I've also mastered incorporating media queries to ensure the layout adapts to different screen sizes, making the website responsive. This project has significantly improved my skills in web design and CSS.

    What challenges did you encounter, and how did you overcome them?

    I encountered challenges with setting up the grid template in the project. To solve this, I did a lot of research online and read articles to understand better how the grid system works. After trying different examples and practicing, I finally understood how to use the grid correctly and was able to set it up the way I needed. This experience taught me to keep trying and learning new things, even when they seem difficult at first.

    Testimonials grid section

    #sass/scss#web-components#gulp
    2
    HassanArafa-dev•250
    @HassanArafa-dev

    • for the extra space, just add grid-auto-columns: 1fr; to your .container

    • look up grid-auto-columns / grid-auto-rows or just watch Kevin's video building this exact page and you'll understand what it does. (https://www.youtube.com/watch?v=rg7Fvvl3taU&t=439s)

    Marked as helpful