Jas

Latest comments

• 

  Vincent Dao•100

  @Squ1ntySubmitted about 1 month ago

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

  I am most proud of being able to finally incorporate a media query to begin exploring responsive design. I managed to match the mobile design fairly well and have a highly responsive layout. However, asides from that milestone, I think next time I will cut down some of my CSS, looking back it seems that I have quite a bit of redundancy in my CSS code.

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

  I encountered a slight issue with chrome devtools when trying to view my project at a smaller screen size, but that resolved itself pretty quickly. Asides from that no issues arose at all.

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

  Any CSS tips are of course greatly appreciated, especially if it has to do with common practices that I am overlooking/ not implementing.

  

  Responsive CSS Layout for Recipe Page (Formatted for Desktop & Mobile)

  1

  30
  

  Jas•210

  @ajasmine94Posted about 1 month ago

  Hello! Great job in making it almost identical!! A little bit of what I noticed in your CSS script is the following:

   .recipeInfoContainer{
      padding: 0 2.2rem 0 2.2rem;
    }
    .ingredientsContainer{
      padding: 0 2.2rem 0 2.2rem;
    }
    .instructionsContainer{
      padding: 0 2.2rem 0 2.2rem;
    }
    .nutritionContainer{
      padding: 0 2.2rem 2.2rem 2.2rem;
    }
  

  since 3/4 of these has similar padding, you can actually class them together, like just using a class called section-container or something and then putting the padding css there, in that way you can just use the same class on your HTML / div elements.

  I think flexbox might also help in shortening your script, you can check it out here

  Hope this helps! Have a good day

  1
• 

  Daniyal Abbassi Khervi•110

  @daniyal-abbassiSubmitted 4 months ago

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

  it's the second project that i actually "did"

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

  There are some challenges with tags, about how to hover them and change colors for the text and background.

  

  Responsive Social Links Profile

  1

  30
  

  Jas•210

  @ajasmine94Posted 4 months ago

  Hi, you did a great job in completing this challenge too! I would just like to leave a few things that I think might help improve the code :)

  • Try to learn Flexbox for easier centering of the container on the page so you won't have to set or fix the margins for each side.
  • You can also learn the use of viewport height (vh) to set the height of the Body element which will eventually help with your positionings.
  • for the following section:

  #git:hover, #front-mentor:hover, #LinkedIn:hover, #Mastodon:hover, #Instagram:hover {
      background-color: hsl(75, 94%, 57%);
  }
  

  It is better to use a class for them since git, front-mentor, linkedin, and so on - all have the same type of element - a button :)

  • And lastly, as part of the best practices when writing a code, it is best to start your IDs or classes with the camelCase or lowercases with hyphens :) Try to also use a more descriptive and consistent naming conventions such as socialLinkButton or social-link-button, and so on.

  I hope these helps! Have a great day / night!

  Marked as helpful

  0
• 

  Gihan Elsayed•10

  @gihannazmySubmitted 5 months ago

  

  recipe page

  1

  00
  

  Jas•210

  @ajasmine94Posted 5 months ago

  Hi! Great job on finishing this too :) If you'll allow me, I'd love to leave a few feedback that I think might help with the solution.

  • for the background, you could set the properties using the body {} element on your css file. You could refer to the style-guide.md file for this.
  • By adding the above element on your css file, it might also be a good idea to add margin:0 to remove the default margin set by the browser (in case).
  • I think that it would be easier to use Flexbox (or use this Guide) in centering your container element.

  Have a good day!

  Marked as helpful

  0
• 

  P

  newspaceracer•140

  @newspaceracerSubmitted 5 months ago

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

  It's my first official project trying to replicate an existing interface with html and css only. I think really thinking about the image and breaking it down into areas and labeling the areas in a way that made sense was critical to not get lost.

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

  One of the main challenges was centering everything, and once that was centered, how to make sure that the card information and the attribution element were vertically aligned instead of next to each other. The column orientation of the flex attribute was very helpful to learn about.

  

  QR code component using flex display

  2

  20
  

  Jas•210

  @ajasmine94Posted 5 months ago

  Hi, I think you did well on re-creating the reference image. So far, what I noticed is the site did not seem to have read the font family you used. I also recommend using a fallback font when using font-family. I.e. font-family: 'Outfit', sans-serif.

  Marked as helpful

  0
• 

  Antoine•20

  @antoineba35Submitted 5 months ago

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

  I did pretty well, but I'm still having trouble with the positions.

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

  I had to do some Internet research to help me with the div positions.

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

  On positiond (flex, display...) please

  

  Page profil HTML CSS

  2

  50
  

  Jas•210

  @ajasmine94Posted 5 months ago

  Hi! I think you did well in using the current CSS functions to copy this design. I believe it would help to set the width and min-height properties on the body and then use Flexbox for your card for easier positioning

  0
• 

  Yassin Amr•170

  @justXeeZSubmitted 5 months ago

  

  Recipe page using simple CSS and HTML

  1

  30
  

  Jas•210

  @ajasmine94Posted 5 months ago

  Great! You've really made your work close to the source and I think I learned a thing or two from your script instead. ^^

  1