Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
36
Comments
226

Bryan Li

@Zy8712Canada3,530 points

Aspiring Full Stack Developer. A fast, passionate, self-motivated learner who consistently seeks out new opportunities for growth and development.

I’m currently learning...

NextJS, Typescript, MongoDB, Jest.js, Vitest, Angular

Latest solutions

  • 🍲 Recipe Page 🍲

    #sass/scss#accessibility

    Bryan Li•3,530
    Submitted about 1 year ago

    0 comments
  • 🚀 Space Tourism Website 🚀


    Bryan Li•3,530
    Submitted over 1 year ago

    0 comments
  • Clipboard Landing Page

    #sass/scss

    Bryan Li•3,530
    Submitted over 1 year ago

    0 comments
  • Ping Coming Soon Page


    Bryan Li•3,530
    Submitted over 1 year ago

    0 comments
  • Room Homepage

    #sass/scss

    Bryan Li•3,530
    Submitted over 1 year ago

    0 comments
  • Huddle Landing Page w/Alternating Feature Blocks


    Bryan Li•3,530
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • demaxs26•250
    @Demaxs26
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Hi ! I hope my solution is correct. Is the paragraph problematic because there is only two line ? Should I have used a flex box ?

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

    /

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

    /

    solution to QR code challenge

    2
    Bryan Li•3,530
    @Zy8712
    Posted about 1 year ago

    Hi there! Congrats on finishing your first challenge!

    Some things I would suggest you to alter/change:

    • instead of using <h2>, you should use the <h1> tag as headings are meant to be used in order from <h1> to <h6> without skips. The headings come with default font sizes that can be changed using the font-size attribute in css
    • to center the white card you can do something like this for the parent container which in this case is your <body> element:
    body{
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
    }
    

    Hope you find this feedback useful 👍

    Marked as helpful
  • Vien•30
    @pblanabelle
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of achieving a cohesive and functional design with the Social Links Profile Page. Next time, I would prioritize upfront planning and accessibility considerations, seeking more feedback to refine my skills and ensure inclusivity in web design.

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

    none

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

    I don't know. Maybe a comment to improve my codes.

    Social Links Profile Page utilizing HTML and CSS

    2
    Bryan Li•3,530
    @Zy8712
    Posted about 1 year ago

    Hi there! Your site looks pretty good.

    The main things I'd alter/change with your code are:

    • using a <main> tag to improve accessibility
    • using a <h2> tag instead of a <h5> tag as headings are meant to be used in order from h1 to h6 without skips
    • leaving the alt description of the image empty like alt="" as descriptions are mainly used for images that convey important information. Decorative images can just have empty alt

    Aside from that your site looks great!

    Marked as helpful
  • P
    yinnie•320
    @wcyin9
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm sort of happy I was able to make it responsive, but there's lots of areas where I can improve on in terms of the code when it comes to responsive design.

    Next time I might try to do mobile first approach, where I code out the mobile view first then expand on the larger sizes.

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

    There were two areas that I struggled with:

    1. adding padding within ul/ol, as well as aligning the text. I was able to solve it by using list-style-position: inside and ::marker to decorate the bullet points. In terms of aligning the text, I discovered that position: relative helped me add space between the bullet points and the paragraph. text-indent in combination with padding-left made the paragraph align on the left
    2. responsive sizing on mobile screen. I used fixed sizing in the original code, so I struggled with making it responsive in the mobile view. I solved this by using em/%. Next time I'll try to not depend entirely on given sizes by the Figma design, and use responsive units of measurement instead.
    What specific areas of your project would you like help with?

    I feel as if my code could be condensed more, but I'm not sure how. There were a lot of repetitiveness that I could do without. In addition, I don't know if I overdid it with the classes and tags in the html.

    If there's better approaches to responsiveness than what I wrote, please let me know. I will gladly take criticism from any weak areas you may spot.

    Responsive Recipe Page CSS

    #accessibility#animation
    1
    Bryan Li•3,530
    @Zy8712
    Posted about 1 year ago

    Your site looks pretty good. The main thing I'd change is that I would've used a table for the nutrition section so it would've been easier to format everything. Your code could look something along the lines of this:

    <table>
       <caption>
                The table below shows nutritional values per serving without the additional fillings.
       </caption>
       <tr>
            <th>Calories</th>
            <td>277kcal</td>
       </tr>
       <tr>
            <th>Carbs</th>
            <td>0g</td>
       </tr>
       <tr>
            <th>Protein</th>
            <td>20g</td>
       </tr>
       <tr>
            <th>Fat</th>
            <td>22g</td>
       </tr>
    </table>
    
    Marked as helpful
  • P
    Gab•170
    @gab-holik
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    Any feedback is appreciated. Thank you 🙂

    Social proof section challenge

    1
    Bryan Li•3,530
    @Zy8712
    Posted about 1 year ago

    Hi there! Your site looks great and follows the original design closely. Nice work!

    Some things I'd suggest you to change with your code:

    • for decorative images you should leave the alt description empty like alt="" as screen readers will read anything that is in the alt descriptions. Meaning in your case it'll read things like "one star", "two star", "Customer image of Irene Roberts", etc
    • alt descriptions for <img> tags should mainly be used for images that convey some important information

    Aside from that your code structure looks great. Hope you find this feedback useful 👍

    Marked as helpful
  • LeandroJr730•60
    @LeandroJr730
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud of making the website "work" on mobile devices by my own, just by searching the basics on the internet. I need to learn how to use semantic tags better, so my code is easier to read.

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

    I spent a lot of time trying to get the perfect margins, paddings, etc. I should do it faster and focus more on other things. I also struggled to make my website work on mobile devices but it ended up kind of working.

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

    I need to use better semantic tags and improve the way my website is displayed in mobile devices.

    Blog Preview Card

    2
    Bryan Li•3,530
    @Zy8712
    Posted about 1 year ago

    Hi there! Your site looks pretty good.

    Some things I would recommend you to change/modify with your code:

    • you should use a heading tag like <h1> for the title of the card and you should also use a <p> paragraph tag for the text of the card. This is primarily for semantic and accessibility purpsoes
    • for <img> tags you can leave the alt decription empty like alt="" as descriptions are mainly used for images that convey some important information. So decorative images can be left empty

    Aside from these two things, you've got solid code structure 👍

    Marked as helpful
  • Svitlana Em•190
    @svetikbaihe
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am not quite proud of myself in this project, frankly speaking. It took a lot of time for doing simple things because of the inattentiveness and lack of practice.

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

    I definitely had challenges with sizes and the general understanding of the necessary positions of an element, like, what I need to do to place it in the right place on the page. I just tried different things, like removing width and height on certain elements, using flex and removing it again. In the end, I managed to make it look like as it does in Figma.

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

    It'd be grateful for any feedback, any advice on html structure, how to organize things on the page, how properly use width and height, maybe some advice about using different units and values( px, vh, em, rem).

    Responsive design for a QR-code component

    1
    Bryan Li•3,530
    @Zy8712
    Posted about 1 year ago

    Hi there! Congrats on finishing your first challenge, your site looks great!

    Some things I feel like you could change/modify with your code:

    • instead of using an <h2> tag you should use an <h1> tag as headings are meant to be used in order from h1 to h6 without any skips. They all come with default font sizes that can be changed in css with the font-size attribute
    • for the height of your <body> I would recomment using min-height: 100vh as opposed to height: 100%, as its standard practice and gives you the desired result in almost every scenario
    • for you <img> you could leave the alt description empty in most cases unless the the image conveys some important information that needs to be read out by screen readers (not too sure how it would work in this case with a qr code though)

    Aside from that your code structure is excellent and your site looks virtually identical to the original design. Nice work 👍

    Marked as helpful
View more comments
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

Mentor of the Week - 1st Place

This badge is awarded to the top placed community member on the weekly Wall of Fame.

Mentor of the Month - 1st Place

This badge is awarded to the top placed community member on the monthly Wall of Fame.

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

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

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