Skip to content
OverviewSolutions
17
Comments
19
P
Bamo-D-Abdallah
@Bamo-D-Abdallah

All comments

  • Daniel Basilio•390
    @danielbasilioSubmitted 5 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

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    It is almost pixel perfect.

    0
  • beowulf1958•1,450
    @beowulf1958Submitted 5 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

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 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 7 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

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    Nice solution.

    0
  • AymaneOnline•330
    @AymaneOnlineSubmitted 4 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

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    it is better to use rem instead of px.

    0
  • Mystique(Nyo)•20
    @Mystique9901Submitted 4 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
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 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•160
    @CelineJamesSubmitted 4 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

    3
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 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
  • lewleu•10
    @lewleuSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    First project as I'm ;earning html and css

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

    Align the image and text into its block

    Flexbox model

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    Stay away from using px and use rem instead, especially for font-size because you are removing the ability of the users that can't see small text to increase the size through their browser.

    Why font-size must NEVER be in pixels

    Marked as helpful
    0
  • Abdallah Aboelsaoud•220
    @Saoud2021Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    i learned alot during this project and i even add some tweaks in the learning tag and the profile picture of the author

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

    the challenge was in the text as i wasn't quite sure how to categories them but i was able to add the arrow which points to the child directly

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

    i think my projects are wide and it's scale is larger than the original designs and i am not sure how to scale it down a little bit

    Blog preview card with some tweaks

    4
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    Doesn't look too wide to me, you shouldn't aim for 100% match.

    But I strongly advice avoid using id as CSS selector, the only time I use ID is when I target the element in JS, never in CSS, use class selectors intead.

    Marked as helpful
    1
  • RachelAbit•80
    @RachelAbitSubmitted 4 months ago
    What specific areas of your project would you like help with?

    I'm having trouble styling the table the way the example shows, I really don't have any idea.

    Recipe

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    For the table columns (td) set some padding so that the will be some space between the content and its border.

    Then set border-bottom for all the td s excep the last one:

    td:not(:last-child){
  border-bottom: solid %100 some_color;
}

    Everything else looks excellent but avoid using px, instead use rem and em.

    0
  • Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    Avoid using height, let the browser provide the height for the element based on its content.

    Avoid using px, use rem and em instead.

    Marked as helpful
    1
  • Anja Teisman•130
    @DubbelteisSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the change of pictures from a large screen to a small screen.

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

    It took me a lot of time to get the picture on the right size to fit the container. Again with some help of my son it turned out to be pretty easy.

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

    No specific help needed this time but comments for improvement are always welcome.

    product-preview-card

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    It is better to use rem and em than px.

    0
  • Gonzalo Marco•110
    @gmarco10Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    First attempt, maybe some accessibility improvements must be added. I also have to check if it behaves correctly for every screen size. I'd probably use media-queries.

    Still have to publish the app

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

    Center the item properly

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

    accessibility, responsiveness

    First Challenge: QR component

    1
    Bamo-D-Abdallah•300
    @Bamo-D-AbdallahPosted 4 months ago

    Using rem or almost anything other than px is a lot better, use rem especially for font-size.

    0