Skip to content
OverviewSolutions
29
Comments
242

Fer

@fernandolapazUruguay3,970 points

Self-taught frontend developer. I try to make each solution fully responsive, pixel perfect (or close to it) and navigable with mouse, keyboard and screen reader. With as little code as possible and following good practices.

Latest solutions

View more solutions

Latest comments

  • turboo-sy•250
    @turboo-sySubmitted 11 months ago
    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,970
    @fernandolapazPosted 11 months ago

    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
  • Fer•3,970
    @fernandolapazPosted about 1 year ago

    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,970
    @fernandolapazPosted over 1 year ago

    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,970
    @fernandolapazPosted over 1 year ago

    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,970
    @fernandolapazPosted over 1 year ago

    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,970
    @fernandolapazPosted over 1 year ago

    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
View more comments