Skip to content
OverviewSolutions
16
Comments
67
Md5 dalton
@md5dalton

All comments

  • BuriticaSebas•10
    @BuriticaSebasSubmitted about 1 year ago

    Las imagenes no me cargan en vercel como hago para subirlas

    qr-code

    1
    Md5 dalton•1,430
    @md5daltonPosted about 1 year ago

    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👌

    0
  • Nayan Bhatt•980
    @freaky4wrldSubmitted about 1 year ago

    Hey there all, finally made my first project using tailwind css, well it's much like a pain in the ass for me, as I have to install it and then make it work, also the html is more bloated and that feels like hell at the text-editor :(

    On the pros it is more easy you have lot of classes to aid you and changing something is easy as well, specially I'll appreciate the low-level class assistance

    Tell me your first experience with tailwind........

    Also do provide tips to help me in using tailwind the right way.......Thanks for your time to appreciate and give feedback.......

    Responsive Results summary component with tailwind css

    2
    Md5 dalton•1,430
    @md5daltonPosted about 1 year ago

    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👌

    0
  • kiantpetersen•210
    @kiantpetersenSubmitted about 1 year ago

    Made this API call and display with API. I used the setInterval function so that new data is called and displayed. An issue I am having is that if a leave the page and return, the API call does not obey the set Interval. Please let me know how I can fix this issue. I also used the useEffect function to make the API call on the initial load. Please let me know how I can improve this component and make it more efficient.

    Responsive API call display app

    1
    Md5 dalton•1,430
    @md5daltonPosted about 1 year ago

    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
    1
  • Mithun U•150
    @Kratos-750Submitted over 1 year ago

    I'm finding it challenging to implement a gradient background and ensure the responsiveness of my website. I would greatly appreciate any advice you could provide to help me achieve these objectives more effectively.

    Rock-Paper-Scissors-Lizard-Spock Game using React

    1
    Md5 dalton•1,430
    @md5daltonPosted over 1 year ago

    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 👌

    1
  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    1
  • Paul Jin•290
    @paulhjinSubmitted about 2 years ago

    Hi Everyone! 👋🏻

    I would like to know what the best practice is for positioning the profile picture.

    I used a div that contains the card's background and profile image, positioned the parent relative and the child absolute and moved up the image using a negative margin, but don't quite know if this is the best method. What do you think would be a better solution?

       <div class="profile">
      <img src="./images/bg-pattern-card.svg" alt="">
      <picture>
        <img src="./images/image-victor.jpg" alt="Victor Crest's profile picture">
      </picture>
    </div>

    	.profile { position: relative;}

	.profile  picture  img {
		border: 0.25rem  solid  var(--clr-white);
		border-radius: 50%;
		position: absolute;
		left: 50%;
		bottom: -3rem;
		transform: translateX(-50%);
	}

    Any other feedback you can provide will be greatly appreciated! 😄

    Profile Card Component

    1
    Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    1
  • NadiaFr•310
    @NadiaFrShLmSubmitted about 2 years ago

    Nothing to be proud of. Huge difficulty with inputs and error messages, and still I'm sure my version is farm from the good one. And I also didn't add the regex for email input

    Sign up form for desktop and mobile screen

    2
    Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    1
  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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 👌

    0
  • Željko•210
    @c0dz-wqSubmitted about 2 years ago

    This is my first project where I used Sass. I found Sass slightly repellent and unnecessary (e.g. file/code duplication) but finally decided to give it a try. While my impressions are positive I still believe that we should give priority to plain CSS. Why should we use Sass? What are your thoughts about it?

    Sassy Clipboard

    1
    Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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👌

    1
  • Guilherme Lopes•350
    @gguilhermelopesSubmitted about 2 years ago

    Very nice Grid Layout challenge. I'm unsure about the media queries, is it too much? Any advice would be great! Thanks.

    Testimonials Grid Section

    1
    Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    0
  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    1
  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    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
    0