Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
9
YasserAO
@YasserAO

All comments

  • Melissa Martins•150
    @MellTins
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?
    • I liked making a table at the end, but I believe that having used an would have given the expected result.
    What challenges did you encounter, and how did you overcome them?
    • the thread dots are a burgundy color and I couldn't replicate that.
    What specific areas of your project would you like help with?
    • Tips on how to write code better and cleanly.

    Recipe page with html5 e css3

    1
    YasserAO•330
    @YasserAO
    Posted about 1 year ago

    good work

  • venugopal challa•30
    @venu9757
    Submitted about 1 year ago

    SocialLinksProfile

    1
    YasserAO•330
    @YasserAO
    Posted about 1 year ago

    nice work

  • Gokulakrishnan G•30
    @DUMBLEDORE01
    Submitted about 1 year ago

    Responsive blog-preview card using HTML and CSS

    2
    YasserAO•330
    @YasserAO
    Posted about 1 year ago

    Keep going

    Marked as helpful
  • iliasminas•30
    @iliasminas
    Submitted about 1 year ago

    qr card component

    1
    YasserAO•330
    @YasserAO
    Posted about 1 year ago

    the image is already presented in ur file, no need to use an externel link, just use '/filename/image.png'

  • P
    One Solo•490
    @Kasim-Ke
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    all feedbacks are welcome

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

    backround colors.. googlet how to

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

    JS :SSS

    006_result_summary

    1
    YasserAO•330
    @YasserAO
    Posted over 1 year ago

    congrats,

    Feel free to engage into taking some JS courses, it's really fun creating interactive designs.

    Marked as helpful
  • joanna broad•100
    @JoannaBroad
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm pleased with how this project turned out. It went smoothly overall, with only a few minor hiccups along the way. Fortunately, I was able to navigate through them without much trouble. I feel confident in the outcome and the skills I've developed throughout the process

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

    I believe I need to dedicate some more time to understanding how to center elements on a webpage, as it's a concept I struggle to recall easily

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

    over all what do you think? does the blue work.

    My socials

    #accessibility#sass/scss
    2
    YasserAO•330
    @YasserAO
    Posted over 1 year ago

    Definitly yea , it works

    congrats on ur Project

    Simple Trick About Mixing Colors, in your exemple you've chosen Blue and the project Background is Darker (Dark grey), in order to make your Content more eye-catching make the blue more Brigther, basicaly, using colors that contrast make things pop and look better.

    Give it a try! and see if it works.

    Marked as helpful
  • Saran•20
    @Sarank20
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I stack with margin, then i solved it

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

    I stack with margin, then i solved it

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

    check my mobile version of my project and help me to solve the issue

    blog-preview-card-main

    2
    YasserAO•330
    @YasserAO
    Posted over 1 year ago

    Hello, @Sarank

    The problem consists of using a fixed values of width in your containers which is not advisable for a responsive design. because when you use a @media query you will have to redefine every single item.

    The solution would be to use a relative width like % and vw, and Center the container using either flex parent or adjusting the margin.

    example(using margin to center)

    main {
    width:90% ;  //this means no matter what my window size it , it will always leave a 20% of white space.
    margin : 0 auto ; //0 is for top and bottom , it will do nothing, auto is to center the item between left and right
    }
    // now lets do some queries
    @media(min-width:375px){
     width : 360 px;
    }
    @media(min-width:768px){
     width : 400 px;
    }
    

    1. With the Code above, if my window width is under 375px (small screen sizes) the main width will be always 90% of window's width, which is gonna take all the Device screen as expected without crashing our content (10% of space is left and spread over the margins).

    2. If the window is at least 375px or higher the main-width = 360 px ,If the window is at least 768px or higher the main-width = 400 px. Ofcourse you can add more queries if the it seemed very small for higher window sizes.

    hint: you can apply this to the content of main, so that it would change relative to the main container, and that's how you'll get the responsive look.

    i hope this comment helped, good luck.

  • Aish•60
    @wajasha02
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Finally completed this challenge as well. I would like to optimize the code further by using more semantic HTML elements and organizing the CSS more efficiently

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

    One challenge I faced was ensuring consistent styling across different screen sizes while maintaining responsiveness.

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

    I would appreciate guidance on how to improve accessibility, further optimize code efficiency, and ensure responsiveness.

    Social Links Profile

    1
    YasserAO•330
    @YasserAO
    Posted over 1 year ago

    hello @Aish,

    here are my segguestions,

    -Improving Accessibility:

    Ensure all interactive elements can be easily navigated via keyboard and provide descriptive ARIA roles where appropriate. Additionally, use semantic HTML elements such as <nav>, <header>, and <footer> to enhance the structure and meaning of your content for assistive technologies and users alike.

    -Enhancing Code Efficiency:

    Optimize CSS by employing efficient selectors, such as direct child selection and descendant selectors, to reduce redundancy and improve performance.

    -Ensuring Responsiveness:

    Utilize relative units like percentages and ems for sizing elements for ex: width:80%, coupled with media queries to create responsive designs that adapt seamlessly to different screen sizes and devices for ex: @media(min-width:320px){ } @media(min-width:768px){ }. Test thoroughly across various devices and browsers to ensure consistent performance and user experience.

    Marked as helpful
  • P
    One Solo•490
    @Kasim-Ke
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    All feedbacks are welcome! :D

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

    All feedbacks are welcome! :D

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

    All feedbacks are welcome! :D

    004_social-link-main

    1
    YasserAO•330
    @YasserAO
    Posted over 1 year ago

    Instead of <Button> tag you can use <a> tag which allows you to Link your social media platform with the help of href="" attribute, the sytanx is like follow:

    <a href="https://www.example.com">Text Goes here </a>

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub