My first challenge. I choose to use two stylesheets, one for desktop and one for mobile. Furthermore I choose to give everything fixed widths in pixels, so it doesn't distort when the size is adjusted. Is that normal practice?
Hi Ido,
Nowadays most people use different devices to browse websites. You don't know the exact dimensions. So it's common now that we use adjustable widths, so the website can be viewed with any size.
This will give you more information about responsive design.
Keep on coding 🔥!
Hello all,
here is one more solution for newbies. I´ve already applied some of the comments that I receive from last project.
Hi Migmcc,
Your HTML structure is perfect. No comment about that 👏🏼
You probably need the most work on your CSS.
I hope you can find some solution to make this project even better!
Keep on coding 🔥!
Using feedback from my last submission I have focused on writing semantic HTML as well as reducing the amount of CSS that I write.
Also, the first time I've tried matching the design without the PixelPerfect extension.
Please leave feedback if you find anything I can improve on it.
Cheers.
Hi Dean, great job! It's even a match without PixelPerfect 👏🏼!
Your HTML is semantic almost perfect. The only suggestion I have is that you use h3 before h2. I made this mistake myself sometimes!
Also there is still a little bit of redundant code. You might find this usefull:
<header class="singleprice__header">
<h2>Monthly Subscription</h2>
</header>
<header class="singleprice__header">
<h1>Join our community</h1>
<h2 class="yellow">30-day, hassle-free money back guarantee</h2>
</header>
.singleprice__header {
h1 {
...
}
h2 {
...
&.yellow {
...
}
}
}
Nevertheless, great work! Keep on coding 🔥!
This is my first project. Any feedback around my code would be much appreciate!
Hi Darren,
How was working on your first project?
I think you did a great job! Working with Bootstrap is (still) a nice to have for a lot of employers. But for small projects I think it's a downside, because it's has to load the entire bootstrap framework and you will only use a small part of it.
You can speed up this page by using only Gridbox and Flexbox instead of bootstrap.
The only thing I can suggest on your code is your indent. A good use of indent ensures a readable structure. Minor indent mistakes in your CSS as well.
Keep on coding 🔥!
Anybody knows how to repeat the star multiple times (without inserting the image 5 times in the html) ? I tried using background-repeat: space but it doesn't let adjust the space between the stars.
How is it overall? I feel like I've written too many lines of css code.
Hi Yemisrach, I love your work 👏🏼!
You have a great eye for detail I can see 😉! I like to see how you handled the responsiveness, great work!
I think you should try to make a .star element in your CSS and replace the img's with <div class='star-icon'></div>. This way the page only need to download the SVG once. But you still have to insert the element 5 times.
I think the HTML is pretty clean. Good indent, so it's nice to read. You should consider using Sass. It can reduce the lines of CSS significantly and it's easier to maintain. So especially for bigger projects it's a must have!
Keep on coding 🔥!
any suggestions will be appreciated
Hi Senpai! Great work, the API is working 👏🏼!
I can only suggest to spend a little bit more time on your margins, paddings and font-size. It will help to make this project looks more like the design.
Keep on coding 🔥!
Feedbacks are welcomed 🤗
Hi Animashaun!
I've been working on the same project this day 😄!
You have a great start. It looks like you started mobile first. Your mobile version is quite perfect. I like that! And you JS is nice and clean!
I think you should spend a little bit more time to make this project fully responsive. Using Gridbox in combination with Flexbox can help you a lot! And since your JS is perfect, try to add the keyboard arrows to control the slider.
Keep on coding 🔥!
Nice job! Overall it's really close.
The only thing I would recommend is to use headings. The big text: '10.000+ of our users love our products.' should be a H1 and don't use <br> to break the words. Just give the H1 tag a specific width.
And don't forget to assign an alt tag to each image 👊🏽
