All solutions

Hello coders,

This was a fun project to build. The only thing I came across was that when I give the body a height: 100vh;, the text from the h1 and p from the top text it shifted to the top and out of sight. Does anyone know why this happens?

How do you get that nice border effect without the curling edges on the cards?

Any feedback is welcome :)

Thanks, Danny

Hello coders,

This is my first big project...and i can tell you it gave me a headache...hahaha I still stuggling with @media and then especially with the sizing of the background-image and the first lager image of the display . When i resize it from 1440px to 375px it does not scale perfectly. Can anyone tell me how to scale it perfectly so that it looks nice?

Also have a question on naming elements with classes like for example <ul class="list-menu"> I see some youtubers giving almost every element a class name like this:

<nav class="menu">
 <ul class="menu-list">
    <li class="menu-list-link"><a href="#" >FAQs</a></li>
    <li class="menu-list-link"><a href="#">Contact Us</a></li>
    <li class="menu-list-link"><a href="#">Privacy Policy</a></li>
    <li class="menu-list-link"><a href="#">Press Kit</a></li>
    <li class="menu-list-link"><a href="#">Install Guide</a></li>
 </ul>
</nav>

<nav class="nav>
  <ul>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Press Kit</a></li>
    <li><a href="#">Install Guide</a></li>
 </ul>
</nav>

Is it not better for readability to do when you styling your html: .nav ul li then making for every li a class name .menu-list-link?

Hope to get some feedback!

Thanks!

Hello coders,

This was a fun one to build. I have a question about the width of the text: <p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!</p>

When I center it with text-align: center the width is not the same as the original from frontEndMentor.io. So what I did is, and i don't know if this is any good, is to give it a width: 238px and then margin: 0 auto. Is this a good way or is there another even better solution?

Would love to get some feedback!

Greetings, Danny

Hello Coders,

I would love to have some feedback on where to put the mobile design css code. Where is the best solution? Put it in a separate .css file? or at the end of the project styles?

Thanks in advanced! Danny

Hello again coders,

This challenge was a difficult one. Not so much on the design but the :hover effect. I've come to a solution but I don't think it's the best efficient solution.

Can someone help me to come with a better solution? Any feedback is welcome.

Thanks in advanced,

Danny

Hello Coders,

This is already my third design and this one was challenging but I had a lot of fun coding it.

What is the best way to approach the design? Is the best way mobile first or desktop first? I know that people now a days use their mobiles phones the most, so i would say, mobile first. But i find it harder to begin with mobile first.

In my css style.css at the bottom of al my code i have the code for de screen-size of 375px. Is that good practice to put it beneath my code or is it better to make a new file, name it screen-size-small.css and link it in the head of the html document like <link rel="stylesheet href="screen-size-small.css">?

I am also struggling what to use to make a layout, flexbox or grid. First i started with flexbox but i ran into some problems that the left and right side of the card where not excatly the same size. And also when resizing with flexbox the image got squeezed instead of scaling down. Then i tried css grid that worked alot easier. When do you use flexbox or grid or is that just your own preference?

I would like to get some feedback. :)

Thanks in advance,

Danny

Hello Coders,

My second project. Hope to get some feedback:) I had some trouble with positioning the bg-pattern-bottom.svg and bg-pattern-top.svg. When I resize my browser the two svg's are not resizing(shrinking) . How can I code this so that they size when I resize the browser?

Another question, on my image I have: img{ max-width: 100%; } When I use width: 100% the image gets bigger. Which one is the best option? and why.

Thanks for the feedback

greetings, Danny

Hello Coders,

This my first project and i hope to get some feedback on how to improve my code. I always struggle to pick the correct class names. Also having trouble picking the right HTML tags. I looked to some other examples and they use for example <section> tags.

I'm also curious what you think of my css code.

Greetings, Danny