Skip to content
OverviewSolutions
7
Comments
7

defPhisy

@defPhisy140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • testimonials-grid-selection

    defPhisy•140
    Submitted 11 months ago

    What can i improve of my grid code?

    1 comment

  • four-card-feature-section

    defPhisy•140
    Submitted 12 months ago

    Not sure if it was a good idea to make the responsive font-size just in the body. Maybe it is better to apply different responsive font-size adjustments for headings and text. What do you mean?

    1 comment

  • product-preview-card

    #accessibility
    defPhisy•140
    Submitted 12 months ago

    I still do not know what the problem is. Just want to adjust the image simply with flex. Thought i could easily set the image and the description 50/50 in width.

    1 comment

  • Recipe Page

    #accessibility
    defPhisy•140
    Submitted 12 months ago

    I'm still not sure if my styling of lists and tables is optimal. The same applies to the media query with the changed image layout on the mobile phone. Would appreciate feedback on these issues, as well as anything else.

    1 comment

  • social-links-profile

    defPhisy•140
    Submitted about 1 year ago

    Tips how to improve the @meadia element or maybe a better option where it is not needed. What are best practices?

    1 comment

  • Blog preview card

    defPhisy•140
    Submitted about 1 year ago

    Everything what i can improve.

    But for now i think you can help me with the avatar img, that does not load on the github page. locally everything works.

    Due to the missing avatar image i found out that the alt text cannot be shown because the avatar is so small. Is that effecting screenreaders? I guess not but maybe there is a workaround.

    3 comments
View more solutions

Latest comments

  • defPhisy•140
    @defPhisy

    Looks great Michael 👍

    • Does the solution include semantic HTML? Yes!

    • Is it accessible, and what improvements could be made? Yes, you had the same accessibility issue with h2 😂. Nice hack with h1 hidden. I was to lazy for that. For screenreader it is redundant to use a alt text for the images. They have no meaning you have already the name in h2. I would omit the alt text.

    • Does the layout look good on a range of screen sizes? Yes, you could improve the transition between your mobile and desktop a bit better. When reducing screen size form desktop to mobile around 1080px width your layout shrinks. At this point it is not responsive. The font-sizes getting very small.

    • Is the code well-structured, readable, and reusable? Yes!

    • Does the solution differ considerably from the design? Yes, an improvement would be better matched font-sizes and font-weights

  • defPhisy•140
    @defPhisy

    Hey Hoaxilog, your solution looks great:

    • Does the solution include semantic HTML? Yes!
    • Is it accessible, and what improvements could be made? Yes, but i would suggest to leave the alt text from the svg icons, because i think they are just cosmetic and screenreaders don´t need this information, they already get it from the headings.
    • Does the layout look good on a range of screen sizes? Yes, i like your middle layout with 2x2 cards. Only your mobile view could get a bit tweaking. The headings have to little line height.
    • Is the code well-structured, readable, and reusable? Yes.
    • Does the solution differ considerably from the design? The font-weight of your normal text is a bit off.
    Marked as helpful
  • defPhisy•140
    @defPhisy

    Wrong challenge upload? 🤔

  • defPhisy•140
    @defPhisy

    Hi Emir, great work the card is very close to the design, looks very good.

    • Does the solution include semantic HTML? Yes, good use of lists and table. Try to use more semantic elements like section and article instead of divs. That concerns me too 😁.

    • Is it accessible, and what improvements could be made? I am too inexperienced to give you tips here. From my point it is ok, since there is no interaction on the site. Beside that you could improve your alt text on the omlette picture. "img" is not very descriptive.

    • Does the layout look good on a range of screen sizes? Desktop size looking great, except the white bar on the bottom and the missing margin on top of the card. When you have a look on the design files the mobile version should have a different layout. you can work with media queries to solve that. You should consider to use less px an more relative measures lite rem to ensure a responsive design.

    • Is the code well-structured, readable, and reusable? Yes. Is there a reason why you use <span> elements on all links?

    • Does the solution differ considerably from the design? The card itself looks very good. You should improve the padding on the body to give some margin at the top and bottom of the card. The background also needs to be continuous. You do not want the white bar on the bottom.

    Keep up the good work. 👍

  • defPhisy•140
    @defPhisy

    Hey Victor your solution looks great. Might be a bit late but i have some proposals/notes:

    Does the solution include semantic HTML?

    Yes, but i would suggest to replace the <button> elements with <a> elements because buttons should be used for on page actions only. For example a form submission or a modal. Anchor elements are supposed for external links that route you to another page.

    Is it accessible, and what improvements could be made? No, you cannot navigate with your keyboard to all the links. Anchor elements in your buttons could solve it. You can also play with the :focus preudo-class. Antoher improvement could be better contrast between your buttons and the background.

    Does the layout look good on a range of screen sizes? Yes.

    Is the code well-structured, readable, and reusable? Yes.

    Does the solution differ considerably from the design? No, your font is not correctly loaded. Use instead of:

    src: url(/assets/fonts/static/Inter-Regular.ttf) format("ttf");

    the correct format "truetype"

    src: url(/assets/fonts/static/Inter-Regular.ttf) format("truetype");

    Hope that helps.

  • UMo0HU•80
    @UMo0HU
    What are you most proud of, and what would you do differently next time?

    I am proud of developing my search skills to overcome the problems I face.

    blog-preview-card-main

    1
    defPhisy•140
    @defPhisy

    Great Job.

    To make your html more semantic u can use instead of <div> elements like <article>, <header>, <footer>, <main>, ... There is a good overview on w3schools.

    I think you can improve your css-reset. For example omit padding: 0; on the star selector for your css reset. I read fantasstic articles form Josh Comeau and Andy Bell about modern css reset. Made my own css-reset.css based on theses articles in this project.

    Another great advise i got: Why font-size must NEVER be in pixels

    Hope i could help you a bit. Keep going ;)

    Marked as helpful
View more comments