Skip to content
OverviewSolutions
37
Comments
28
P

Ruben de Man

@developer-rubenThe Hague, Netherlands800 points

Full Stack Developer

Latest solutions

View more solutions

Latest comments

  • P
    Ruben de Man•800
    @developer-ruben

    Hi!

    Nice component well done! Nice use of semantic tags Here are my tips:

    • Take a look at BEM to better structure your classnames and CSS
    • Avoid using pixels, you can better use a relative unit like REM, EM or percentages
    • You can use custom properties (or CSS variables) to store repeating properties so you don't have to update them at all kinds of different places when you want to change a repeating value

    That's it for now! Cheers, Ruben

    Marked as helpful
  • P
    Ruben de Man•800
    @developer-ruben

    Hi!

    Nice first component, here are my tips:

    • Use semantic HTML, which improves accessibility and makes your code more readable. For example main-card div can be replaced with a article tag and add a main tag to improve accessibility as well
    • Don't use h4 because it has a smaller font size, it should be H2 because its a first heading besides the regular H1 on a page
    • Take a look at BEM to use for class names, makes your code more readable as well

    That's it for now! Best and happy new year, Ruben

    Marked as helpful
  • Akrem Muktar•170
    @Alfeyn
    What are you most proud of, and what would you do differently next time?

    I'm proud of the focus and hover over the social link part.

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

    There is nothing for now.

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

    My code documentation and reusability.

    Social links profile using HTML and CSS

    #pure-css
    1
    P
    Ruben de Man•800
    @developer-ruben

    Hi!

    Nice, component well done! Here are my tips:

    • Avoid using px for font sizes since it can override the font size browser setting of the user
    • Good use of classes, but avoid combining using classes and element selectors, just stick to classes. You can also improve the accessibility and readability of the code using a methodology like BEM.

    That's it for now! Best, Ruben

    Marked as helpful
  • P
    Ruben de Man•800
    @developer-ruben

    Hi!

    Welcome to Front-end Mentor and thank you for your submission of this challenge. Here are my tips:

    • Use classes to style your css, they provide flexibility, reusability, and maintainability for styling web elements
    • Don't forget to use the proper font family. You can import the font via Google Fonts in your CSS file or in the HEAD section of the HTML file
    • Better not use px as a unit in CSS, as this overrides the setting of the user in the browser. Better to use relative units like EM or REM.
    • Create custom properties (or variables) in your CSS, this improves the reusability and maintainability of your code because you don't need to retype or remember the code of colors. Also if you want to change a color, you only have to that via the custom property.

    Best and hopefully these tips help you to write even better code!

    Ruben

  • LarsAdams•30
    @LarsAdams
    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
    P
    Ruben de Man•800
    @developer-ruben

    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

  • P
    Ruben de Man•800
    @developer-ruben

    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
View more comments