Frontend Mentor | 8alp8's profile

Latest comments

@korcakSEA

Submitted 2 months ago

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

In this challenge I learned a lot of new stuffs about CSS. Especially usage of min(), max() and clamp() functions.

Of course, this challenge can be done by using Flex layout, Grid or media query, but I personally preferred not using them.

The other important thing I learned during this project is called nested or scoped styling. So it helps to improve readability, maintainability, and modularity of styles.

ol,ul{
    padding-left: var(--space-300);

    li{
        padding-left: var(--space-150);
        margin-bottom: var(--space-150);
        line-height: 1.5;
        
    }

    li::marker{
        color: var(--Rose-800);
        font-weight: var(--font-weight-semibold);
    }
    
}

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

The thing I found it difficult is making page, border-radius, padding, and margin properties responsive.

And as always image styling. At the beginning I CSS properties on image to add padding and border radius. Unfortunately, they do not go well together.

So as said : "Set the padding on "wrap" not on the image (setting paddings on images does not make much sense :)), that should fix your problem."

You can also find example of min(), max() functions usage, see below:

  <div class="image-container">
    <img class="card-image" src="/recipe-page-main/assets/images/image-omelette.jpeg" alt="omelette photo">
  </div>

.image-container{
    margin-bottom: 0;
    /* Responsive padding */
    padding-inline:max(0rem,min(2rem, 50vw - var(--max-width) / 2));
    padding-top: max(0rem,min(2rem, 50vw - var(--max-width) / 2));
}

.card-image{

    /* Responsive border-radius from 0px to 12px */
    /* border-radius: clamp(0px, calc((100vw - 375px) / 20), 12px); */

    border-radius:max(0rem,min(12px, 50vw - var(--max-width) / 2));

    /* border-radius: var(--border-radius-100); */
}

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

I am open for any advice, idea to improve this project

Recipe page, no media query , no flex or grid!

8alp8•80

@8alp8

Posted 2 months ago

Glad to see that you are improving yourself. You could pay attention to "top-margin". :)

Marked as helpful

Mo-Kusan•50
@Mo-Kusan
Submitted 2 months ago
Social Links Profile
1
8alp8•80
@8alp8
Posted 2 months ago
You could pay more attention to margins, it's nice!
AzmeerX•50
@AzmeerX
Submitted 2 months ago
Responsive Card
2
8alp8•80
@8alp8
Posted 2 months ago
Hey!
Antonio Rossett•10
@tonyrossett
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
Understand classes, containers, specificity
What challenges did you encounter, and how did you overcome them?
The correct choice of every type of CSS, like flex, ordered lists, unordered lists, and the specificity
What specific areas of your project would you like help with?
I think this is ok for the first project.
Responsive page made with Flex
#pure-css
1
8alp8•80
@8alp8
Posted 2 months ago
Seems fine! How's your progress?
matekuna92•20
@matekuna92
Submitted 2 months ago
What are you most proud of, and what would you do differently next time?
After I was always done with the styles, I saw that these gaps could be solved with flex gaps much more elegantly, so I re-wrote the code with that.
What challenges did you encounter, and how did you overcome them?
Figuring out the proper structure at first. Also, understanding the figma with those many font styles and sizes, while also using the style guide's font-weight values.
What specific areas of your project would you like help with?
I'd like to get some feedback if I'm using the correct html elements and css styles. Also, if everything was used correctly from Figma.
Blog Preview card nested flexbox divs
#bem#pure-css
1
8alp8•80
@8alp8
Posted 2 months ago
Hey there! Your project seems nice. You could pay more attention to spaces between objects especially bottom of the card seems empty, which creates a contrast in the area.

About semantic writing, I think you did it well. Using of h1 and h3 tags was good (y).

Keep going, greetings!
Marked as helpful
thanhtamlk8273•10
@thanhtamlk8273
Submitted 2 months ago
QR code
1
8alp8•80
@8alp8
Posted 2 months ago
Seems nice, aligning texts and their boldness could be improved. :)