Skip to content
OverviewSolutions
15
Comments
24
P
Ruben de Man
@developer-ruben

All comments

  • LarsAdams•30
    @LarsAdamsSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Very happy to have achieved a result very close to the design. No problem with HTML.

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

    Using flexboxes posed a number of problems for me.

    QRCODE with HTML and Flexbox

    1
    Ruben de Man•400
    @developer-rubenPosted 3 months ago

    Hi!

    Great component! Here's the solution to align the component to the center, at this to the main element: display: flex; justify-content: center; align-items: center; min-height: 100vh;. This creates a flexbox container and aligns the component center horizontally and vertically. Further I recommend to look at the BEM methodology to better organize your CSS classes.

    Best! Ruben

    1
  • Ruben de Man•400
    @developer-rubenPosted 3 months ago

    Hi there!

    Here are my tips and tops for this project:

    • Try making a habit of using custom properties, even though the project is quite small
    • Avoid px for font-sizes, this will overwrite the preferred setting of the user in the browser
    • Use BEM to better organize your classes and naming conventions, this avoids using general classes like .title for specific components
    • Add width and height attributes to the image to avoid weird scaling while loading the page
    • Maybe use the section element instead of div to mark the base of your component

    Hope it helps! Best, Ruben

    Marked as helpful
    0
  • Ruben de Man•400
    @developer-rubenPosted 3 months ago

    Hi!

    Here are my tips and tops on your component:

    • Great use of custom properties!
    • Try using methods like BEM to better organise your classes
    • Avoid pixels for font sizes, this makes that when a user adjust his/her browser settings to a larger font, this wont have effect on your component
    • use the 'section' html element for the base tag of your component, this improves accessibility and readability

    Cheers! Ruben

    0
  • Ruben de Man•400
    @developer-rubenPosted 4 months ago

    Hi!

    To improve the responsiveness, you have to remove the width:300px from the social links, this prevents scaling on smaller devices, and make the list element width:100% and add some margin to the profile card or padding to the body so it does not touch the edges of the window.

    Cheers! Ruben

    PS. try to avoid using pixels in general, instead use EMs (relative to the font-size of the parent) or REMs (relative to the root element (html element)

    Marked as helpful
    1
  • omwanzak•140
    @omwanzakSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    finishing the project

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

    the active hover toggle is not working the top profile pictures did not adjust well even on other screen sizes the small screen size media query width was not picking so they all floated on the left. I did not manage to overcome the above challenges

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

    the active hover toggle is not working the top profile pictures did not adjust well even on other screen sizes the small screen size media query width was not picking so they all floated on the left. any assistance would be appreciated

    meet landing page

    1
    Ruben de Man•400
    @developer-rubenPosted 6 months ago

    Hi!

    Here are my tips:

    • The hero images must be overflowing the body, one of the ways this can be done is by positioning the images absolute so it is removed from the regular flow
    • The colors of the steps are a bit darker than the design
    • Prevent using css in your html, better to keep it in a separate file
    • Try using semantic tags as main, article and section instead of just divs to make the page more accessible

    Best, Ruben

    0
  • Jamie Reed•120
    @jreed-11Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am very happy with getting to grips with flexbox and CSS grid. Also using the position reletive and absolute positiong and custom CSS properties

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

    positiong aspect but done some research on google to find a solution

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

    N?A

    CSS grid and flexbox, positioning

    1
    Ruben de Man•400
    @developer-rubenPosted 6 months ago

    Hi!

    Nice component, here are my tips:

    • Avoid classes like person__details__container, this is not correct according to the BEM methodology, just make it a separate block
    • You could replace the div element with class person__details__container with the header tag to make more use of semantic elements
    • Add height and widths to your images so the page doesn't move around when loading the images

    Best, Ruben

    0
  • alvarozama•360
    @alvarozamaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm pretty much just proud that I managed to complete the challenge since it was my first time usong CSS Grid on a mobile-first approach.

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

    Getting the number of columns and rows for my grid right was difficult as I'm not used to thinking in terms of such layouts, but a frew videos by Kevin Powell and Slaying The Dragon served as good refreshers on what I had previously learned.

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

    None that I can think of right now.

    Four Card Feature Section

    1
    Ruben de Man•400
    @developer-rubenPosted 6 months ago

    Hi!

    Nice implementation of Grid! Here are my tips:

    • Implement BEM in your HTML and CSS to better structure and organise your code
    • You could replace the div with class icon with a footer element to make the page more semantic

    Best, Ruben

    0
  • iliasminas•30
    @iliasminasSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    dcedvqe

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

    xc

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

    cadca

    Product preview card component

    2
    Ruben de Man•400
    @developer-rubenPosted 6 months ago

    Hi!

    Here are my tips:

    • Remove some of the whitespace
    • Adjust the font to the design
    • The button improves the accessibility of the component, but a bit too large for my taste ;)

    Best, Ruben

    0
  • Ruben de Man•400
    @developer-rubenPosted 6 months ago

    Hi!

    Here are my tips for your component:

    • Please separate HTML from CSS by putting the CSS in a separate file
    • Use rem or em instead of pixels, especially for font-sizes, since this overrides the user setting in the browser settings
    • Missing the correct font family (it's available in the assets folder)
    • avoid max with on the body, or center it when it's larger than 1400 pixels..
    • the component is missing the box-shadow, please add it so it stands out a bit better!

    Best, Ruben

    0
  • Anurag Elwyn Xess•40
    @Elwyn17Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    It was effortless to implement.

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

    To have the correct measurements was a challenge by looking up in Figma.

    I improvised based on my instinct and it helped.

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

    This was easy.

    QR code component

    2
    Ruben de Man•400
    @developer-rubenPosted 7 months ago

    Hi!

    Welcome to the community! Here are my tips:

    • Why did you use the <main> tag as the container for your component? This way you cannot implement it in other pages (since you can only have one main tag on a page). Try 'section' or 'article' instead, since this is an independent component
    • Try keeping HTML and CSS code separate, even though it's a small component
    • Search for the BEM methodology to better organise your code
    • It's good to add the width and height in the HTML to prevent the page from scaling while loading the image
    Marked as helpful
    0
  • soybrrraian•60
    @imbraianSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I'm especially proud of having been able to complete the challenge despite the difficulties I faced. However, in hindsight, I believe I have not yet given my 100%. I think I'm capable of doing things better. Next time, I will focus on doing even better than the previous time and so on consecutively to improve every day.

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

    I didn't see any other challenges. I didn't have time. But I will do all the ones that come my way.

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

    In this project, I would like to receive specific help in:

    Accessibility: I would like to make the project more accessible for people with disabilities, ensuring compliance with web accessibility standards. Code improvement: If there are areas in my code that could be improved in terms of clarity, efficiency, or maintainability, I would love to receive suggestions and guidance on that.

    Any help or advice in these areas would be greatly appreciated. Thank you in advance for your help and support!

    Blog Preview Card - BA

    1
    Ruben de Man•400
    @developer-rubenPosted 7 months ago

    Hi!

    Great component, here are my tips:

    • I would not use article in sections, articles are used to have a more independent role rather than sections. More info here: https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/
    • For timestamps you can use the <time> html tag. More info here: https://www.w3schools.com/tags/tag_time.asp#:~:text=The%20tag%20defines%20a,can%20produce%20smarter%20search%20results
    • card__container--img is an invalid BEM class since you used img as an modifier, to rather change it into card__img to keep the BEM method in place.
    • Try using css variables with for example colors, so you dont have to repeat them in your code

    That's pretty much it! Best, Ruben

    Marked as helpful
    0
  • Lucas Perez•30
    @perezLcsSubmitted 8 months ago
    What challenges did you encounter, and how did you overcome them?

    Spacing the markers in the lists. Used the tag span and then set the left position for the gap. Could've done better i think.

    Responsive recipe page

    1
    Ruben de Man•400
    @developer-rubenPosted 8 months ago

    Hi!

    Welcome to the frontend mentor community!

    Here are my foundings for you recipe page:

    • Use BEM to better organize your css, this prevents having selectors which are too much in depth.
    • The image doesn't have to be in a separate div container
    • Use the html table tag to create your tabel, creates a more accessible page
    • Nice use of variables :D
    • Good use of em instead of px for font sizes :D

    That's pretty much it, Take care!

    Ruben

    Marked as helpful
    0