All comments

• 

  David de Oliveira Silva•80

  @davidOliveira1995Submitted over 1 year ago

  HTML and CSS Basic

  

  Project using HTML and CSS | FlexBox

  2

  30
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to make your solution better.

  • Fix the issues that have been reported.

  • You can use a grid to center the content no matter the viewport size. You can do the following:

  body {
  	min-height: 100vh;
          display: grid;
  	align-items: center;
  	justify-content: center;
  }
  

  • Fix the issues that have been reported.

  I hope you find this helpful.

  Marked as helpful

  1
• 

  Vikash Maurya•310

  @VikashMaurya10Submitted over 1 year ago

  

  stats-preview-card-component-main

  2

  30
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to your solution to be better.

  • To color the image : Go to your HTML file and add a div at the bottom of the image

  <div class="color"></div>
  

  And in your CSS file

  img{
      height: 100%;
      mix-blend-mode: multiply;
  }
  .img{
      background-color: hsl(277, 64%, 61%);
      position: relative;
  }
  .color{
      background-color: hsl(277, 64%, 61%);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.2;
  }
  

  To understand better go to my solution maybe you can find it useful here is the 🌐 link.

  I hope you find this helpful.

  0
• 

  DHEERAJ PUJYAM•200

  @dheeraj-90040Submitted over 1 year ago

  

  Stats preview card component

  2

  20
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to your solution to be better.

  • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <h2> element. Each page should have at one <h1>.

  • To improve your skills in the responsive layout you have to begin with Mobile-first.

  • To color the image : Go to your HTML file and add a div at the bottom of the image

  <div class="color"></div>
  

  And in your CSS file

  img{
      height: 100%;
      mix-blend-mode: multiply;
  }
  .img{
      background-color: hsl(277, 64%, 61%);
      position: relative;
  }
  .color{
      background-color: hsl(277, 64%, 61%);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.2;
  }
  

  To understand better go to my solution maybe you can find it useful here is the 🌐 link.

  I hope you find this helpful.

  0
• 

  P

  Cloud Custodian•80

  @joeterleckiSubmitted over 1 year ago

  I have been learning web development off and on for 6 months and starting to get back into it. Please tell me how I did my first time getting back into HTML and CSS.

  Is there anything that stands out that doesn't belong? I tried to get the image exactly as defined and then looked at the Figma files. I think I got it pretty close.

  

  QR Component Vanilla HTML/CSS

  2

  40
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  There are a few changes you can make your solution better.

  • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <h2> element. Each page should have at one <h1>.

  • Fix the issues that have been reported.

  • To have a nice paragraph you can increase opacity.

  I hope you find this helpful.

  0
• 

  Lucian•20

  @JoaquimVicenteSubmitted over 1 year ago

  

  Perfume MediaQ

  2

  30
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to make your solution better.

  • You can use a grid to center the content no matter the viewport size. You can do the following:

  body {
  	min-height: 100vh;
          display: grid;
  	align-items: center;
  	justify-content: center;
  }
  

  • Fix the issues that have been reported.

  I hope you find this helpful.

  0
• 

  Aditya-768•50

  @Aditya-768Submitted over 1 year ago

  I easily made the outline of this challenge. But I took so much time to give it proper height and width and making it responsive. What do you think about its responsiveness? What are the areas I can improve in it?

  

  Responsive Qr-code using HTML and CSS

  2

  70
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to make your solution better.

  • It is better to set the background-color to your <body>, not some <div>

  • To have a better responsive page you can use a flexbox to center the content no matter the viewport size. You can do the following:

  body {
  	min-height: 100vh;
          display: flex;
  	align-items: center;
  	justify-content: center;
  }
  

  • Fix the issues that have been reported.

  I hope you find this helpful.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Nwajei Edgar•110

  @OtakuwindSubmitted over 1 year ago

  could not get the solution responsive, a problem i need to handle with more studies

  

  Stats-preview-card-component

  1

  20
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to your solution to be better.

  • You have to change the <div> in to <image> to have a better control to your images

  • To color the image :

  • Go to your HTML file and add a div at the bottom of the image

  <div class="color"></div>
  

  • And in your CSS file

  img{
      height: 100%;
      mix-blend-mode: multiply;
  }
  .img{
      background-color: hsl(277, 64%, 61%);
      position: relative;
  }
  .color{
      background-color: hsl(277, 64%, 61%);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.2;
  }
  

  • To understand better go to my solution maybe you can find it useful here is the link

  I hope you find this helpful.

  1

  This comment has received 1 replyShow
• 

  Jihane•140

  @JijinetSubmitted over 1 year ago

  

  3-column-preview-card-component-main using HTML & CSS

  1

  30
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  There are a few changes you can make to make your solution better.

  • You should use only one <h1> tag per page. The <h1> tag is the most important heading tag, This can confuse screen reader users and search engines. This challenge requires that Sedans, SUVs, and Luxury are headings, but you can use the <h2> tag instead of the <h1> tag.
  • Fix the issues that have been reported.

  I hope you find this helpful.

  Marked as helpful

  0
• 

  Mpano•20

  @mpanoathosSubmitted over 1 year ago

  

  QR code component

  2

  40
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hello there 👋. You did a good job!

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  There are a few changes you can do to make your solution better.

  • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <p> element. Each page should have at one <h1>.
  • Fix the issues that have been reported.
  • You have to change the font

  I hope you find this useful. Happy coding! 😄

  0
• 

  Laynoks•10

  @LaynoksSubmitted over 1 year ago

  

  qr-code-component

  2

  30
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hi, Laynoks! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  There are a few changes you can do to make your solution better.

  • Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <div> element. Each page should have at one <h1>.
  • Fix the issues that have been reported.

  I hope you find this useful. Happy coding! 😄

  0
• 

  mwergles•20

  @mwerglesSubmitted over 1 year ago

  

  QR code component

  2

  30
  

  Abdessamad•210

  @styrexxPosted over 1 year ago

  Hi! Mwergles You do a good work

  0