Haitham Abdulhamid

Latest comments

• 

  P

  Micha Huhn•200

  @MichaHuhnSubmitted 8 months ago

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

  • I made the card responsive by using a media query and by using fluid design. The card's width automatically adapts to the viewport on mobile screen sizes.
  • I used semantic HTML, e.g. nav, ul.
  • I implemented proper hover and focus-visible states.
  • I also used the q tag to create the quote.

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

  First, I centered the card with this code:

  display: grid;
  place-content: center;
  

  But that caused the card to shrink. However, the card should have a bigger width on desktop (see mockup). That's why I only centered the card vertically with this code:

  display: grid;
  align-items: center;
  

  and applied a max-width-wrapper class to the card to center it horizontally and to make it responsive. This technique is explained in this YouTube video.

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

  I think I found a good approach to center the card and to make it responsive (see above). However, let me know if you know a better solution.

  

  Social links profile using Vue

  #sass/scss#vue#accessibility

  3

  20
  

  Haitham Abdulhamid•210

  @Leo-yagamiPosted 8 months ago

  Im not sure if you know the flexbox technique. You basically set the main-card component to display flex and use align-items and justify content to center the component vertically and horizontally. Something like this:

  .social_card{
     display: flex;
     align-items: center;
     justify-content: center;
  }
  

  Marked as helpful

  0
• 

  shriyamamidela•50

  @shriyamamidelaSubmitted 8 months ago

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

  i am most proud of the layout which i figured very fast

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

  i encountered challenges in the making the page responsive part. I am just very bad at understanding how to make the page responsive for the mobile design and still cannot figure out without googling for help. i just used google for making the page responsive.

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

  i need help in the making the page responsive for the mobile version part. its just very hard and i dont understand how to do it.i tried understanding it again but yeah its very hard to understand how to do.Please recommend any videos or resources for understanding the page responsive part

  

  product-preview card using CSS flex box

  1

  40
  

  Haitham Abdulhamid•210

  @Leo-yagamiPosted 8 months ago

  Kevin Powell has a good course on responsive layouts.

  Link: https://courses.kevinpowell.co/conquering-responsive-layouts

  Ur welcome bud : )

  0
• 

  MBA PERCY•10

  @edoumpsSubmitted 8 months ago

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

  I think i did my best to really replicate the authentic design.

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

  I don't kwon why the images are not displayed when i launch my solution on github.

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

  Javascript

  

  blog card preview

  2

  30
  

  Haitham Abdulhamid•210

  @Leo-yagamiPosted 8 months ago

  The solution to this problem is in the path. If you don't use the period(.) at the start of the image path, the engine will search for the image starting from the root folder which you obviously don't want. To indicate that you want the search to start from the current directory where all your files are, just add the period at the start of the path like this:

  <img src="./assets/images/avatar-jessica.jpeg" alt="profile photo"/>
  

  0
• 

  Peter Godspower•710

  @TheBeyonder616Submitted 8 months ago

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

  well practicing

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

  none really

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

  any advice

  

  A responsive card created using flexbox

  1

  50
  

  Haitham Abdulhamid•210

  @Leo-yagamiPosted 8 months ago

  You forgot to set the font-family to the one provided in the resources. First import the "Inter" font from google fonts. Then type this in your CSS file:

  body{
     font-family: "Inter", sans-serif;
  }
  

  Hope it helps : )

  Marked as helpful

  0
• 

  Haitham Abdulhamid•210

  @Leo-yagamiSubmitted 8 months ago

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

  Being able to apply min-width to the card container so that it doesn't decrease by size every time i resize the view-port.

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

  Applying responsive layouts without the designing breaking every 100px-200px. I used min-width to solve that.

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

  Being able to write standardized media queries and what common styles am I supposed to focus on when using media queries.

  

  Product Preview Card using HTML and CSS

  2

  40
  

  Haitham Abdulhamid•210

  @Leo-yagamiPosted 8 months ago

  @Alex-Archer-I See, the problem I mainly faced was that when I didn't use min-width, my design would break very frequently. This required me to make twice as many media queries as I used now. If I am understanding correctly instead of making my container width not move using min-width as a resize down, I should use max-width to make my design stop expanding at a certain width to preserve the design.

  0
• 

  Vuoch369•20

  @Vuoch369Submitted 8 months ago

  

  Social link profile using HTML and CSS solution

  1

  20
  

  Haitham Abdulhamid•210

  @Leo-yagamiPosted 8 months ago

  It seems your main div is horizontally centered but not vertically. You can achieve both horizontal and vertical centering using flex-box. You can write this for example:

  .body{
       display:flex;
       align-items: center;
       justify-content: center;
  }
  

  Hope this helps :)

  0