user2830581

Latest comments

• 

  LetterToSab•50

  @LetterToSabSubmitted 3 months ago

  

  Product preview card component

  1

  10
  

  user2830581•90

  @user2830581Posted about 2 months ago

  Hey it looks great I don't have much to add really just the desktop version is a lot bigger than it should be but that's an easy fix so not a big deal :)

  1
• 

  xandar6•130

  @xandar6Submitted about 2 months ago

  

  Recip Page with HTML CSS FLEX

  1

  00
  

  user2830581•90

  @user2830581Posted about 2 months ago

  looks great!

  0
• 

  P

  YeatisNeat•110

  @YeatisNeatSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  I tried my hardest to make this look as close to the design as possible!

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

  I encountered a bunch of challenges I don't specifically remember what exactly but they led me to learn about CSS media queries and pseudo selectors which is how I was able to get the desired responsiveness and made sure the element sizes were matching up correctly.

  

  Social Links Profile (Newbie)

  2

  20
  

  user2830581•90

  @user2830581Posted about 2 months ago

  Hey your solution looks great and is close to the design! Just a note on your HTML - you wrapped a lot of elements in <div> tags. Although it technically works, it's not semantic HTML and can make it harder for others to read and understand your code.

  There are specific tags you could've used here like a <nav> tag to group the navigation links, and instead of wrapping each link in a <div> and a <p> tag you could instead use <ul> and <li> tags. As I said it helps people read and understand your code but also helps with accessibility and screen readers. Try not to overuse <div> tags in the future other than that it looks good :)

  Marked as helpful

  1
• 

  P

  lazyneedle•60

  @Iamnotn3rdSubmitted 2 months ago

  What are you most proud of, and what would you do differently next time?

  I tried to use that project with using Figma design. I know about how to use figma in basic level.

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

  mostly how to use Figma.

  

  Blog Preview Card

  1

  30
  

  user2830581•90

  @user2830581Posted 2 months ago

  Hey your solution is great! Good use of semantic HTML and it follows the Figma design file well. However, I noticed a couple of things mainly in the CSS that could maybe improve your solution:

  • Responsiveness: Your solution isn't responsive for smaller screen sizes. Your blog card width is hard-coded to 384px which does follow the Figma design for large screens, but doesn't account for the mobile design also in the Figma file. You could add a media query breakpoint to fix this and test things using browser developer tools. Part of the brief also mentioned adjusting font sizes based on the screen size so they're smaller on the mobile version. This can also be done with media queries but I think it said to implement it without using them. I used clamp() to achieve this but there are other ways if you wanted to research that.
  • Redundant Variables and Classes: In :root you create a variable to --body-fs but don't use it. In your HTML the article-img class is never referenced in your CSS instead you use .blog-card > img. Removing these can help clean up your code and make it more readable and easy to maintain.
  • Heading Tag Usage: You've used a h3 tag without first having a h1 and h2 tag. These headings create a hierarchy and make code more readable. They also help assistive technology figure out where the most important information is on your page. It is best practice to change this to a h1 tag and adjust any potential styles afterwards.

  1
• 

  HossamElrawy•230

  @HossamElrawySubmitted 2 months ago

  

  Google fonts, CSS Flexbox, SEO and Metadata

  1

  30
  

  user2830581•90

  @user2830581Posted 2 months ago

  Your solution is good but here are some things that could be improved

  • your HTML doesn't contain a main tag. It's not entirely necessary but it helps with accessibility and it is generally good practice to include it.
  • instead of having two p tags, the content in the class 'main-text' could be wrapped in a heading tag for better readability and accessibility.
  • it looks like the font family in your CSS overrides the ones correctly added in the HTML. It should be font-family: "Outfit", sans-serif; instead of font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;.
  • your component is centered horizontally but not vertically, you could add height: 100vh; justify-content: center; to your body styles to change this.
  • there are quite a few design differences compared to the solution. Most of these are minor but can add up and affect the overall look and responsiveness. There are a lot of hard-coded margins which is generally poor practice. This can be improved by using something like Flexbox or CSS Grid as they help to space elements in a container. If you have access to the Figma file and can go into dev mode to further inspect the padding, border shadow, and general spacing then you can better adjust your CSS to fit the solution.

  Overall you're on the right these are just some improvements that might help to expand your skills!

  Marked as helpful

  1