Ahmad Osama Ashmawy Mohamed

Latest comments

• 

  carolsoutinho•110

  @carolsoutinhoSubmitted 2 months ago

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

  I would like help on how to centralize the entire container

  

  Testimonials Grid Section

  2

  10
  

  Ahmad Osama Ashmawy Mohamed•70

  @Ashmawy21Posted 2 months ago

  edit your code with this

  body {
      font-family: 'Barlow Semi Condensed', sans-serif;
      background-color: var(--Light-grayish-blue);
      color: white;
      display: flex;           /* Use Flexbox */
      justify-content: center; /* Center horizontally */
      align-items: center;     /* Center vertically */
      min-height: 100vh;       /* Ensure the body takes up full viewport height */
      padding: 0;              /* Remove padding to prevent any offset */
  }
  
  

  and tell me what is happen & if you don't understand tell me to explain it to you more

  0
• 

  LEO-Bloody-Sweet•290

  @LEO-Bloody-SweetSubmitted 7 months ago

  

  social link

  1

  10
  

  Ahmad Osama Ashmawy Mohamed•70

  @Ashmawy21Posted 2 months ago

  Overall Thoughts: Nice job! I can tell you've put a lot of effort into this. The design is clean, simple, and looks good overall. There are a few things you could tweak to make it even better, especially for responsiveness and accessibility.

  1. HTML Structure:

  • Everything looks great in terms of structure! The alt text is a nice touch for accessibility, but it could be more descriptive. For example, instead of just saying "Profile picture", try something like:

    <img src="./assets/images/avatar-jessica.jpeg" alt="Profile photo of Jessica Randall, Front-end Developer from London">
    

  2. CSS and Layout:

  • The flexbox layout works well, but the .content container's width: 120% might stretch it out too much. Maybe try 100% or max-width instead so it doesn't break the layout on different screen sizes.

  • For the image, instead of width: 50%, try a fixed pixel value like 150px. It’ll help keep the image size consistent no matter the screen size.

  3. Responsiveness:

  • Right now, the layout looks great on desktop, but for mobile, it feels a little cramped. A quick fix would be using media queries to adjust the layout:

    @media (max-width: 768px) {
      .content {
        padding: 5%;
        width: 100%;
      }
    }
    

  • For the text, it’s a bit small on mobile, so maybe bump up the font size a little to make it easier to read on small screens.

  4. Typography:

  • The font choices are great, but the paragraph text might be a little too light with font-weight: 300. Try switching it to font-weight: 400 to make it easier to read:

    p {
      font-weight: 400;
    }
    

  • For the headings (h2 and h4), adding a little more space between them would make it feel more balanced. Maybe something like margin-top: 1rem; would help.

  5. Button Styling:

  • I love the hover effects! It would be awesome to add focus states for keyboard users as well. Here’s a quick way to do that:

    .github:focus,
    .frontend:focus,
    .linkedin:focus,
    .twitter:focus,
    .instagram:focus {
      outline: 2px solid hsl(75, 94%, 57%);
    }
    

  6. Spacing & Alignment:

  • The layout is looking good, but you could make it even better by adding consistent spacing between the social media buttons. You can use the gap property in the .bottom container to space them evenly:

    .bottom {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    

  7. Accessibility:

  • Great job on adding the alt tag! To make things even more accessible, you could add aria-labels to the buttons. That way, screen readers will be able to read out what each button is for. For example:

    <div class="github" aria-label="GitHub Profile">GitHub</div>
    

  8. A Few Other Tweaks:

  • The contrast between the text and background is good, but you might want to double-check that it’s accessible for people with visual impairments. Making sure the colors meet WCAG guidelines would be a good move.
  • Test the layout on smaller screens and various resolutions to make sure nothing gets cut off or looks weird.

  ---

  You’re on the right track! The design is simple, stylish, and looks great. With just a few tweaks for mobile responsiveness, text readability, and accessibility, it’ll be even better. Keep up the awesome work!

  0
• 

  Julia Bush•360

  @juliabushSubmitted 2 months ago

  

  Blog Preview Card with HTML and CSS

  1

  40
  

  Ahmad Osama Ashmawy Mohamed•70

  @Ashmawy21Posted 2 months ago

  Great work! Here's some feedback to help refine your design ;)

  and ensure it aligns with the provided style guide:

  1. Layout & Responsiveness:

  • Current Design: The layout works well for the mobile view with a centered main container.
  • Improvement: While the design is centered, make sure to test the layout on various screen sizes (320px–1440px) to ensure it's fully responsive. Use media queries to adjust styles for different screen widths, especially for larger screens (desktop). For example:

    @media (min-width: 768px) {
      /* Adjust layout for tablets and larger screens */
    }
    @media (min-width: 1440px) {
      /* Adjust layout for desktop */
    }
    

  2. Colors:

  • Current Design: The use of yellow for accents and black text is on the right track.
  • Improvement: Ensure you use the exact colors from the style guide:
    • Yellow: hsl(47, 88%, 63%)
    • White: hsl(0, 0%, 100%)
    • Grey 500: hsl(0, 0%, 42%)
    • Grey 950: hsl(0, 0%, 7%)

  This consistency will ensure the design matches the provided style guide.

  3. Typography:

  • Current Design: The Figtree font is correctly imported, and font sizes are consistent for the most part.
  • Improvement:
    • Adjust the body text size to 16px for readability, as per the style guide.
    • For font weights, ensure the following:
      • For normal text: 500 (light)
      • For headings and important text: 800 (bold)
    • Example:

      body {
        font-size: 16px; /* Set the font size to 16px for body text */
      }
      h1, h2, h3 {
        font-weight: 800; /* Use bold for headings */
      }
      

  4. Spacing & Alignment:

  • Current Design: The spacing is clear, but some areas could use more attention for visual balance.
  • Improvement: Review the spacing around elements like the button, image, and avatar to ensure they are proportionate and aligned with the style guide. You can use the gap property within flex containers for better spacing control.

  5. Button Styling:

  • Current Design: The button is functional, but its hover state could be more prominent.
  • Improvement: Consider adding a hover effect for the button to make it more interactive and engaging:

    .card__button:hover {
      background-color: darken(var(--clr-yellow), 10%); /* Make the button darker on hover */
    }
    

  6. Images & Alt Text:

  • Current Design: The images are clear, but the alt text for both the main image and avatar is missing.
  • Improvement: Add descriptive alt attributes to the images to improve accessibility:

    <img src="assets/images/illustration-article.svg" alt="Illustration of a blog article" class="card__main-image">
    <img src="assets/images/image-avatar.webp" alt="Avatar of Greg Hooper" class="card__avatar">
    

  7. Content Accessibility:

  • Current Design: The content is clear, but ensure that it's fully accessible for users with disabilities.
  • Improvement: Double-check that the contrast ratio between text and background colors meets WCAG requirements (at least 4.5:1 for body text). You might need to adjust the grey tones or background color for better readability.

  8. Additional Suggestions:

  • Avatar & Attribution: The avatar and attribution section is working well. Consider adding more spacing around the elements to improve visual clarity and ensure the text is not too close to the image.
  • Text Clarity: Ensure that the card description (card__main-description) remains legible by tweaking opacity if needed, especially when viewed on different backgrounds.

  ---

  Overall: You’ve done a great job following the structure and creating a visually appealing layout. With a few tweaks to color accuracy, typography, spacing, and responsiveness, it will align perfectly with the style guide. Keep up the great work!

  0
• 

  maisatsuj•30

  @maisatsujSubmitted 2 months ago

  

  QR code component

  2

  50
  

  Ahmad Osama Ashmawy Mohamed•70

  @Ashmawy21Posted 2 months ago

  great job sis :)

  let me give you some advises

  Review of QR Code Component

  1. Semantic HTML

     • Good use of the <main> tag for content structure, but replacing the <div class="container"> with a <section> would improve semantics. The alt text for the QR code image is descriptive, which is excellent for accessibility.

  2. Accessibility

     • The text contrast is sufficient, but ensure the fonts used (like "Outfit Thin") have enough weight for readability. Using em or rem units for font sizes could enhance accessibility across devices.

  3. Responsive Layout

     • The layout centers well and scales effectively. However, testing on smaller screen sizes (e.g., below 320px) might reveal if text wrapping needs adjustments.

  4. Code Structure

     • The CSS is clean, but the font family Outfit Thin is undefined. Consider using a Google Fonts import for accuracy. Comments in the CSS could make the structure easier to follow.

  5. Design Consistency

     • The solution closely matches the design. Adding a hover effect on the QR code or tweaking the box-shadow for better interactivity could enhance the user experience.

  Keep going

  Marked as helpful

  1
• 

  mstitovgit•10

  @mstitovgitSubmitted 2 months ago

  

  qr-code-component-main

  1

  20
  

  Ahmad Osama Ashmawy Mohamed•70

  @Ashmawy21Posted 2 months ago

  great job brother ;)

  let me give you some tips and greets

  1. Semantic HTML

     • The structure is good, but replacing the <div> around the content with <main> could enhance semantics. Adding a more descriptive alt for the QR code image would also improve accessibility.

  2. Accessibility

     • While the design is visually appealing, adding meaningful alt text and ensuring sufficient contrast for text would enhance accessibility further.

  3. Responsive Layout

     • The layout looks great on various screen sizes, thanks to flexbox. The card remains centered and scales well.

  4. Code Structure

     • The CSS is clean and well-structured. However, adding comments for sections like .card or .text would improve readability and maintainability.

  0
• 

  P

  rainbowsurfer137•80

  @rainbowsurfer137Submitted 2 months ago

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

  I’m proud of how the card looks great on all screen sizes, especially mobile, and how I made it accessible with proper alt text and a focus state.

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

  Next time, I would focus on optimizing my code further. This includes reducing repetition in CSS by using more reusable classes and variables.

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

  • I’m trying to use the right HTML tags for accessibility and SEO. Are there any places where I could use more semantic HTML elements?
  • I want to make my code more efficient. Are there any areas where I could simplify or optimize my HTML, CSS, or overall structure?

  

  Blog Preview Card Component using Simantic HTML and Flexbox

  1

  20
  

  Ahmad Osama Ashmawy Mohamed•70

  @Ashmawy21Posted 2 months ago

  more than perfect

  0