Huddle Introductory Section Using Bootstrap and SCSS

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hey,

  There's 2 way you could implement the circles:

  1. You can add them as a border around your icons and then play around with the padding a bit until it looks like a proper circle.

  2. You can add a ::before or ::after to the icons and set a border on those. This way you don't have to play with the paddings, just give it the same height and width and it will look perfect.

  I'd say both methods are valid so whichever you prefer.

  Your solution looks pretty good btw, just a few suggestions regarding your code:

  1. Dont use <br/> for line breaks, it's for something else. Use css to style your heading, give it a max-width, for example.

  2. Your social icons should be wrapped in <a> tags, then given aria-labels.

  3. Imports should be ideally at the very top of your css/scss.

  4. There's no need for a separate "bg" div, everything you have there could be just applied to the body.

  As a final tip, I'm not sure how familiar you are with normal css/scss but I'd definitely spend some time learning it before doing anything with Bootstrap. Bootstrap is a bit of an overkill for this project and all the extra divs makes your code a bit hard to read. That's just an opinion though, so feel free to do as you please! Happy coding ^^

  Marked as helpful

  2

  ---

  

  Fathul Irfaan Abdillah•320

  @thefathdevPosted over 2 years ago

  @FluffyKas Hey! Thank you so much for feedback, I really need it! There are several things that I am still not sure about css like ::before and ::after, and your explanation lighted me up. And, I'll definitely follow your tip to spend more time in css and scss. Once again, thank you! and happy coding ^^

  0