All comments

• 

  jcoms2003• 100

  @jcoms2003

  Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  Getting my first project done. I hope to continue using frontend mentor to improve my front end development skills.

  What challenges did you encounter, and how did you overcome them?

  Trying to figure out how to vertically center the container. After some research I found a way using margins and "top"/"left".

  What specific areas of your project would you like help with?

  I couldn't figure out how to get the google font to work for some reason. If anyone can see the issue that'd be awesome.

  

  Horizontal and vertically centered QR code using margins

  1

  30

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 3 months ago

  Hello @jcoms2003

  Your solution looks great!

  You have to use font-family: "Outfit", sans-serif instead of font-family: "Outfit" in your CSS.

  Also, you can use Flexbox to position your elements.

  Here is a great guide Flexbox.

  I hope it helps.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  ayeniDan• 150

  @ayeniDan

  Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I'm most proud of the hover section on the cube image. It was difficult but I was able to pull it off. Even though it's not perfect, it's progress

  What challenges did you encounter, and how did you overcome them?

  I had issues with the hover on the cube image but i was able to solve it using help from MDN webdocs and a little bit of background knowledge on positioning and psuedo-elements

  What specific areas of your project would you like help with?

  I need help to make the hover on the cube better

  

  nft-preview-card-component-main

  1

  50

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 3 months ago

  Hello @ayeniDan

  Your solution looks great!

  you can use pseudo-element such as ::before and ::after to create an overlay.

  Here is an example Youtube video.

  I hope it helps.

  0
• 

  Austine Odanga• 150

  @OketchOdanga

  Submitted 7 months ago

  I found adding the images for the desktop and mobile challenging . Any help on how it can done smoothly

  

  News-homepage using HTML Css and JavaScript

  1

  30

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 7 months ago

  Hello, @OketchOdanga

  There is a tag that offers alternative versions of the same image for different displays. It's called the 'picture' tag.

  Here is the example Picture tag in mdn.

  I hope it helps

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  valeushu• 50

  @valeushu

  Submitted 7 months ago

  How do they take measurements of the elements without having Figma?

  

  Time tracking dashboard - HTML CSS JS

  1

  61

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 7 months ago

  Hello, @valeushu

  Your solution looks great!

  You can use tools or extension such as:

  • powerToy (on windows)
  • pixel perfect (on browsers)

  note: powerToy has a screen ruler for taking measurements.

  I hope it helps.

  Marked as helpful

  2
• 

  Eve• 60

  @evsta24

  Submitted 8 months ago

  Hi, it was my first project, so every feedback is appreciated :). Thank you!

  

  Results summary component using HTML & CSS

  3

  30

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 8 months ago

  Hello, @evsta24

  Your solution looks great!

  Just need to add HTML semantic tags for your next project.

  Leaving you a blog that explains why. freecodecamp and semrush.

  I hope it helps.

  PS: Sorry about my English; I'm still learning.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  vernonroque• 60

  @vernonroque

  Submitted 8 months ago

  Here is my completed project of the age calculator.

  I want to ask everyone how you included the leap year in your calculations. Any suggestions?

  

  Age calculator with html, css, and jquery

  3

  60

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 8 months ago

  Hello, @vernonroque

  With the next function, you can retrieve the days of each month.

  function daysInMonth(month, year) {
      return new Date(year, month, 0).getDate();
  }
  

  I hope it helps.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  OsatohanmwenT• 760

  @OsatohanmwenT

  Submitted 8 months ago

  1.could someone help me with the the input element border or outline problem i am having

  

  newsletter-sign-up-with-success-message-main

  1

  40

  

  Alfredo Peguero Capellan• 590

  @AlfredoPegueroC

  Posted 8 months ago

  Hello, @OsatohanmwenT

  Your solution looks great

  This is the solution to the border error

  • Element with class list that includes both #newsletter-input and error-border.

  #newsletter .news-input #newsletter-input{
      padding:  15px 20px;
      border-radius: 5px;
      border: none;
      outline: 1px solid black;
  }
  

  #newsletter .news-input #newsletter-input.error-border{
      outline: 1px solid red;
  }
  
  

  • Tips

  1. Learn how to use pseudo-elements such as ::before and ::after; this will help you display error messages.
  2. The structure of labels Label mdn

  I hope it helps

  PS: Sorry about my English; I'm still learning.

  Marked as helpful

  0