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

Submitted

HTML, CSS, Bootstrap

Ali Elmala 155

@alielmala

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Could you review my work. I will appreciate your opinion.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Ali,

Welcome here, well done :D

I have checked mainly your HTML structure, a few tips from me:

  • I'd recommend reading more about semantic tags, headings;
  • we can not skip the headings and have to put them gradually (outline algorithm): Join our community can be the h1, and rest of them h2: 30-days, hassle-free money back guarantee, Monthly subscription, Why us or create h1 with two spans (main-heading: Join our community and sub-heading 30-days...);
  • rest of the sentences should the p;
  • instead of div id="right" class="col-lg-6" you can use ul > li;
  • the br tag is not needed here;
  • names of the classes are not readable => I'd learning BEM naming convention;
  • using ID's instead of classes it is not a good practice;
  • please check your project by the inspector in your browser => responsiveness doesn't look well on different devices (margin).

Greetings :D

2

Ali Elmala 155

@alielmala

Posted

@SzymonRojek Thank you very much for your helpful tips. I will rewrite the code using the tips and If you recommend any tutorial that will help me, I hope You give the link. thank you again. any helpful tips on how to make better responsiveness ?

0
Ali Elmala 155

@alielmala

Posted

@SzymonRojek I upvoted it. thank you very much.

1
Szymon Rojek 4,540

@SzymonRojek

Posted

Firstly it is good to start to learn flexbox, amazing tool => when you will be confident with it, start to learn GRID. You will see how amazing they are and powerful together.

I can recommend two courses providing by Wes Bos for free:

Thank you for upvoting my comments on here that you find helpful.

Greetings :D

1

Ali Elmala 155

@alielmala

Posted

@SzymonRojek Thank you very much for your tips. they are really helpful

1
Szymon Rojek 4,540

@SzymonRojek

Posted

@tux-0

Last think. It will be good to learn CSS vanilla firstly (leave frameworks for a while), get it know very well => Lots of people are saying that CSS is very easy.. they are wrong. CSS is very tricky and also amazing technology. It takes time to learn all this stuff - for example width and height. When you are using flex box or grid you don't have to in many cases give to the elements explicit width or height - it is better to use min-height, max-width - of course, all depends on situation, sometimes you have to give height 100%, or width 100%. Anyway learn slowly, don't rush, step by step :D

1
Ali Elmala 155

@alielmala

Posted

@SzymonRojek Thank you very much

1
Gorgee 85

@iamgorgee

Posted

Hi. The only thing that I could suggest is for the fonts. You can find fonts here in this link https://fonts.google.com/?preview.size=20.

0

Ali Elmala 155

@alielmala

Posted

@iamgorgee I have done that but I don't why it didn't show at the beginning. You can see it now. thanks for your feedback

0
Gorgee 85

@iamgorgee

Posted

Hi again. Here is a tutorial where I learned importing fonts https://www.youtube.com/watch?v=Hwq_Mr12bcI I hope this could help.

1
Ali Elmala 155

@alielmala

Posted

@iamgorgee thank you

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord