Skip to content
OverviewSolutions
20
Comments
11
P

Amy Spencer

@amyspencerprojectDurango, Colorado, USA360 points

I am Frontend Developer who loves to create, learn, and solve problems.

I’m currently learning...

Node JS, React Hooks, Tailwind, and Redux.

Latest solutions

View more solutions

Latest comments

  • P
    Amy Spencer•360
    @amyspencerprojectPosted 19 days ago

    Good Job! Your solution looks like the design. I wondered about your use of <article> and <section>. These elements are not necessary. You also used <p> instead of a list for the card links. Having a list keeps the content grouped together for a screen reader. You might want to explore guidelines for HTML semantics best practices.

    Happy coding!

    Marked as helpful
    0
  • P
    Coco•60
    @cocoelizabethSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I managed to implement a fully responsive and accessible blog preview card that aligns closely with the provided design specifications. I used semantic HTML to enhance the content's meaning and search engine optimization, and I focused heavily on accessibility to ensure the website is usable by people with disabilities.

    If I were to do this project again, I might explore using a CSS framework like Tailwind CSS to speed up the styling process and ensure consistency. Additionally, I'd consider integrating a light JavaScript functionality for dynamic interactions like expanding text or modal pop-ups to enhance user engagement.

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

    One of the main challenges was ensuring the design was fully responsive across different devices. I overcame this by using flexible CSS units, CSS variables, and media queries to adjust the layout elements dynamically based on the screen size. Another challenge was maintaining high accessibility standards. To overcome this, I ensured that all interactive elements were keyboard navigable and had appropriate ARIA labels and roles.

    Implementing the focus and hover states to be distinct and informative without being disruptive required several iterations and testing.

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

    I would appreciate feedback on what libraries/frameworks/tools I could use to make this process faster and more in line with industry standards. Also, any feedback on accessibility best practices would be great.

    Blog Preview Card Using Semantic HTML and Responsive CSS

    2
    P
    Amy Spencer•360
    @amyspencerprojectPosted 2 months ago

    Your solution is suburb! Nice work!!

    I was given the advice to get really good with CSS flex and grid before moving on to a CSS framework. If you have deep understanding of the basics you will be better at trouble shooting when you do choose a library. The other thing to consider is that when you get your first job you will be learning whatever CSS framework they are using. I have dabbled with Bootstrap and Tailwind but do not use either in my current job. Happy coding!!

    Marked as helpful
    0
  • Peter Pfautsch•20
    @M1roelSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Back to the roots! :) Actually I work with Angular, TypeScript and SCSS.

    First Challenge - QR-Code

    1
    P
    Amy Spencer•360
    @amyspencerprojectPosted 3 months ago

    Looks great! Keep it up

    0
  • P
    Amy Spencer•360
    @amyspencerprojectPosted over 1 year ago

    Hi Airus,

    Nice work!

    A few things you might want to look into. You used a form but then used a "click" for your event listener. Try using "submit" instead. This makes the form accessible for keyboard commands not just a mouse click. You would put a type=submit on the button and then have the event listener on the <form> div.

    Your error message is not the custom one in the design but the one provided by the browser. To use a custom message you would want to add a "nonvalidate" attribute to your <form> div and then you would be able to add the color changes to the input field and have a custom message pop up in UI. When you do a custom error message you should also add accessibility attributes to the <p> div. So adding role="alert" and aria-live="polite" makes your error message much better for screen readers.

    I noticed you don't use a CSS reset. It is a good idea to use one especially when you start customizing the UI. Andy Bell has a good, https://andy-bell.co.uk/a-modern-css-reset/

    Hope this helps you on your coding journey!

    Marked as helpful
    1
  • P
    Amy Spencer•360
    @amyspencerprojectPosted over 1 year ago

    Good Job Ali!

    I remember having some of the same issues with the :checked. In the end I took my <input> out of the <label> div for accessibility reasons. And then just used adjacent sibling combinators to get my :hover and :checked. Like this input:checked + label { background-color: var(--light-grey); }

    Did you try combining the label and input?

    label input:checked { background-color: red; }

    or maybe

    label > input:checked { background-color: red; }

    The Stephanie Eccles article I used as a resource has a solution that also might work for you. And she has the <input> nested into the <label>. Step #4 https://moderncss.dev/pure-css-custom-styled-radio-buttons/

    Hope this helps you. Amy

    0
  • P
    Amy Spencer•360
    @amyspencerprojectPosted over 1 year ago

    Good Job getting everything centered! The mobile view looks centered on my end by the way 🥳

    Have you tried using CSS Flex? This makes centering much more manageable.

    Happy Coding!!

    0
View more comments