Four card feature section

Community feedback

• 

  Rahul Baranwal•135

  @RahulbaranPosted over 3 years ago

  Hi Jyoti , I am Rahul. I think you have just started web development, there is no need to panic this is going to take time to understand many of the properties in CSS but that's okay with time you will see improvement in your code and will be able to understand all these properties , just keep reading articles, watch some videos in youtube, join some web development communities like available in slack or discord and keep asking questions. One thing I would like to focus on that whenever you have some issues related with your code then do google search since you already know it's the best place for getting answers.

  Now let's come to the issues I found in your code , there are many but I would point just the important ones:-

  1. By default all the browsers apply some margin and padding to html elements( tags) so you need to set them to 0 directly by mentioning it in the body selector or you can also use universal selector(*) .

  i. Read about margin and padding here :-https://www.thoughtco.com/css-zero-out-margins-3464247 ii. Read about universal selector here :- https://www.geeksforgeeks.org/what-is-the-use-of-asterisk-selector-in-css/ iii. Read about box model and box-sizing here https://www.udacity.com/blog/2021/04/the-css-box-model-explained-for-beginners.html?utm_source=rss&utm_medium=rss&utm_campaign=the-css-box-model-explained-for-beginners

  2. To align your "section" horizontally centered , you should specify a specific width to it and then set margin to 0 auto. Here are some resources related with this. Read here about margin:- https://stackoverflow.com/questions/3170772/what-does-auto-do-in-margin0-auto

  Do google search for more details about it .

  3. You need to grasp the concepts of grid system to align these cards properly , it's a huge topic and you will have to spend a lot of time to understand this. Read here about it https://css-tricks.com/snippets/css/complete-guide-grid/ You can download book based on grid system through the link I have provided below:- https://www.pdfdrive.com/grid-layout-in-css-interface-layout-for-the-web-e176071540.html (Here you can check out for other books if you want).

  4. No need to use transform property , applying grid system will do the job .

  I know there is a lot to read and also practice but these resources are definitely gonna be beneficial. here I have suggested some websites which will be quite helpful in your web development journey :-

  https://css-tricks.com/ (it is a great site for css and there are great articles here.) https://stackoverflow.com/(it had answers for your 99% questions on web development) https://developer.mozilla.org/en-US/docs/Web/

  That's all from my side, hope you become a great developer. Take Care and let me know you have something to ask.

  1

  ---

  

  ijyotimaurya150•40

  @ijyotimaurya150Posted over 3 years ago

  @Rahulbaran Thanks a lot, Rahul. These links are very helpful and needed for me to brush up on my skills. I will surely do more research and practice. Happy Coding!

  0
• 

  ijyotimaurya150•40

  @ijyotimaurya150Posted over 3 years ago

  okay! it looks better here but when I seeing the deployed version in GitHub, the alignment looks messed up. Is it a screen resolution glitch? can someone help me with that..?

  0

  ---

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @ijyotimaurya150 well between 1824px and 1402px the design looks correct. Your cards over all look good but I would recommend that you start the challenge over from scratch coding it with a mobile first approach. Get everything correct for 375px screen view and then add your media queries to make the layout look optimal for larger screen sizes. Grid-template-areas make it easy to position the cards as the screen size transitions larger

  0

  

  ijyotimaurya150•40

  @ijyotimaurya150Posted over 3 years ago

  @palgramming thanks for much-needed help. I was also confused about how to approach all these challenges. I will follow your advice now. 👍😊

  0