Skip to content
OverviewSolutions
10
Comments
19
py-code314
@py-code314

All solutions

  • Responsive Time Tracking Dashboard using CSS Grid

    #accessibility#bem#sass/scss#van-js#gulp
    py-code314•430
    Submitted 28 days ago
    1. Right now I have a very limited knowledge about how to use aria attributes. So if anybody can go through my HTML markup and point out errors or can suggest some good resources regarding use cases I would be grateful to them
    2. I'm using Voice Over as a screen reader and after the user reaches last stats card, focus is changing to the end of list and then main but I want the focus to go to buttons container (similar to focus cycle with Tab key).I've tried to change focus by adding different aria attributes but it didn't work. I appreciate any help with that
    3. I've refactored JS code a lot and I hope it's better organized. Any suggestions for improvement are welcome
    1 comment

  • Responsive Sign-up Form using Flex

    #accessibility#bem#gulp#sass/scss
    py-code314•430
    Submitted about 1 month ago

    1. I really appreciate some feedback on my using 'aria-attributes'. I tried my best but I'm not sure I'm going in the right way

    2. I used <dialog> element to show the Success message and then applied some styles to it to make it exactly like in the design. Keeping in mind the Accessibility features, is this the best approach or should I just use a regular <div> ? (Accessibility Report telling me that <dialog> is not supported in all browsers 🤷🏼‍♂️)

    3. Any suggestions to improve JS code is welcome especially functions checkValidity() and showError(). Anyway I can improve those?

    4. After I submitted my solution, Accessibility Report notifying me that role="list" and role="listitem" are not necessary for <ul> and <li> respectively. Please advise!

    Thanks in advance

    2 comments

  • Responsive and Interactive Article Preview Component using JavaScript

    #bem#gulp#sass/scss
    py-code314•430
    Submitted about 2 months ago
    1. Is using of tag <article> for card semantically correct?
    2. I could not get the images in mobile and desktop views as exactly as they are in design files (They are a little bit zoomed out I guess). Appreciate any suggestions on how to make it happen. I’m using this code for the image:
    width: 100%;
height: 100%;
object-fit: cover;
    1. I tried my best to add aria attributes to social media div & share button. Feel free to point out any errors and suggestions!
    1 comment

  • Responsive Testimonial Cards using CSS Grid

    #bem#sass/scss
    py-code314•430
    Submitted 6 months ago
    1. Any advice on how to use BEM more efficiently
    2. Please let me know if I made any mistakes in using semantic HTML tags
    3. Any Sass advice on how I can use it to make the code DRY (for eg - use of mixins)
    1 comment

  • Responsive Web Page using CSS Grid

    #node#sass/scss#bem
    py-code314•430
    Submitted 6 months ago
    1. I defined widths for images in HTML and applied height: auto in CSS as part of Global Reset. Is there a better approach to this? Should I define both width & height in HTML itself?
    2. I've added aria-hidden attribute to images. Am I right to use it in this context?
    3. I'm still new to Sass, so any advice is welcome
    1 comment

  • Responsive Product Preview Card using CSS Flexbox and Grid

    #bem#sass/scss
    py-code314•430
    Submitted 7 months ago
    1. First time made a project using Sass. So any feedback is welcome
    2. Used width: 100%; height: 100% on to fully cover the container with image. Please let me know if there's a better way to do it
    3. I created mixins for strikethrough text so that screen readers can read it. Please go through the code and let me know if I've made any mistakes there
    2 comments

  • Responsive Recipe Page using CSS

    #bem
    py-code314•430
    Submitted 7 months ago

    This project is mostly about semantic HTML. Please go through my html code and let me know if I made any improper use of html tags

    1 comment

  • Responsive Profile Card using CSS Flexbox

    #bem
    py-code314•430
    Submitted 7 months ago
    1. I changed background & text colors as I didn't like the colors in design file. I hope the color contrast is acceptable
    2. I'm still not sure that I'm naming the classes and custom properties right way. I appreciate if anybody could help me with that
    3. I used clamp() for changing padding. Is this function can also be used for spacing in addition to change font-size?
    1 comment

  • Responsive Blog Preview Card using CSS Flexbox

    #bem
    py-code314•430
    Submitted 7 months ago
    1. If you are familiar with BEM naming convention please go through my HTML class names and let me know if I made any mistakes there!
    2. In my CSS, did I omit to include any required properties in @font-face?
    3. I'm very confused about how to name custom properties in :root. How should I name them(by color names/font size or position or functional)? Please point me in the right direction if you can
    1 comment

  • Responsive QR Code card using Flexbox

    py-code314•430
    Submitted 8 months ago
    1. I wrapped card image, title and text in individual divs. Is it advisable to do it this way or is there a better way to do it?
    2. Tried to use BEM nomenclature for class names. Please let me know if I made any mistakes!
    3. Little confused about the use cases of margins and padding. Is there any good resource out there which explains their proper use?
    4. Any alternatives to media queries so that I don't have to write them for every screen size?
    2 comments