Skip to content
OverviewSolutions
5
Comments
5
P
Sayed Ali
@sydalwedaie

All comments

  • Sayed Ali•90
    @sydalwedaiePosted about 1 month ago

    Hello.

    You have nailed the essential components of this design. The typography, the content structure, and the overall design matches the provided template. Here are a couple of suggestions for taking it to the next level.

    Consider using media queries to add responsiveness to your design. The easiest task you could do according to your current structure is to increase the paddings around the recipe component, like so:

    @media screen and (min-width: 38.5rem) {
  body {
    padding: 128px 76px;
  }
}

    This way, when the viewport hits 38.5rem (or 38.5*16=616px), the paddings increase to the specified values, making the solution closer to the design.

    With regard to the semantic markup, there is generally more than one acceptable way to do things. In this challenge, I would say the whole recipe should go in a main tag. A header tag would have been appropriate if there was a navigation bar.

    Finally, consider using Prettier. It's a fantastic plugin available in VS Code. It takes care of formatting your indentations, freeing you to concentrate on writing code. Try this video for a quick setup.

    I hope it helps.

    0
  • Mohammed•50
    @Mohammed-morsiwalaSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Structured CSS with hands on flex box & more confident on HTML structure

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

    Still facing issues in deciding width Hight & make the design responsive

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

    I want to understand min-with max-with with media query to make website responsive

    Pure HTML CSS Social Media link Page

    2
    Sayed Ali•90
    @sydalwedaiePosted about 1 month ago

    Hello Mohammed!

    Excellent Job. You pretty much nailed the overall design. I too find it difficult to make it 100% down to the smallest details without the Figma design files.

    Regarding media queries, the general practice is to use min-width. The idea is that you design the website mobile first; meaning the default values (paddings, margins, layouts, etc) are all made to look best on mobile. Then, in a media query, you specify the minimum width at which things should start to change. So for example you would tell it to start expanding some paddings and margins when the width reaches 375px, and then start changing layouts when hitting 700px. So you are always expanding from the smaller sizes, rather than shrinking down to mobile size.

    Hope it helps.

    Marked as helpful
    0
  • SaeedAbakah•110
    @SaeedAbakahSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    My understanding of the use of css flex is getting stronger

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

    main challenge is responsiveness. I'm continuing to explore ways to get elements to be responsive without having to use too many media queries

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

    main challenge is responsiveness. I'm continuing to explore ways to get elements to be responsive without having to use too many media queries

    Responsive landing page using css flex

    1
    Sayed Ali•90
    @sydalwedaiePosted about 1 month ago

    Hello Saeed. Excellent work. Your code is well-organized and easy to follow. I pretty much used the same technique to center the main container.

    Here are a couple of suggestions:

    • Consider using CSS variables. I use them to store the design colors. Here's how I use them:
    :root {
  --color-green: hsl(75, 94%, 57%);
  --color-grey-700: hsl(0, 0%, 20%);
  --color-grey-800: hsl(0, 0%, 12%);
  --color-grey-900: hsl(0, 0%, 8%);
}


.container {
  background-color: var(--color-grey-900);
}

    I know the syntax is weird but it's totally worth it.

    • Would you like to remove the vertical scroll bar? Try setting the .main container's height to 95vh and the attribution container to 5vh. This way your total page height becomes 100vh, instead of the current 100vh+footer-height.

    • I would personally use a p tag for where it says "Front-end developer and avid reader." This line is a block-level element. A span is more useful for situations where you want to style a portion of the paragraph (or maybe just a word) differently than the rest.

    • Consider using Prettier. It's a fantastic plugin available in VS Code. It takes care of formatting your indentations, freeing you to concentrate on writing code. Try this video for a quick setup.

    0
  • chilldeleuze•80
    @chilldeleuzeSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I was surprised how quickly I got this done. Practice works!

    I'll probably rework this one, once I learned proper responsive design.

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

    I always trip over the default padding + margin for p, h1, h2, etc.. For the box shadow I used some online generator - will have to take a closer look at how box shadow works for the next challenges, and properly implement it by hand, without help from tools.

    Blog Preview Card using html & css

    1
    Sayed Ali•90
    @sydalwedaiePosted about 1 month ago

    Hey there!

    You have pretty much nailed the design. Well done!

    It seems we used the same technique to center the card and have the attribution stuck to the bottom. Though I'm not sure why did you apply flex to both the html and body tags.

    To make the font responsive (the extra challenge), consider using the CSS clamp() function. I learned about it in this very challenge!

    Box shadow is easy. You only need two figures: one for the horizontal, and one for the vertical offset. The rest all have default values or inherit from the parent. For this project, the following line did it:

    box-shadow: 8px 8px;

    Be careful using those online generators. In your case, it created unnecessary flags (-webkit, etc). They were used when box-shadow was still in beta. Nowadays it's pretty much supported everywhere.

    Way to go. Keep it up.

    Marked as helpful
    1
  • Sayed Ali•90
    @sydalwedaiePosted about 2 months ago

    I love the drop shadow! Well done. Your HTML and CSS code is quite clean too.

    Consider using CSS Variables to store the design system information in one location. For example, you can store all of the colors like this:

    :root {
  --Slate-300: hsl(212, 45%, 89%);
  --Slate-500: hsl(216, 15%, 48%);
  --Slate-900: hsl(218, 44%, 22%);
}

    Then, you can apply each one like this:

    .text-preset-1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 120%;
  color: var(--Slate-900);
}

    Hope it helps.

    0