"Some how made it work"_Single price grid component

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi KT,

  Welcome here, well done :D

  According to your questions:

  • you can use the span tag inside of the p tag, I did two paragraphs but in my opinion I could use the p with span inside of it (I think it is even better);
  • of course, these challenge can be done by using the grid. The best idea is to start from mobile first => one column, then create only one @media for tablets and get the final design pattern. It is very easy to center element (check google, ask the question => proper research will be the main key of our work as a developers in the future);

  Also, I have checked your project, mainly the HTML structure by using the inspector in my browser, a few tips below:

  • this is a single page component so you can add the h1 tag with two spans inside of it (main-heading and sub-heading) or h1 and h2 in the first box;
  • instead of the h5 I'd suggest to use the h2;
  • instead of a button I'd recommend using a link. Check this article from the blog CSS-tricks: => A Complete Guide to Links and Buttons;
  • in the third box instead of using many p tags you can add ul > li;
  • names of classes are not readable and descriptive => the BEM naming convention can be a nice solution here;
  • check a project on different devices in your browser by the inspector. The problem appears because you have added an explicit width to the main tag and card. That's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink.

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  2

  ---

  

  KT•390

  @KtGitItPosted almost 4 years ago

  Greetings, SzymonRojek,

  Thanks a lot for your feedback!!! Thanks for taking a time to do this. This is exactly what I was looking for when I asked for feedback. This is very detailed and super helpful.

  Best regards, KT

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @KtGitIt

  I am satisfied you like it.

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

  • flexBox;
  • grid.

  Thanks for upvoting my comment.

  Happy coding :D

  0

  

  KT•390

  @KtGitItPosted almost 4 years ago

  @SzymonRojek

  I enrolled in those two courses yesterday after I submit my challenge. I found those two courses and much more in resources section of this website. Pretty good list of free and paid resources.

  Thanks again!

  0