Skip to content
OverviewSolutions
25
Comments
21

EFEELE

@EFEELEMéxico400 points

🇲🇽 Developer My YouTube channel: https://www.youtube.com/@efeeledev

Latest solutions

View more solutions

Latest comments

  • EFEELE•400
    @EFEELE

    great job!!

  • Binh05•90
    @Binh05
    What challenges did you encounter, and how did you overcome them?

    when i font-size the line <p>"Front-end developer and avid reader."<p/>, the card also shrinks, how can i fix it?

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

    Can you comment on the html structure to help me write it more correctly?

    social links profile with hover button

    1
    EFEELE•400
    @EFEELE

    Hello my friend, congratulations on your work! 🎉

    📉 Card Shrinks When Increasing Font Size — Explanation and Fix

    You're right in noticing that the card shrinks when you increase the font size of the <p> tag.
    This happens because the parent container (<main>) does not have a fixed width, only a max-width.
    When you increase the font size, the paragraph may reflow and take up more vertical space,
    but the layout might also appear "shrunk" if it's relying solely on max-width.

    ✅ Solution

    You can fix this by setting an explicit width or using width: 100% along with max-width, like in this example:

    main {
  width: 100%;
  max-width: 400px;
  text-align: center;
  border-radius: 10px;
  padding: 2rem;
  margin: 1rem auto;
  color: var(--White);
  background-color: var(--Grey-800);
}

    🧱 HTML Semantic Improvement

    To improve the semantic structure of your HTML, I recommend using an <article> element for the "card" content and placing it inside the <main>.
    This enhances accessibility and makes your markup more meaningful:

    <main>
  <article>
    ...
  </article>
</main>

    Also, if you're not using <header> or <footer>, feel free to remove them to simplify your code.
    Your HTML is otherwise well-written. Keep up the great work! 💪

  • Siddharth-esc•20
    @Siddharth-esc
    What are you most proud of, and what would you do differently next time?

    not really proud of anything tbh cuz this task was a blunder for me... i have been making noob mistakes

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

    faced structure malfunctions, had to apply multiple media query to overcome the issues to an extent

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

    how should i structure the website??, how can i overcome the malfunctions when applying flex/grid??, whatever suggestions you guys can give even minor will be useful for me. point out everything. thank you

    Used "Noob" techniques (plz drop suggestions)

    #pure-css
    1
    EFEELE•400
    @EFEELE

    Hey! First of all, despite the small issues you encountered, you managed to solve the challenge in an acceptable and functional way — and that’s something to be proud of! Great job getting through it 🙌

    Now, I’d like to share some suggestions that might help improve your solution further:

    🖼️ Image styling

    To prevent the image from stretching or getting distorted, consider adding the following CSS properties:

    object-fit: cover;
object-position: center;

    🔤 Semantic HTML

    Try to use semantic HTML tags when possible. For instance:

    • Replace:
    <div class="mediagrid"> ... </div>

    with:

    <article> ... </article>
    • Replace:
    <div class="Recipe-title">Simple Omelette Recipe</div>

    with:

    <h1>Simple Omelette Recipe</h1>
    • Replace:
    <div class="title-Desc">An easy and quick dish...</div>

    with:

    <p class="title-Desc">An easy and quick dish...</p>

    🧼 CSS Simplification

    You’re using many classes that could be simplified. Reducing redundant classes will make your HTML cleaner and can help avoid selector errors in your CSS.

    🧱 Font weight values

    You're using font-weight: 560, which is not valid. Acceptable values are:

    100, 200, 300, 400, 500, 600, 700, 800, 900

    Make sure your font family supports the desired weight.

    📄 Base font styles

    Since you're using "Outfit", sans-serif as your base font, it's better to set it directly on the <body>:

    body {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  /* other base styles */
}

    And apply "Young Serif", serif only for headings:

    h1, h2, h3 {
  font-family: "Young Serif", serif;
}

    🎨 Color variables

    To keep things clean and consistent, you can define your colors using CSS variables in the :root selector. Here’s an example:

    :root {
  --Nutmeg: hsl(14, 45%, 36%);
  --Dark-Raspberry: hsl(332, 51%, 32%);
  --Rose-White: hsl(330, 100%, 98%);
  --Eggshell: hsl(30, 54%, 90%);
  --Light-Grey: hsl(30, 18%, 87%);
  --Wenge-Brown: hsl(30, 10%, 34%);
  --Dark-Charcoal: hsl(24, 5%, 18%);
}

    And then use them like this:

    body {
  background-color: var(--Eggshell);
  color: var(--Wenge-Brown);
}

    💬 Final words

    Don’t stress too much — front-end development is all about practice. There’s almost always a better way to solve something, and the key is to keep building, keep learning, and keep improving.

    If it helps, here’s my own solution to this challenge from over a year ago. There may be parts that can inspire you, and probably parts I could improve now too 😅

    Keep up the great work! 🚀

  • EFEELE•400
    @EFEELE

    Great Job!

  • Abubakar sadiq•400
    @abubakar-sadiq001
    What are you most proud of, and what would you do differently next time?

    I built the solution without getting the colors, I generated colors with the color palette and I also finished it in under 150 mins

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

    Looking for matching colors consumes a lot of my time. but with the help of the CSS color palette, I get the matching colors

    Recipe page using HTML and CSS only

    2
    EFEELE•400
    @EFEELE

    Great job!!

    Details about the design colors can be found in your style-guide.md file.

    You can create custom properties in your style sheet as follows:

    /* Define variables in :root */
:root {
    --Nutmeg: hsl(14, 45%, 36%);
    --Dark-Raspberry: hsl(332, 51%, 32%);

    --Rose-White: hsl(330, 100%, 98%);
    --Eggshell: hsl(30, 54%, 90%);
    --Light-Grey: hsl(30, 18%, 87%);
    --Wenge-Brown: hsl(30, 10%, 34%);
    --Dark-Charcoal: hsl(24, 5%, 18%);
}


/* and that's what you can call them *.
body {
    background-color: var(--Eggshell);
}

    You can do tests in codepen https://codepen.io/efeeledev/pen/KKLyGyZ

  • Amirul Afanndy•30
    @amirulafanndy
    What are you most proud of, and what would you do differently next time?

    Be able to use flex box styling.

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

    I dont know how to adjust the card and item width as the screen size change.

    Social Links Profile Solution

    2
    EFEELE•400
    @EFEELE

    To do that you have to implement media queries in CSS.

    an example:

    /* Styles normal */
.my-div{
      width: 800px;
      height: 500px;  
      background-color: red;
}

/* Styles on devices with a max-width 768px */
@media screen and (max-width: 768px){
.my-div{
      width: 400px;
      height: 250px;  
      background-color: green;
}
}

    Test on codepen : https://codepen.io/efeeledev/pen/MWdOPoV

View more comments