Skip to content
OverviewSolutions
9
Comments
4

Riccardo

@riccardofano240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Riccardo•240
    @riccardofano

    Hello Erwin, you can position the cards using CSS grid!

    On the desktop version you'll see there are 3 columns of equal size. Then there are what might appear to be 3 rows but in reality there are only 2, the cards on the side start at the first row but span 2, they are then centered. On the mobile version there's only one column so you can change the grid accordingly.

    I hope this was helpful, take a look at my solution if you need any pointers.

    Marked as helpful
  • Riccardo•240
    @riccardofano

    Hey José, good job on this challenge already, but it would be a great way to learn how to use CSS grid!

    If you look at the design of the desktop version you'll see there are 3 columns of equal size.

    Then there are what might appear to be 3 rows as well but in reality there are only 2, the cards on the side start at the first row but span 2 and then are centered. On the mobile version there's only one column so you can change the grid accordingly.

    Hopefully this was helpful, take a look at my solution if you need any pointers.

    Marked as helpful
  • Riccardo•240
    @riccardofano

    Hello Murray, good job on the challenge!

    Regarding your question about svgs: I personally use <img src="picture.svg" /> whenever I don't need to modify their color but I want them to take up space in the document so I can position them as you would with any other element in the dom. background-image is used when I don't want it to occupy physical space, it just needs to be in the background.

    You can look at this blue Slack banner under the comments for reference, the first line is an img tag, while the dark blue logo in the bottom right corner is in a background-image. One takes up physical space, the other does not.

    An inline svg is for when you want to take up space and modify its properties with CSS, like your dropdown arrow. Depending on how the svg was made you'll want to modify either the fill or the stroke, you can look at the actual file to know for sure.

    <svg class="icon" width="10" height="6" xmlns="http://www.w3.org/2000/svg">
    <path stroke="#686868" stroke-width="1.5" fill="none" d="m1 1 4 4 4-4"></path>
</svg>

    As you can see the stroke is a color while the fill is none so in this case you'll want to modify the stroke.

  • Riccardo•240
    @riccardofano

    Hello Melad, excellent job on getting the javascript working!

    I wanted to let you know there's an easier way to validate an email, in fact, the browser already does it for you. Instead of checking if inputText's value matches the regular expression you can just access inputText.validity.valid thanks to having set <input type="email">. It does the exact same thing but it's a lot less work for you!

    Having set input as type="email" also allows you to style css elements by accessing its :valid or :invalid state so if you want to add a red border if your input is invalid you could do

    .base-input:invalid {
    border: 1px solid red;
}

    You can take a look at my solution for more details. Hope this was helpful and have a wonderful day!

    Marked as helpful