Intro section using HTML5 & Flexbox

Community feedback

• 

  imad•3,330

  @imadvvPosted about 2 years ago

  Greetings Nour Al-Osman!! Congratulations on completing Your 3rd challenge!, 👏👏👏. well done.

  I take a look at your code and have some general suggestion for you, Hope you found it useful.

  I don't know if you know this but when You're using flex you have access to the gap Property, which let you add spacing between rows or columns very easy, so can add a spacing to social media icons just like so .social-icons { gap : 1rem;}, and also for the button or actually on general when You have a :hover style on interactive element also include :focus to it, that for the keyboard users when they are navigate with the tap and focusing over that element the styles that apply on hover will apply on focus too, something like this .reg-btn:hover , .reg-btn:focus {...},

  and for your question this is document form a11y-101 has an excellent explanation to this question , but the simple rule is to use <a> for Links and navigation between Pages/Views, and <button type=""> for actions that have a function to handle it.

  this page for example the social-media should be a <a> tag because they are link to a social media pages and <button> for reg-btn because normally they are a function that will run when user click to register.

  " I try my best on this, please correct me if am wrong, I'm on the learning process "

  but over all, Happy Codding Rusty Man, Have a Good Day/Night

  Marked as helpful

  1

  ---

  

  Nour Al-Osman•60

  @nalosmanPosted about 2 years ago

  @imadbg01 Hi, thanks for the feedback! I appreciate it! Went back and fixed some of the spacing and width issues.

  0