@chrisbk9674Submitted 5 days ago
What are you most proud of, and what would you do differently next time?
I had fun coding this project.
P
Ruben de Man
@developer-rubenAll comments
- P@developer-rubenPosted 5 days ago
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 helpful1 - @MR-GaidSubmitted 3 months agoP@developer-rubenPosted 3 months ago
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 helpful0 - @AlfeynSubmitted 4 months agoWhat 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.
P@developer-rubenPosted 4 months agoHi!
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 helpful1 - @Edifierx8Submitted 4 months agoP@developer-rubenPosted 4 months 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 - @LarsAdamsSubmitted 8 months agoWhat 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.
P@developer-rubenPosted 8 months agoHi!
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 - @SpartanFrancoSubmitted 8 months agoP@developer-rubenPosted 8 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 helpful0 - @thanhsHaiSubmitted 8 months agoP@developer-rubenPosted 8 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 - @Y-ashbhattSubmitted 9 months agoWhat specific areas of your project would you like help with?
I would like some suggestions to improve responsiveness.
P@developer-rubenPosted 9 months agoHi!
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 helpful1 - P@omwanzakSubmitted 10 months agoWhat 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
P@developer-rubenPosted 10 months agoHi!
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 - P@jreed-11Submitted 10 months agoWhat 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
P@developer-rubenPosted 10 months agoHi!
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 - @alvarozamaSubmitted 10 months agoWhat 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.
P@developer-rubenPosted 10 months agoHi!
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 - @iliasminasSubmitted 12 months agoWhat 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
P@developer-rubenPosted 10 months agoHi!
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 - @JosephSamuel-1Submitted 10 months agoP@developer-rubenPosted 10 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 - @Elwyn17Submitted 12 months agoWhat 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.
P@developer-rubenPosted 12 months agoHi!
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 helpful0 - @imbraianSubmitted 12 months agoWhat 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!
P@developer-rubenPosted 12 months agoHi!
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 helpful0 - @perezLcsSubmitted about 1 year agoWhat 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.
P@developer-rubenPosted about 1 year agoHi!
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 helpful0 - @pioDer-vgySubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
positioning everything corretly
What challenges did you encounter, and how did you overcome them?I wansn't struggling with anything
What specific areas of your project would you like help with?nothing I guess but i may be wrong
P@developer-rubenPosted about 1 year agoHi!
Here are my tips:
- Separate css from the html by putting it in a separate file
- Use classnames instead of html tags as selectors (take a look at the BEM method)
- There are no hover states on the buttons
- The card is too small when using vh as a height, the buttons are appearing outside of the card
Best, Ruben
Marked as helpful1 - @abubakr313Submitted about 1 year agoP@developer-rubenPosted about 1 year ago
Hi!
Nice component, here are my tips:
- Try using BEM to better organize your code and classnames
- The image is not working on the live version of your app
- Use variables for for example color names, so you don't have to repeat them
- Try avoiding pixels as units for font sizes, this isn't responsive
- Use class names as selectors for css, makes your code more consistent
Best, Ruben
Marked as helpful0
