All comments

• 

  francis835• 10

  @francis835

  Submitted 7 months ago

  The challenge helped me more with my HTML and CSS skills as a Front-end developer and again I'm also a new member here and it's my second time completing the challenge. I'm hoping to do more of the challenges.

  

  Mobile first recipe page in HTML and CSS

  2

  80

  

  Rawan Mohamed• 130

  @rawannmmohamed

  Posted 7 months ago

  Great job ! Keep up the good work !

  0
• 

  Deepak kumar• 20

  @silentknight06

  Submitted 7 months ago

  give me the best way to complete this project?

  

  i have used css(flex, padding, margin etc)

  2

  50

  

  Rawan Mohamed• 130

  @rawannmmohamed

  Posted 7 months ago

  hello,

  you can give the scanner div a fixed width of pixels I recommend 300px.

  and you forgot to add the font family to the texts.

  Marked as helpful

  0
• 

  PerseveranceM• 10

  @PerseveranceM

  Submitted 7 months ago

  My Question is, what could I have done better?(Please look at my code and advice me.

  

  QR component using HTML and CSS

  3

  50

  

  Rawan Mohamed• 130

  @rawannmmohamed

  Posted 7 months ago

  Hello , good job!

  i would suggest giving the body a full height to fit the screen and give it a flex to center everything inside it .

  body {

  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  

  }

  and don't forget to add 100% height to the main-div to fit the body.

  happy coding !

  0
• 

  Patrick Odida• 30

  @Patrickodida

  Submitted 7 months ago

  While building this component, I used an <h3> heading for the first part of the sentence and a <p> element for the second part. Is it best practice to do that, or should I have used a <p> element throughout and a <span> element for the second part of the sentence? Thanks.

  

  Mobile First Design using HTML and CSS

  4

  80

  

  Rawan Mohamed• 130

  @rawannmmohamed

  Posted 7 months ago

  i would suggest using <h1> for the first part and give it the size you want and <p> for the second part .. it is better for accessibility to start with <h1> rather than <h3> .

  and span will create an inline element it won't be good to use it in this case.

  for more accessibility tips read this :

  https://www.frontendmentor.io/articles/10-fundamental-web-accessibility-tips-for-frontend-developers-rUurADGxCt

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Trumpibeabuchi• 30

  @Trumpibeabuchi

  Submitted 7 months ago

  

  Omelette Recipe using HTML and CSS only (VScode)

  1

  30

  

  Rawan Mohamed• 130

  @rawannmmohamed

  Posted 7 months ago

  hello, great job ! You could try to give the body 100% height and apply display : flex to center the container and to make it more responsive.

  body {

  background-color: rgb(250, 236, 231);
  font-family: Outfit;
  display: flex;
  height: 100vh;
  justify-content: space-around;
  align-items: center;
  

  }

  and don't forget to remove the absolute positioning for container.

  .container {

  background-color: white;
  border-radius: 18px;
  width: 500px;
  padding: 25px 20px;
  

  }

  and adding media queries would be better for responsiveness.

  you are doing very well , keep going !

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Shuhratov Suhrob• 100

  @ShuhratovSuhrob

  Submitted 7 months ago

  

  Had some difficulties to center everything.Would love any kind of help

  4

  20

  

  Rawan Mohamed• 130

  @rawannmmohamed

  Posted 7 months ago

  Hello, you can solve this problem by setting the container width to 300px to make it fixed.

  have a nice coding !

  0