Skip to content
OverviewSolutions
20
Comments
11
P
Amy Spencer
@amyspencerproject

All comments

  • P
    Amy Spencer•360
    @amyspencerproject

    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
  • P
    Coco•60
    @cocoelizabeth
    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
    @amyspencerproject

    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
  • Peter Pfautsch•20
    @M1roel
    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
    @amyspencerproject

    Looks great! Keep it up

  • P
    Amy Spencer•360
    @amyspencerproject

    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
  • P
    Amy Spencer•360
    @amyspencerproject

    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

  • P
    Amy Spencer•360
    @amyspencerproject

    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!!

  • P
    Amy Spencer•360
    @amyspencerproject

    I updated my JS to put the eventListener on the form instead of the button!

  • P
    Amy Spencer•360
    @amyspencerproject

    Hi Mohammed,

    The design view dimensions are just what the webpage should look like at that specific viewport size. They are not intended to be the breakpoints. I usually set my breakpoints at 960px(60rem) and 640px(40rem). I had the same confusion when I started but read a post in the old FEM Slack channel that cleared it up. Hope this helps.

    Happy Coding!!

    Marked as helpful
  • P
    Amy Spencer•360
    @amyspencerproject

    Nice Job!

    Alternatively you could use the <picture> element and set the image to change responsively without using a media query. Doing this challenge was how I first learned about <picture>. Using the background in the way you did works perfectly though.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Happy Coding!

    Marked as helpful
  • P
    Amy Spencer•360
    @amyspencerproject

    Hi Amenyo,

    This was a tough challenge for me as well! Good job getting thru it!!

    I have two suggestions. First, use a height of 100% to stretch the image to cover the card div in the desktop view. Second, try using "mix-blend-mode: multiply" on the image and then play with the opacity. This will sharpen up the image and make it pop!

    Happy Coding 😊 Amy

  • P
    Amy Spencer•360
    @amyspencerproject

    Hi Aviad,

    I just finished this challenge and also had a hard time figuring out how to get the Annual subscription elements spaced correctly. I used flex-grow on the middle section so that when the viewport is larger the Annual plan text stays closer to the music icon. There is something funky going on with your background image that I can't figure out. It is almost like it is wrapped around so you see a corner of it below the curve of it mid screen. Are you using some kind of preprocessor for you CSS? That might be causing the issue because your code for the background looks the same as mine. You should maybe ask for help on Discord about it.

    Hope this helps. Happy Coding!