Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions29Comments244

All comments

  • turboo-sy• 160

    @turboo-sy

    Submitted

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

    The problem that I'm having is that when I click the button , I have to press it twice to go to the next advice Is the api the problem, or there's a different reason for it?

    Advice Generator API

    2

    Fer• 3,990

    @fernandolapaz

    Posted

    Hello, regarding your question:

    On the API site https://api.adviceslip.com you can see the note "Advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice."

    That is the reason.

    I hope this clarifies your doubt.

    Greetings,

    1
  • Mauro• 50

    @maurocravi

    Submitted

    I created this using Google IDX because I wanted to try it out. I noticed that the borders of the card didn't start at the begining of the borders but just a little after. I didn't know how to do it after trying a few things, so it's not 100% accurate

    Blog Preview Card

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi, regarding your comment:

    It is a shadow not a border, so you could have used the box-shadow property for that.

    Something like this box-shadow: 8px 8px black;

    I hope it’s useful!

    1
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, regarding your comment:

    • You could have used background-color: hsla(178, 100%, 50%, 0.5) and then opacity: 1 on hover, like so:
    .bg {
  position: absolute;
  opacity: 0;
  width: 300px;
  height: 300px;
  border-radius: 10px;
  background-color: hsla(178, 100%, 50%, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg:hover {
  opacity: 1;
  cursor: pointer;
}
    • And remember that when there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with <a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you for future projects:

    • To group a set of related items, like the stats in this case, you could use an unordered list <ul>.
    • It might be good to get used to designing with the mobile-first approach (which means designing for mobile first and then for desktop or any other device) as it is widely considered best practice.
    • As an alternative to color the image you could simply use the mix-blend-mode property:
    .image {
    background-color: var(--clr-primary-soft-violet);
}
.image img {
    mix-blend-mode: multiply;
    opacity: 0.75;
}

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you for future projects:

    • When there is a hover state over an element it means that it is interactive, so it should be an interactive element around it (like a link or a button). So, the image should be wrapped with <a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.
    • In cases like this where the content is centered on the page it is better to use min-height: 100vh for the body as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
    • Consider using rem for font-size as well as it is better for scalable layouts.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    1
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi Soraya, nice solution,

    Just in case you are not aware:

    The trick of setting font size: 62.5% is no longer commonly recommended, actually there is still a lot of debate about it. In any case, it could be good to get used to thinking directly in relative units since they are the most suitable for most cases.

    More about the 62.5% trick 📗

    I hope it’s useful : )

    Regards,

    Marked as helpful

    1
  • Abdelrahman• 90

    @Dribbz

    Submitted

    Hi there 👋🏼, I’m Dribbz and this is my solution for this challenge. 🚀

    🛠️ Built With:

    ⚡️HTML5 ⚡️Vanilla CSS

    The measurments between elements could've been more accurate i am trying to work on my semantic HTML / accesibility if you have any tips for me would be great🙌🏼

    Thank you !✌️

    Product preview card component

    #accessibility

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi Dribbz, just a couple of little tips in case you want to take a look:

    • If you use padding instead of margin for the <body> it will avoid the vertical scrollbar you currently have.
    • And if you want to remove the empty space below the image between 600 and 605px (I guess you didn't even see it) you could do it by giving it a height: 100%.
    • Regarding your comment, I personally don't see any problem in terms of semantics/accessibility. 👌🏻

    I hope it’s useful, nice solution : )

    Regards,

    Marked as helpful

    1
  • Christian• 660

    @shadow16305

    Submitted

    First time using tailwind CSS. I'm sure there is an easier way to change the color of the image (would want some advice for that if possible). Thanks for checking out my solution :D

    React, tailwindCSS

    #react#tailwind-css

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, regarding your comment:

    • You could use the mix-blend-mode property that specifies how an element's content should blend with its direct parent background. So, set the soft violet background-color to the image container and then:
    .img-color {
mix-blend-mode: multiply;
opacity: 0.75;
}

    And some of this may also interest you:

    • If you want to remove the empty space below the image between 768 and 940px you could do it by giving it a height: 100%. And if the image stretches too much you can add object-fit: cover.
    • To group a set of related items, like the statistics in this case, you could use an unordered list <ul>.
    • It is better to use min-height: 100vh ('h-screen') as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
    • Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.

    I hope it’s useful, and let me know if it worked : )

    Regards,

    0
  • Helmuth• 40

    @helmdyck

    Submitted

    I couldn't center everything with flexbox so I used "Transform : Translate ". What is the best way to center a simple div like this? Will I always have to try all the options until I see which one works for me?

    Ad with QR code in HTML and CSS

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, regarding your comment:

    You could center the content with grid or flexbox:

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

    body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

    One advantage of this over using translate is to avoid page clipping in viewports with low height (such as mobile landscape orientation).

    I hope it’s useful : )

    Regards,

    Marked as helpful

    1
  • Ferney• 170

    @FerneyMontoya6

    Submitted

    If someone have some feedback I'd really like to know it 😊

    CSS grid, CSS flexbox

    #semantic-ui#bem

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you:

    • The trick of setting font size: 62.5% is no longer commonly recommended, and it is good to get used to thinking directly in relative units since they are the most suitable for most cases. More about the 62.5% trick here 📗
    • You should remove the media from <link rel="stylesheet" href="css/styles.css" media="screen and (min-width:375px)">. It is not necessary and it makes the page not have styles below that width.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    1
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻,

    If you want to remove the empty space below the image between 800 and 980px you could do it by giving it a height of 100% for example.

    picture, img {
height: 100%;
}

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you:

    • The image is interactive too, so it should be wrapped with <a> or <button> (depending on what happened when clicking on it).
    • The icons are decorative and therefore need an empty alt attribute to be ignored by screen readers.
    • It is better to use min-height: 100vh for the body as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
    • Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    1
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you:

    • The image is not decorative and therefore the alt attribute should have at least a short description, like 'QR code to visit Frontend Mentor'.
    • It is better to use min-height: 100vh for the body as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
    • Regarding what you mention about reducing unnecessary code, the only thing I see is that you could remove font-weight: bold from the <h2>.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, this may interest you for future projects:

    This challenge consists of a group of interactive elements where users are expected to enter data (their rating) to be sent.

    Therefore, it would be appropriate to use a <form> (whose inputs should be radio buttons <input type='radio'> so that it is only possible to select one option).

    And a <button type=' submit'> (<input type='submit'> is fine too) to send that data.

    More about Forms here 📗

    I hope it’s useful : )

    Regards,

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, this may interest you for future projects:

    Theoretically, in this challenge we have a group of interactive elements where users are expected to enter data (their rating) to be sent.

    Therefore, it would be appropriate to use a <form> (whose inputs should be 'radio buttons' <input type='radio'> so that it is only possible to select one option).

    And the <button type=' submit'>, as you did 👌🏻, to send that data.

    Remember that buttons are interactive elements used to perform an action (such as submitting a form), but to collect user data we should use inputs.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Damien• 230

    @CtrlAltSudo

    Submitted

    This is my first JS project! This took way longer than I expected and had to resort to chatGPT when Google wasn't helping...

    Interactive Rating Component

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, this may interest you for future projects:

    In theory, here we have a group of interactive elements where users are expected to enter data (their rating) to be sent.

    So, you were right to use <form>👌🏻 but a form is used to collect user input and should be a container for some kind of input elements (not <li>). In this case it would be appropriate to use 'radio buttons' <input type='radio'> so that only one option can be selected.

    And a <button type=' submit'> (<input type='submit'> is fine too) to send that data.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you for future projects:

    • Headings shouldn't be used to make text big or bold, that's what CSS is for. Also, using more than one <h1> is allowed but is not considered a best practice, so if you are going to use more headings maybe it would be better to use an h2 and so on.
    • It could be better to use the <del> element for the old price because the way you did it, a screen reader user won't know it has a strikethrough.
    • Consider using some CSS reset as a good practice to have a clean starting point and reduce differences between browsers. An example of CSS reset here 🔎

    These are some very basic and useful ones to start:

    * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
    • Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Renzo Dichiara• 50

    @rendichiara5

    Submitted

    ENGLISH I would be very grateful for any kind of correction and any advice, I am new in the world of programming. I was able to make this design with guides that I was finding on the internet. I would appreciate your support, thank you.

    SPANSIH Agradecería mucho cualquier tipo de correción y cualquier consejo, soy nuevo en el mundo de la programación. A éste diseño lo pude hacer con guías que iba encontrando en internet. Agradecería mucho tu apoyo, gracias.

    Card NFT responsive using Flexbox and the method Mobile-first

    2

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you for future projects:

    • Skipping heading levels can be confusing and should be avoided whenever possible (start from <h1>, followed by <h2> and so on).
    • The icons are decorative and therefore need an empty alt attribute to be ignored by screen readers.
    • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with <a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.
    • You could also use flexbox to center the content of the page:
    body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

    And removing the margin from the 'main-container'.

    • Think about using relative units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.

    I hope it’s useful : )

    Saludos,

    Marked as helpful

    1
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, this may interest you for future projects:

    The design looks good 👌🏻, but keep in mind that the main thing about this challenge is that we have a group of interactive elements where users are expected to enter data (their rating) to be sent. Therefore, it would be appropriate to use a <form> (whose inputs should be 'radio buttons' <input type='radio'> so that it is only possible to select one option). And a <button type=' submit'> (<input type='submit'> is fine too) to send that data.

    I hope it’s useful : )

    Regards,

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi, regarding your comment:

    • You got it right, although it would be even better to use min-height: 100vh since using height causes the page to cut off in viewports with a small height (such as mobile landscape orientation).

    And let me add this:

    • Consider using a good semantic structure with headings, paragraphs, etc. instead of wrapping each element with <div>.
    • The image is not decorative and the alt attribute should have at least a short description.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • ryangholland• 170

    @ryangholland

    Submitted

    This was a pretty easy one. The biggest challenge was getting the active state working for the NFT image.

    I combined two backgrounds for the hover state: a low-opacity gradient and the image itself. I gave the eye SVG a normal state of hidden and used a pseudo class combined with a child selector to make it visible when hovering over its parent container.

    For those that have completed the challenge: how did you code your image's active state? Was your method much different than mine?

    NFT preview card component with Grid and Flexbox

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, regarding your comment:

    • Here I leave another way in case you want to take a look: the ::before pseudo-element can be used to add the color and icon to the image. Using position, width and height to cover the image and grid to center the icon. Then opacity to hide/show.

    Note: The image is not decorative and therefore it shouldn't be a background-image (it needs an alt attribute with at least a short description).

    .nft-image {
position: relative;
}
.nft-image::before {
content: url(images/icon-view.svg);    
background-color: hsla(178, 100%, 50%, 0.5);
position: absolute;    
width: 100%;
height: 100%;
display: grid;
place-content: center;
opacity: 0;
}
.nft-image:hover::before {
opacity: 1;
}

    This may also interest you:

    • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with <a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    1
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋🏻, some of this may interest you for future projects:

    • Consider using a good semantic structure with headings, paragraphs, etc. instead of <div> and <span> (the only two elements that have no meaning).
    • When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, the image should be wrapped with <a> or <button> (depending on what happened when clicking on it), and also 'Equilibrium #3429' and 'Jules Wyvern' should be wrapped with the <a> tag.
    • This image is not decorative and therefore it shouldn't be a background-image (it needs an alt attribute with at least a short description).
    • It is better to use min-height: 100vh as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

    I hope it’s useful : )

    Regards,

    0
  • Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋, some of this may interest you:

    • An unordered list <ul> could be appropriate for the statistics.
    • It is better to use min-height: 100vhas using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).
    • Think about using Relative Units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default), consider this suggestion especially for the font-size.
    • It might be good to get used to designing with the Mobile First approach (which means designing for mobile first and then for desktop or any other device) as it is widely considered best practice.
    • To color the image more easily and with less code you could use the mix-blend-mode property that specifies how an element's content should blend with its direct parent background:
    .img-container {
background-color: hsl(277, 64%, 61%);
}
.img-container img {
mix-blend-mode: multiply;
opacity: 0.75;
}

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0
  • Masroor Khan• 50

    @EduCreative

    Submitted

    Hi Developers

    I find the mobile to desktop approach in this one a bit tricky but overcome with some practice.

    Please check and suggest me improvements.

    Regards

    M.Khan

    Responsive Stats-Preview-Card-Component

    1

    Fer• 3,990

    @fernandolapaz

    Posted

    Hi 👋, some of this may interest you:

    HTML:

    • Consider using a good semantic structure with headings, paragraphs, lists, etc. instead of wrapping each element with <div>. For example, you could use <main> for the card, <h1> for 'Get insights...' and <ul> for the stats.
    • Remember that the <picture> element is ideal to show different images depending on the device or screen size:
    <picture>
<source media="(min-width: 1440px)" srcset="images/image-header-desktop.jpg">
<img src="images/image-header-mobile.jpg" alt="">
</picture>

    CSS:

    • The page content could be centered using min-height: 100vh for the body and removing margin: 28% 0px from the card.
    • Note: you could consider using a smaller breakpoint to move from mobile to desktop (something between 800 and 1000px maybe).
    • The font size in the desktop version seems too small.
    • Think about using Relative Units since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

    I hope it’s useful : )

    Regards,

    Marked as helpful

    0