@RobalexgSubmitted over 2 years ago
Hey there! I'm a full-stack developer from Australia, currently working for a dev shop based out of Sydney. I'm passionate about inclusive digital experiences, and doing my best to learn how to build more accessible interfaces for the web.
I’m currently learning...Accessibility best practices
Latest solutions
Testimonials Grid
#accessibility#bemPSubmitted about 2 months agoIf you have any feedback on the naming of my classes or the semantics of the HTML, that would be awesome!
Back to Basics - Feature Section with plain CSS
#accessibilityPSubmitted 2 months agoIf there is anything I have done redundantly in CSS, or any way I could improve how it is written for readability, please let me know!
Recipe Page Challenge
#tailwind-css#accessibilityPSubmitted 2 months agoIf you have any suggestions for how I could improve my tailwind config for readability or better developer experience, let me know! This is something I'm still getting a feel for.
Latest comments
- P@Theosaurus-RexPosted about 1 month ago
Hey, this looks pretty close to the design, well done!
Some notes on design diffs:
- The background colour is meant to be a slightly off-white color, which is provided in the style-guide doc in the starter code
- Your header images look a little distorted in the screenshots but are okay on the live site for me, but you might want to double check them just in case!
In terms of the code:
- I don't really think a
navelement is appropriate where you've used it, as there are no navigation links inside there, just a logo - Your heading elements need to be in order from smallest to highest number, and you can only have one
h1element per page - Your buttons should appear interactive when moused over, but my cursor remains normal when mousing over them - I can't see anything in the code that would override the default behaviour though, so I'm a little confused as to why I'm seeing this behaviour
0 - @rizkibagusSubmitted about 2 months agoWhat specific areas of your project would you like help with?
whatever, i'm open to it
P@Theosaurus-RexPosted about 2 months agoHey @rizkibagus, a couple of small suggestions to improve accessibility!
- You need to have a
<h1>tag in the page, before the successive<h2>and<h3>elements. For this design, you can visually hide the<h1>since there is no obvious design element that indicates where it should be included, but it needs to be present for accessibility. - The alt text for your images should be descriptive, and communicate the image contents as though you were describing the image to someone who cannot see it, e.g. "A headshot photograph of Daniel Clifford, wearing a shirt and suit jacket and smiling at the camera"
Hope this helps, and nice work on the design!
0 - You need to have a
- @MoatazJSSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
It's my first ever interaction with DOM manipulation and event handlers.
What specific areas of your project would you like help with?I'd like to know if there is anything I did poorly in html structure ,if there's anything unnessecary in the css file and if there's a cleaner way to write the JS code.
P@Theosaurus-RexPosted about 2 months agoHi @MoatazJS !
This is a good first attempt, and the design looks very close to the original here!
However, in terms of markup, the underlying HTML for this should really be a
<form>with a<input type="radio">for the number selection. You can then utilise a button inside of the form element, which will automatically behave as a "submit" button inside of the form tag, and utilise the submission behaviour to update the DOM to the completed state!Here are a couple of useful links:
0 - P@gabeiSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how compartmentalized the card's style code is. I tried to keep it all together and I think it came out nicely.
I also think I was able to finish this project relatively quickly by sticking to some methodologies like BEM (Block-Element-Modifier) and SCSS nesting classes. Much of the project bones were completed before spinning up the page to see how it looked. By the time I did, it was almost complete.
What challenges did you encounter, and how did you overcome them?I had a bit of trouble figuring out how to wrap a background color around a short line of text. A little bit of research and trial-and-error gave me the result that I want, but I'm not super happy with the semantics of the HTML that gave me that result.
What specific areas of your project would you like help with?I'd like some advice on using semantic HTML to write a component like this. There are only a few different tag options that are viable, but I am not 100% sure I covered all my bases.
P@Theosaurus-RexPosted 2 months agoHi Gabe, great work on this solution!
Honestly, a span is totally fine for the "Learning" category element in my opinion - I probably wouldn't even nest the paragraph inside of there.
A couple of small notes on the semantics in the rest of your markup:
- You'll want to change your
<h2>to a<h1>in this case, since it's the first heading on the page - I'd actually never seen the
<cite>tag before today, but from reading the MDN docs, I think that tag is used to link to works such as academic papers or novels, not to the author themselves. Still, I learned something from your code!
This looks great and very solid on the semantics compared to most of the solutions for this challenge I have seen, so well done!
Marked as helpful1 - You'll want to change your
- @Student-AdilSubmitted 2 months agoP@Theosaurus-RexPosted 2 months ago
Hi @Student-Adil,
In your solution code, you alternate
h1andh5tags, but this is not semantically correct.When using heading tags in a HTML document:
- There should always only be a single
h1tag, which captures the main topic of the page. For this project, I would suggest that the text "Reliable, efficient delivery Powered by Technology" should be inside ah1tag - Successive heading tags then need to be in descending order, i.e. you can have a
h2followed by ah3, and then anotherh2. - You also cannot skip number levels, but you have jumped straight to using
h5tags.
I highly recommend brushing up on these semantics by reading the MDN docs on this topic
Additionally, I would leave the alt text for these images blank, as they are purely decorative in nature.
0 - There should always only be a single
- @ObiwummaSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of the fact that I'm learning how to use media queries. Next time I won't use both tailwind CSS and vanilla CSS in one project
What challenges did you encounter, and how did you overcome them?I used both tailwind CSS and vanilla CSS in one project. The tailwind loads on the HTML but the CSS doesn't load. Adjusting view from smaller to larger was a bit difficult. As well as changing the image once the screen gets bigger
P@Theosaurus-RexPosted 2 months agoHi @Obiwumma,
Your live site seems to differ from the design quite a bit. I'd recommend sticking with using just CSS until you are very comfortable, and then moving on to Tailwind, as Tailwind is a lot easier to use and a lot more effective when you have a strong grasp of what it's doing under the hood (it's all just CSS, after all!)
Additionally, some notes on your HTML:
- The first heading element in a document must ALWAYS be a
<h1>, but you've used a<h2>for the product title. - I'd recommend letting the text wrap naturally rather than adding in explicit
<br>tags in the middle of sentences. This will ensure a better experience for users across different device sizes (it doesn't have to match the text exactly as it appears in the design - it's more important that your site is usable) - I'd strongly recommend using an
<img>tag for your image - I can see that you did that previously but commented it out, but that is the correct approach for this markup.
0 - The first heading element in a document must ALWAYS be a
