Four card feature section Uisng Boot streap,HTML,CSS

Community feedback

• 

  geomydas•1,440

  @geomydasPosted 2 months ago

  I don't reccomend learning Bootstrap at this stage. Your fundamentals are still too messy and Bootstrap will only hinder the process

  Marked as helpful

  0

  ---

  

  kak23333•50

  @kak23333Posted 2 months ago

  I am using Bootstrap for responsiveness. If you don't recommend it, what should I use for responsiveness? And why shouldn't I use Bootstrap? Thanks.

  0

  

  geomydas•1,440

  @geomydasPosted 2 months ago

  @kak23333 bootstrap is ok but i dont reccomend using it since your code has still a lot of bad practicies and you should focus on the fundamentals before jumping into a framework. i dont get what you mean with responsiveness since you can do that with any css framework. ive had experiences before where i had to remove bootstrap in some codebases

  0

  

  kak23333•50

  @kak23333Posted 2 months ago

  Responsive means the page/website should be friendly to all devices. I am a beginner and I am learning Bootstrap basics. Try to change its code according to yourself. Can you recommend which framework I should use instead of Bootstrap as a beginner and Why?

  0

  

  geomydas•1,440

  @geomydasPosted 2 months ago

  @kak23333 i don't reccomend using a framework at this phase. your css has a lot of issues and using a framework will only hinder your learning. stick with plain css for now

  0

  

  kak23333•50

  @kak23333Posted 2 months ago

  ok I understrad but when i should leran it.How to make respossive

  0

  

  geomydas•1,440

  @geomydasPosted 2 months ago

  @kak23333 i reccomend checking out kevin powells course about responsive design. you would learn a framework when you are very confident and good with vanilla csss

  Marked as helpful

  0

  

  kak23333•50

  @kak23333Posted 2 months ago

  are your from india?

  0

  

  geomydas•1,440

  @geomydasPosted 2 months ago

  @kak23333 no

  0
• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 2 months ago

  Hi. This project is easier to do using grid, flex css will be more complicated in this situation. You need to add grid to div container, grid should have 3 columns and 2 rows. You can span 2 rows for side cards and align them to the center.

  Hope you found this comment helpful :)

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 2 months ago

  For a task like this its best to use CSS Grid, I recommend watching some YouTube videos about grid but you’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

  • Adding a <title> to your header,

  • Having a clear and descriptive alt text for images is important because it helps people who use screen readers understand the content, making your site more accessible. It also improves SEO, as search engines use alt text to understand the image's context, helping your site rank better, Check this out Write helpful Alt Text to describe images,

  • Developers should avoid using pixels (px) because they are a fixed size and don't scale well on different devices. Instead, use rem or em, which are relative units that adjust based on user settings, making your design more flexible, responsive, and accessible. For more information check out this, Why font-size must NEVER be in pixels or this video by Kevin Powell CSS em and rem explained.- Another great resource for px to rem converter.

  • Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

  • Using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM,

  • Using max-width: 100% or min-width: 100% is more responsive than just width: 100% because they allow elements to adjust better to different screen sizes. To learn more, check out this article: responsive-meaning.

  Great job taking the time to learn! Your efforts are paying off, and I hope these insights guide you to even more success. Keep pushing forward, and remember, you’ve got this! Enjoy your coding adventures! 💪

  0