Skip to content
OverviewSolutions
16
Comments
66
Md5 dalton
@md5dalton

All comments

  • Md5 dalton•1,430
    @md5dalton

    Hola 👋

    El archivo index.html está en el mismo nivel que tu imagen, así que tiene que cambiar src del <img> a src="image-qr-code.png".

    Sí te das cuenta tiene duplicado 3 veces el código ☝️

    Cheers👌

  • Md5 dalton•1,430
    @md5dalton

    Hi Nayan👋

    I had a similar experience when I was just starting with tailwind but as I got used it, it is an excellent tool in the long run. I did not like how it cluttered my HTML markup however, once I began to use it with a framework like React JS, all I had to do was extract all that repetition into a component or a partial and since then I have never looked back👌

  • Md5 dalton•1,430
    @md5dalton

    Hi there👋

    The idea is to generate a new piece of advice by clicking the dice icon so you don't need to use a timer. So you just attach a click listener on the dice icon like so:

    <div className='quote-dice' onClick={() => getAdvice()}>...</div>

    You can even go further by handling loading and error states. 👍

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Mithun 👋

    Cool you went with the bonus solution😎

    Regarding the background gradient, I noticed you used a pseudo element to achieve the desired effect however, you could still have just applied it directly on #App or body and there would have been absolutely no need to write additional CSS for that pseudo element.

    Cheers 👌

  • Md5 dalton•1,430
    @md5dalton

    Hello Andrey Esman 👋

    Well done with your solution for this challenge 👍

    Excellent advice from @MelvinAguilar and if you were wondering how to add that no-cache option, here's how you can do it:

    fetch ("https://api.adviceslip.com/advice", {cache: "no-cache"})...

    Cheers 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Paul Jin 👋

    Congratulations on finishing this challenge 👍

    Since this bg-pattern-card.svg is a background and does not form part of the page content, use background-image instead of the img element and you'll have less HTML markup to work with.

    Negative margins also do work in placing that profile picture image, however I'd suggest you use CSS Grid instead:

    main {
   ...
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: /* define your rows here */
}

.profile {
    ...
    grid-row: 2 / 3; /* depending on how you defined your rows */
}

    This is just one way to implement this through CSS Grid and there is still other code you can use. That's how flexible CSS Grid is👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello NadiaFr 👋

    Congratulations on finishing this challenge 👍

    You might have noticed that when a user moves out of focus on an input element the placeholder disappears and this might be frustrating for a user since your input elements don't have any labels so this may be a terrible user experience.

    This is because you added an event listener onfocus="this.placeholder=''" to remove the placeholder when the input is in focus. I'd suggest you remove this event listener from your input elements since it's unnecessary.

    Happy coding 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Nicolás Órdenes 👋

    Impressive work with your solution for this challenge 👍

    I've noticed the way you imported your fonts and I suppose there's nothing with since they work just fine. Here's code from Google fonts to import all of them in one link tag:

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">

    Since you're using more than one font, why not use CSS custom properties:

    :root {
    --font-fraunces: 'Fraunces', serif;
    --font-montserrat: 'Montserrat', sans-serif;
}

    Also the picture element you were referring to:

    <picture>
    <source srcset="./images/image-product-desktop.jpg" media="(min-width: 576px)" />
    <img src="./images/image-product-mobile.jpg" alt="transparent perfume bottle" />
</picture>

    There's nothing wrong with your code, those are just my suggestions. Cheers 👌

  • Md5 dalton•1,430
    @md5dalton

    Greetings Željko 👋

    I'll jump straight to the point of why you should use SASS. Syntactically Awesome Style Sheets - is a CSS preprocessor and it was developed to solve the problem of excessive repetition in CSS by allowing for variables, nesting, and mixins. Programmatic features such as arguments, loops, and conditional logic were added. The SASS syntax eliminates the need for semicolons and curly braces. Another newer syntax is SCSS (Sassy CSS), and is simply CSS with the same featureset as SASS but requires semicolons and curly braces just like CSS.

    You can choose whichever syntax you wish to, since both have pros and cons. I've been using the SASS syntax because there's no need for semicolons and curly braces. The CSS preprocessor itself is great, one other thing I really loved about it was SASS partials, which allow developers to split the styles and compile them into one file later. It has saved me a lot of time and headaches in maintaining huge styles as the project increases in size.

    And not to forget SASS is the most popular CSS preprocessor so there are plenty of resources to learn from👌

  • Md5 dalton•1,430
    @md5dalton

    Hello Guilherme Lopes 👋

    Congratulations on finishing this challenge. Impressive work 👍

    ☝️ Mobile First

    You may have heard of this before but if not, this just means creating a layout where the default configuration is for narrow screen/mobile devices, and layout features for wider viewports are then layered on top of that default.

    To address your question, we will not be creating media queries for mobile since in mobile first approach, we assume that all your default styles are targeted to mobile screen sizes, then we are going to create media queries to define styles for bigger screen devices. Below are some examples I've used and please note that you can modify the breakpoints to meet your project design.

    .container {
    display: grid;
    ...
}


/* Tablets */
@media (min-width: 576px) {
    .container {
        grid-template-columns: 1fr 1fr;
        ...
    }
}

/* Desktops */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(4, 1fr);
        ...
    }
}

    This is just an example and you may have noticed that I used min-width instead of max-width; this is a typical pattern in mobile first approach.

    Cheers👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Greetings Nada Elhosary 👋

    Congratulations on completing this challenge. I also enjoyed working on it, especially fetching and using the data from the API.

    You may have noticed that in firefox browser there's an issue where no new advice is fetched even if you keep pressing the dice. This is due to the fact that the browser is caching the previous response, so to prevent this, you can add a "no cache" option to your fetch function: fetch(url, { cache: "no-cache" }). This will ensure a great user experience for everyone using your app regardless of which browser they are using.

    Another minor thing I noticed in your HTML markup is you implemented responsive images with the picture element and that is great👍, however, you included <source media="(max-width: 520px)" srcset="images/pattern-divider-mobile.svg"> and this is redundant since <img src="images/pattern-divider-mobile.svg"/> loads the same image. You can remove it and your code will work perfectly fine.

    Hopefully that helps improve your project 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Greetings Gabriela 👋

    Congratulations on finishing this challenge. Great work.

    If you want to change the color of the svg images when a user hovers over them, you can modify the fill property through CSS. I'll demonstrate below:

    svg path {
   transition: 0.5s
}

svg path:hover {
    fill: red;
}

    You can add a transition property above to make it nicer. You can also use a color of your choosing, red is just an example. I hope that helps. 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Noela Ost 👋

    Congratulations on completing this challenge. Impressive work 👍

    If you want to fix some of those accessibility issues, you should try to use semantic HTML markup wherever you can. This will help screen readers to better navigate your web apps. Here's a few suggestions I'd make:

    • Replace this <div class="container"> with <main>.
    • Replace this <div class="card"> with <section>. (optional)
    • If you're going to use h tags and you should always start at <h1> and if it doesn't match your styling, you can always modify it's typography.

    Wish you the best in your journey into web development. 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello ssembatya-dennis 👋

    If you want to implement responsive images in your app, picture HTML element is the best choice to go with. You can use it load appropriate images depending on the device screen size. Here's how you can use it in your app:

    <picture>
    <source srcset="/images/image-product-desktop.jpg" media="(min-width: 576px)" />
    <img src="/images/image-product-mobile.jpg" alt="transparent perfume bottle" />
</picture>

    I hope that helps. 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Dun 👋

    Incredible work on the solution for this challenge and excellent choice in going with mobile first approach.

    One of the things you might like with CSS pre-processor like SASS is the ability to split your styles into multiple files to make them more readable and easier to maintain. However, you might have noticed that your _main.sass is quite long, so I'd suggest you split it up a bit. Here's a folder structure I use when I work with static projects:

    styles
   /components
       /_button.sass
   /globals
       /_boilerplate.sass
       /_colors.sass
       /_typography.sass
   /layout
       /_footer.sass
       /_header.sass
       /_main.sass
       /_navigation.sass
   /util
       /_breakpoints.sass
       /_mixins.sass
       /_variables.sass

    You don't have to use this exact same folder structure as you can modify it according to your use case scenario and needs. I'll leave a link to and article by Doston Nabotov at DEV Community on A Modern Sass Folder Structure , you can check it out as they go further into the concepts. 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Greetings Oviedev 👋

    I did play around with CSS flex box and grid to place your content in the center of the page and both work perfectly fine. Below is a snippet of CSS I used and I commented out the properties that you should remove.

    body {
   display: grid;
   place-content: center;
   min-height: 100vh;
   /* display: table; */
   /* position: absolute; */
   /* height: 100%; */
   /* width: 100%; */
}

    Regarding the background images, I'll leave below a starting point where you can also play around and see how you can place those images the way you want and I'll also comment out properties that are unnecessary :

    body {
   background-position: top left, 50vh bottom;
   background-repeat: no-repeat;
   /* background-size: auto, cover; */
}

    Happy coding. 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Thullyo Damasceno 👋

    Your implementation of flex box to center the content vertically and horizontally if fine. However, let me suggest you use min-height instead of height because the former means that the element's height should be at least that high but may increase if the content needs more room. Here's how I'd modify the styling on the body element:

    body {
    ....
    /* height: 98vh; */
    min-height: 100vh;
    margin: 0;
}

    There are several approaches that we can use to achieve this but we'll go through only 2 more below:

    • Grid
    • Position

    Grid is also an excellent way to go. It makes use the place-content property which combines align-content and place-content to center content perfectly in the middle of the page.

    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    Last and least would be the use of position and translate properties but I recommend you stick with flex box instead:

    body {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

    I hope that gives you and idea on which you can choose on your next projects. 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello João Oliveira 👋

    You are not doing anything wrong, that's the expected behavior. I was also a bit confused about the use of rems in media queries when I was watching a tutorial on CSS media queries by Coder Coder. So I searched online to see if anyone else has come across this issue and here is what I found:

    rem is one of many relative units in CSS, which means it is relative to something else, perhaps the size of the parent element's font, or the size of the viewport. In the case of rem, it is relative to the font size of the root element that is matched by the :root pseudo class or the html selector.

    So now here is where things start to get interesting. According to section 1.3 of the media queries spec, relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

    So since rem is also a relative unit, when you choose to use them in media queries, the initial value will be 16px and not the 10px that you defined in your styles even though that was still inside the root element.

    I hope that clears the confusion. 👌

    Marked as helpful