Skip to content
OverviewSolutions
19
Comments
26
P
Ruben de Man
@developer-ruben

All comments

  • Akrem Muktar•30
    @AlfeynSubmitted 2 days ago
    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

    1
    Ruben de Man•460
    @developer-rubenPosted 2 days ago

    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
    1
  • Ruben de Man•460
    @developer-rubenPosted 3 days ago

    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

    0
  • LarsAdams•30
    @LarsAdamsSubmitted 4 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•460
    @developer-rubenPosted 4 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•460
    @developer-rubenPosted 4 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•460
    @developer-rubenPosted 4 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•460
    @developer-rubenPosted 5 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•460
    @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•460
    @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•460
    @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•460
    @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•460
    @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•460
    @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