Bamo-D-Abdallah

Latest comments

• 

  P

  Daniel Basilio•420

  @danielbasilioSubmitted 9 months ago

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

  I'm very proud of the responsive layout made using CSS grid. In the future I would focus on improving the separation of components within sass

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

  I hadn't yet worked effectively with CSS Grid. It was quite interesting and fun

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

  I believe that in the implementation of itcss and functions within sass

  

  Responsive Meet Landing Page using sass and css flexbox

  #accessibility#itcss#sass/scss

  1

  30
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  It is almost pixel perfect.

  0
• 

  beowulf1958•1,630

  @beowulf1958Submitted 9 months ago

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

  This is version two. I added the missing box-shadow, fixed the font colors, and cleaned up the CSS

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

  I had a bit of trouble at first to get a card to span two rows. Eventually researched the problem and CSS tricks showed me how.

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

  None at the moment, but anything to improve will be appreciated

  

  Responsive page with CUBE and BEM vanilla html, CSS

  #accessibility#bem#cube-css

  1

  20
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  You added BEM hashtage which means you have used BEM class name style but I don't see any.

  BEM is block__element--modifier style.

  0
• 

  Carsten Körner•170

  @carstenkoernerSubmitted 12 months ago

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

  I am proud of my first project with grid. I don't know what I should do differently next time.

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

  I found some tutorials and especially a cheatsheet for Grid on the Internet. It helped me a lot.

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

  -/-

  

  Responsive four card feature section using grid

  #sass/scss#bem

  1

  40
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  Nice solution.

  0
• 

  AymaneOnline•330

  @AymaneOnlineSubmitted 8 months ago

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

  I took way more time than needed on this challenge, so inshallah I'll try to be faster next time.

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

  This was a good challenge, as it differs from the other challenges from the learning path with the presence of two images one for desktop and another for mobile. It took me some time to figure out how to make it work when I deployed it on GitHub.

  First, as I've been using the mobile-first design I put the mobile image on the HTML with the `` tag and then changed it with a media query, it did work locally but not on deployment. So to make it work, I've put both the desktop and mobile images on the html file, and using the media query I've changed the display property from "none" to "block" and vice versa and that resolved the problem.

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

  I've got a problem concerning the performance of this page on mobile devices as I couldn't surpass 93/100 score on Lighthouse. I tried to change the image format from .jpg to .webp which dropped the image size by nearly 50%, and I also changed the fetchpriority attribute of the images using both values "low" and "high" but it didn't work. I would love to get some help from you guys on that.

  

  Product preview card component

  #sass/scss#lighthouse

  1

  60
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  it is better to use rem instead of px.

  0
• 

  Mystique(Nyo)•20

  @Mystique9901Submitted 8 months ago

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

  I didn't know that I can use 100% height with html tag to center the card. I guess it become a little easier than before.

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

  It took me almost an hour to finish. I think I need to practice more.

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

  I always have trouble with deciding the width and height of the card. I don't know what percentage it should be.

  And if there is any advice you want to give me, warmly welcome.

  

  social-link-profile-solution

  3

  80
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  Block level elements have 100% width by default and I don't overwrite that, instead I use @media (min-width: some_screen_size) then inside it I will set max size the width can get for bigger screen sizes and always use rem:

  @media (min-width: 35rem) {
    .card {
      max-width: 15rem;
    }
  }
  
  @media (min-width: 45rem) {
    .card {
      max-width: 18rem;
    }
  }
  

  Never use height, min-height, and max-height on elements, it is the job of the browser desige what height they should have based on their content.

  Also you can give the links and the card itself some padding to make them more readable and look better.

  Marked as helpful

  0
• 

  Itoro (Celine) James•200

  @CelineJamesSubmitted 8 months ago

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

  i am getting better with using CSS, i am proud of that.

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

  i had the challenge of designing the links, could not quite decide if i should use buttons or just links, i used buttons and then wrapped the links inside the buttons however i had difficulty styling it. so i had to use just the links and style them like buttons.

  

  flexbox, media queries

  #accessibility

  3

  60
  

  P

  Bamo-D-Abdallah•320

  @Bamo-D-AbdallahPosted 8 months ago

  A button does some functionality on the web page.

  But link navigates you somewhere.

  In the project they are links leading you some other place so you made the right decision to use links.

  Some CSS notes:

  • avoid uisng px, use rem instead.
  • there is no need to set height on your elemets.
  • don't set fixed width in the normal design, set max-width in @media to control the width of the element in different screen sizes.

  Marked as helpful

  1