Skip to content
OverviewSolutions
8
Comments
8
P
Gustavo Gutiérrez
@gustavo2023

All comments

  • Bogdan Kim•780
    @semperprimumSubmitted over 1 year ago

    I would greatly appreciate any feedback you may have!

    • Was deciding if i should use hero images as image elements or as background images. Decided to go with background images
    • Other difficult part was the blue overlay on the footer image. I made it by creating a stacking context and setting a bg image opacity to 0.1. Didn't take me too long, but I'm proud of how it turned out :)

    Responsive Meet Landing Page

    1
    Gustavo Gutiérrez•150
    @gustavo2023Posted 19 days ago

    Hi, your solution looks great!

    Here are a couple of suggestions:

    • The media queries for min-width: 60em can be combined to reduce redundancy.
    • Combine selectors with shared styles to reduce repetitions. For example, .btn--primary and .btn--secondary can share the transition: background-color 0.2s ease; property.

    These adjustments will help in making your CSS more maintainable and readable.

    Keep up the good work.

    Marked as helpful
    1
  • arnoldpam11•120
    @arnoldpam11Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    The thing I am most proud of is that I didn't surrender though it was hard for me at first because I was so confused and I felt overwhelmed in the Grid Layouts. However, there are a lot of resources that helped me finished this project. Next time I would do differently is to plan first before jumping into coding, and I will learned more the foundations of CSS Grid and it's layouts.

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

    The challenge I encountered on this project was positioning the grid card layouts accurately. However, I overcame this challenge with the help of YouTube and by searching for solutions on Google.

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

    When it comes to CSS Grid, my question is: is it more common to use the grid-template-areas property for positioning a layout, or to use grid-column and grid-row selectors? Or maybe it depends?

    Testimonials grid section

    1
    Gustavo Gutiérrez•150
    @gustavo2023Posted 26 days ago

    Hi! Good job on the challenge

    Here are a couple of suggestions:

    • Ensure all images have descriptive alt attributes. This will improve the accessibility of your site.
    • The quote image is not showing, so try to check on that.
    • I recommend using rem units for the media queries. This ensures that the layout adapts to the user’s chosen font size. This is important for users who have visual impairments and may have increased the font size in their browser settings.

    Keep it up!

    1
  • arnoldpam11•120
    @arnoldpam11Submitted 28 days ago
    What are you most proud of, and what would you do differently next time?

    It didn’t take me too long to finish this project.

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

    CSS Grid is hard but powerful

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

    I'm open for feedbacks on using grid CSS

    Four Card Feature Section

    1
    Gustavo Gutiérrez•150
    @gustavo2023Posted 27 days ago

    Hi! Congrats on completing this challenge. Here are a couple suggestions you could take a look at.

    • Ensure consistent indentation and spacing throughout the file for better readability.

    • Try to group related styles together and use comments to separate sections.

    • Avoid overly complex selectors and keep them as simple as possible. This CSS is using too many nested selectors. You should try to avoid this since it's better to keep CSS specificity as low as you can.

    This will help you when you work on larger and more complex projects as it will make maintenance easier.

    Keep up the good work!

    1
  • Gustavo Gutiérrez•150
    @gustavo2023Posted about 1 month ago

    Hi! Congratulations on completing this challenge

    Here are a couple of suggestions you could take:

    • Try to minimize the use of heavy selectors and consider using shorthand properties where applicable. Try to give a class directly to any element you want to style.
    • Ensure consistent indentation and formatting for better readability. This will help in maintainability and readability of your code, which in return will make it easier to work with and improve in the future.
    • You should use a modern CSS Reset at the start of the project. This will help in having a consistent base for styling. I have been using this one Modern CSS Reset.

    Keep up the good work!

    0
  • Gustavo Gutiérrez•150
    @gustavo2023Posted about 1 month ago

    Hi, great job in completing the challenge. I have a couple of suggestions you might want to take a look at.

    For the section headings you should change the font-family so it goes accordingly with the design images. Also, the color for the text in the list elements should be the same as the one you have in the description.

    Keep up the good work!

    0
  • Stephen•70
    @CodestephennSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    What am I most proud of?

    I'm proud of completing the Social Links Profile challenge, creating a visually appealing and accessible card component, and paying attention to detail.

    What would I do differently next time?

    Next time, I would focus on writing cleaner and more efficient CSS code, consider using a preprocessor or CSS framework, and test more thoroughly.

    Where do I need support?

    I need support improving my CSS skills, particularly writing more efficient code, and learning more about responsive design, CSS Grid, Flexbox, and accessibility.

    Frontend Mentor | Social Links Profile

    1
    Gustavo Gutiérrez•150
    @gustavo2023Posted 3 months ago

    Hi @Codestephenn, congratulations on completing this challenge. You have done a great job. I would like to suggest you to use rem units instead of pixel units. This is beneficial in terms of responsiveness, accessibility and maintainability. rem units provide a consistent sizing mechanism, since they are always relative to the root font size. Also, this ensures that all elements scale proportionally across different screen sizes.

    Hope you find this helpful

    Marked as helpful
    0
  • Gustavo Gutiérrez•150
    @gustavo2023Posted 3 months ago

    Congratulations on completing the challenge!

    Everything looks great and is very well done. Although I have a suggestion regarding the hover effect on the card. I looks nice but you could consider adding a transition for a smoother animation. For example:

    .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    I hope you find my suggestion useful

    Have a good day!

    Marked as helpful
    0
  • Gustavo Gutiérrez•150
    @gustavo2023Posted 3 months ago

    Hi, good job on completing the challenge. I really like the way you structured your index.html. I have a suggestion that you could consider if you find it appropriate: For the .card_title you could have used a different tag other tan <p> considering that it's a title and should be higher in hierarchy than the .card_desc. I hope you find it useful!

    0