Skip to content
OverviewSolutions
6
Comments
5
P
Carlos Pizarro
@IncorrigibleSpirit

All comments

  • Carlos Pizarro•100
    @IncorrigibleSpiritPosted 3 months ago

    Hi Sergei,

    Great job! I had the chance to review your code, and I must say that you have implemented an accurate solution. One thing that caught my attention is your skills in using Sass and the way you structured the code. I noticed that you applied many resources to enhance and make your code reusable.

    Happy coding!

    0
  • HamzeKabi•100
    @HamzeKabiSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    • I used sassy css this time, and applied it's robust features like mixin and nesting. It makes reducing redundancies much easier.

    • Started designing mobile first, and used media queries for larger screen sizes

    • So far I've been coding in plain notepad to make myself more familiarized with syntaxes, in my next project I'll be using vs code so as to reduce redundancies along writing (since it is harder without IDEs features) and increase speed.

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

    I wanted margin-top of the image to become 0 for mobile screen and 5% for bigger screen sizes, even though I added margin-top of 5% in the following media query:

    @media only screen and (min-width: 376px)

    It would not get applied, and seemed to get overridden by margin-top of 0 outside media query, I had to use !important inevitably.

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

    I mentioned my problem in

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

    section, How can I overcome it without using !important.

    Recipe page using flexbox and sassy css

    1
    Carlos Pizarro•100
    @IncorrigibleSpiritPosted 4 months ago

    Hi @HamzeKabi! How's it going?

    Great job! I had the chance to review your code, and I must say that you have implemented a really clean and semantic HTML structure. Also, I noticed that you are using Sass to enhance the way you control the properties and values.

    A bit of friendly constructive feedback:

    1. As you suspected, there is a rule that takes priority over the one in your media query. You can check the "specificity" of your rules using developer tools like Google Inspector.

    Specificity: (0,1,1)

    main .image-omelette {
    width: 40rem;
    max-width: 100vw;
    margin: 0 0 5% 0;
}

    Specificity: (0,1,0)

    @media only screen and (min-width: 376px) {
    .image-omelette {
        margin: 5%;
        border-radius: 1rem;
    }

    Which options do you have to increase specificity on the media screen?

    1. Adding more class selectors or an ID increases specificity. For example, using: main .image-omelette {....}

    2. Nesting selectors more specifically also increases specificity. For instance: main .recipe_container .image-omelette {....}

    I hope my comment can help you to resolve your question.

    Happy Coding!

    0
  • Carlos Pizarro•100
    @IncorrigibleSpiritPosted 4 months ago

    Hi Alexis,

    Firstly, congratulations on creating such an accurate copy of the social profile card! I'd like to invite you to explore an excellent resource that complements this challenge: Fluid Typography - Fluid Sizing.

    I had the opportunity to utilize fluid sizing to adjust the padding in this challenge (you can also use it for typography, margins, gaps, and padding), and it proved to be a perfect solution without the need to create media queries.

    Happy coding!

    Marked as helpful
    1
  • Kikino02•160
    @Kikino02Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Blog preview Challange 3

    1
    Carlos Pizarro•100
    @IncorrigibleSpiritPosted 5 months ago

    Hey there! You did a great job! Your copy of the card is extraordinary. It's accurate and pays attention to all the details, including sizes and shadows.

    By the way, I noticed you used a media query to adjust the typography. It's a great resource! I would like you to check out these other alternatives. They are also really useful.

    Useful resources

    Happy Coding!

    Marked as helpful
    0
  • Herve Iuliano Natama Purba•10
    @hrveeeSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I'm honing my HTML and CSS knowledges and or skills using this basic project. I have learned about css flexbox and Sass (tool).

    Sass is really useful tool to make easy my workflow as a Junior Front-End Developer.

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

    I encountered a problem about positioning "div.container" to center a page and fitting size of "div.container > div.item1 > img" image into container size. I'm trying all of my best to tackle this problem by searching google.

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

    HTML, CSS, Sass, and Web Design.

    Responsive QR Code Component Design Challenge Page Solution

    1
    Carlos Pizarro•100
    @IncorrigibleSpiritPosted 5 months ago

    Hi, mate!

    Initially, I would like to congratulate you on starting your front-end path and uploading your projects on the platform.

    Concerning the challenges that you had to face (centering the main element on the page and fitting the picture size), I resolved them using other alternatives. I hope they will help you.

    How to center an element? A good trick that never fails is using display: flex along with justify-content and align-items centered.

    .main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  max-width: 87.5rem;
  width: 100%;
  min-height: 100vh;
}

    Concerning the image, a trick that helps me to control its size is to create a <div> that wraps the image. On it, you can apply flexible length units or relative units. The idea is to avoid fixed sizes to achieve better responsiveness in your design. Here is a good resource: A Practical Guide to Responsive Web Design. LINK

    .image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 18rem;
  max-height: 18rem;
}

.image-container img {
  max-width: 100%;
  border-radius: 5%;
}

    I hope my comments can help you. I am also starting on this path. See you!

    0