All comments

• 

  Akram Lahmouri• 20

  @AkramLah

  Submitted over 1 year ago

  Complete beginner here , feel free to review my css code and give me advices on how to improve (css file structure , clean code ect )

  

  QR-code desktop version (basic css + flexbox)

  3

  50

  

  P

  Gerardo Cianciulli• 190

  @GerardoCianciulli

  Posted over 1 year ago

  There are about a dozen html tag that you may want to use on a regular basis. Selecting the correct tag helps with SEO, CSS and javascript . Looking over your html I noticed the use of div, span and section in ways that can cause you trouble for more complex projects. Example

  <div class="title"> <span class="main_title">Improve your front-end skills by building projects</span> </div>

  should be

  <h1>Improve your front-end skills by building projects</h1>.

  This helps SEO "search engine optimization" by adding a heading level 1. It also helps you with your CSS. Since you can only ever use one H1 per html you don't need to create a title class and can style the H1 directly.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  magname• 60

  @magname

  Submitted over 1 year ago

  This is my solution for the interactive rating card component challenge.

  The problem that I faced?

  • The first container is not following the given margin when the window is resized but the second one does.
  • Why does the focus pseudo-class focus doesn't work with the div tag?

  CSS

  .buttons:focus{ background-color: hsl(216, 12%, 54%); }

  HTML

  <div class="buttons">2</button>
  <div class="buttons">3</button>
  <div class="buttons">4</button>
  <div class="buttons">5</button>
  
  This doesn't work so changed the div with the button tag
  

  

  Interactive-Rating-Component using Flexbox and JavaScript

  2

  10

  

  P

  Gerardo Cianciulli• 190

  @GerardoCianciulli

  Posted over 1 year ago

  To avoid cross browser bugs or default browser settings it is best to use the appropriate html tag for the job. Not all tags have a focus state until specified with the attribute "tabindex=0". However with this design your "Submit" should be a button and not a div. You would trigger a click event when the user hits the "enter" key.

  0
• 

  Buraq99• 30

  @Buraq99

  Submitted over 1 year ago

  I didn't know how to make the one-side box shadow and my media queries are not the best so what is the best practice

  

  Responsive Page Using HTML and CSS only

  2

  40

  

  P

  Gerardo Cianciulli• 190

  @GerardoCianciulli

  Posted over 1 year ago

  you are using @media (max-width: 375px) which would imply you are designing for desktop first and then you move into the mobile css within this block. It might be easier for you to try the reverse and start with mobile first as they tend to be the more finicky in my opinion. You can then use @media (min-width: 650px) which is a nice middle point between the mobile design and the desktop depending on how responsive you are looking to make either design.

  Marked as helpful

  1
• 

  Buraq99• 30

  @Buraq99

  Submitted over 1 year ago

  I didn't know how to make the one-side box shadow and my media queries are not the best so what is the best practice

  

  Responsive Page Using HTML and CSS only

  2

  40

  

  P

  Gerardo Cianciulli• 190

  @GerardoCianciulli

  Posted over 1 year ago

  For the box shadow it actually is on both sides. Because of how pale the shadow is and blurry the reference image is it can be hard to see. I used a photo editing tool to help me zoom in and see the details. I also cropped out sections and saved them as separate images and opened them in my browser to help me with the dimensions and placement of these elements since I did not have the figma file to see the crisp details. If ever you want me to show you via screen share what I mean as this might not be clear in writing please message me directly I'd be happy to show you.

  Marked as helpful

  1