All comments

• 

  Geoff Walker•165

  @Geoff-WalkerSubmitted about 3 years ago

  Would really welcome some feedback specifically on the javascript as this is my first attempt using it on Front end mentor.

  

  My first use of Javascript on FrontEnd Mentor

  1

  20
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @Geoff-Walker, good job on this solution!

  Some suggestions for you:

  1. Try not to set a fixed height to an element, consider using min-height or not setting the height at all so the element can grow as the content grows.
  2. You can try to watch this video on creating an accordion with less Javascript accordion video.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

  I hope this helps, good luck!

  1

  This comment has received 1 replyShow
• 

  satyamallick7•20

  @satyamallick7Submitted about 3 years ago

  I'm a newbie so please excuse the mess

  

  3-Card-Preview using Pure HTML and CSS

  2

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @satyamallick7, good job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase to capitalized text in CSS.
  2. Try to wrap your code in the body using a main element to clear some accessibility issues.
  3. You can try to use flexbox to create this solution, it will be easier for you to create the layout for the card.
  4. Don't set a fixed height to an element as it can cause issues. You can use min-height or not setting the height at all so your element can grow as your content grows.
  5. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  6. You can try to use more relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

  I hope this helps, good luck!

  Marked as helpful

  2
• 

  Chit_Thet_Aung•195

  @ChitThetAungSubmitted about 3 years ago

  Hello guys! Please suggest me about my solution .Thanks you.

  

  Html and Css

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @ChitThetAung, great job on this solution!

  Some suggestions for you:

  1. You can use the main element to wrap your code in the body to clear some accessibility issues in the report.
  2. You don't need to add alt text for the images because they are for decorative purposes.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit see the article.

  I hope this helps, good luck!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  nas096•20

  @nas096Submitted about 3 years ago

  Are there any ways to improve this solution?

  

  3-column preview card with plain CSS (flexbox).

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @nas096, good job on this solution!

  Some suggestions for you:

  1. You can add a max-width to your main tag to keep the structure and shape of your card when the size of the screen is getting bigger.
  2. You can try to follow a CSS naming convention called BEM which can save you from repeating your code. You can watch this video for more information Watch the video.
  3. You can try to put the div with the class of attribution inside a footer tag to clear the accessibility issue in the report.

  I hope this helps, good luck!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Jonathan•295

  @Nathan-FrontSubmitted about 3 years ago

  Any suggestion to make it better will be helpful in learning. Thank you

  

  Stats preview card

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @Nathan-Front, good job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase to capitalize text in CSS instead of typing them in HTML.
  2. You can try another way to create the image and the overlay using an img tag and a div like in this video overlay video.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

  I hope this helps, good luck!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Felipe•60

  @Jxai00Submitted about 3 years ago

  I'd love to get some feedback on my solution. Feel free to talk about where can I improve.

  

  3-Column Preview Card Component using Grid and Flexbox

  1

  20
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @Jxai00, good job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase to capitalized text in CSS instead of typing them in HTML.
  2. You don't need to fill in the alt tag since the image is just for decorative purposes.
  3. Try to add a max-width to your container so that you can keep the structure and shape of the card if the screen size is getting bigger.
  4. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  5. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit read the article.

  I hope this helps, good luck!

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Romel Williams•180

  @omerome83Submitted about 3 years ago

  Any feedback would definitely be appreciated.

  

  Stats Preview Card Component made using HTML/CSS and Flexbox

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @omerome83, good job on this solution!

  Some suggestions for you:

  1. For the mobile size, try to give some space so the card doesn't stick to the left and right sides of the screen.
  2. You can use background-size: cover; and background-repeat: no-repeat; so the image can cover the container without being duplicated for IPad size.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like em in the future. Here is a link to an article that explains when to use which unit read the article.

  I hope this helps, good luck!

  Marked as helpful

  1
• 

  Egemen•55

  @egemendemirSubmitted about 3 years ago

  Feedback is appreciated. If there are any mistakes or bad practices in the code please let me know.

  

  3-Column Preview Card using Flexbox

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @egemendemir, great job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase to capitalized text in CSS instead of typing them in HTML.
  2. You can add a transition for the button to make it nicer.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit read the article.

  I hope this helps, good luck!

  Marked as helpful

  1
• 

  Pop Andrei•120

  @pccipriSubmitted about 3 years ago

  I would appreciate if you could tell me what you think about my solution.Let me know if u have any advice regarding accessibility or responsiveness. I'm a beginner so any advice is welcomed. Anyway thanks for taking the time to view my solution.

  

  Stats preview card component - HTML & CSS Flexbox

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @pccipru, good job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase for capitalizing text in CSS instead of explicitly typing them in HTML.
  2. You can add an additional overlay with a lower opacity to achieve the same color for the image.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like rem in the future. Here is a link to an article that explains when to use which unit read the article.
  5. Try to recreate this solution without setting an explicit height on your elements. You can try to use min-height or not setting the height at all so the card can grow as the content grows.

  I hope this helps, good luck!

  Marked as helpful

  1

  This comment has received 3 repliesShow
• 

  Vadim Macovei•380

  @VaNaChiMaSubmitted about 3 years ago

  I would appreciate any feedback, thank you in advance.

  

  3-column preview card component => Flexbox!

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @VaNaChiMa, great job on this solution!

  Some suggestions for you:

  1. You can use text-transform: uppercase to capitalized text in CSS instead of explicitly typing them in HTML.
  2. For decorative images or icons, you don't need to put alt text for it since they don't actually add meaning to your content.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like em in the future for padding. Here is a link to an article that explains when to use which unit read the article.

  I hope this helps, good luck!

  0
• 

  João Guilherme Saporski•210

  @JSaporskiSubmitted about 3 years ago

  Solution updated, fixed the vertical align of the main component. Feel free to give any tip about the solution, would help me a lot.

  

  Responsive solution using Flexbox only, no frameworks.

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  hey @JSaporski , great job on this solution!

  Some suggestions for you:

  1. For your stats, instead of splitting the h2 and the span tag, you can use <h2>10k+ <br><span>companies</span></h2> instead.
  2. I don't know how you manage to get the image to look like that without styling it but you can use an overlay for the image using a div just like in this video overlay video.
  3. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  4. You can try to use relative units like rem and em in the future. Here is a link to an article that explains when to use which unit see the article.

  I hope this helps, good luck!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Obuhri•165

  @obaryoSubmitted about 3 years ago

  Any feedback will be much appreciated

  

  HTML CSS flexbox

  1

  10
  

  Joseph•770

  @Jos02378Posted about 3 years ago

  Hey @obaryo, great job on this solution!

  Some Suggestions for you:

  1. For the name and age, you can try to use a span with a heading like this <h1 class="name">Victor Crest <span>26</span></h1> and then style the span.
  2. You can try to follow a CSS naming convention called BEM. You can watch this video for more information Watch the video.
  3. You can try to use relative units like em in the future for padding. Here is a link to an article that explains when to use which unit see the article.
  4. Try deleting all of the code that you don't need like the ones that you comment in the CSS file just to keep your code looking clean and professional.

  I hope this helps, good luck!

  Marked as helpful

  0