Latest solutions
Recipe Page (HTML, CSS)
#accessibility#bemSubmitted over 1 year agoI think the main point of this project is about HTML structure, so if you think I could have done it in a better way, please let me know. I did put some thought into it though, so I have my reasons for structuring it the way I did.
Recipe Page (HTML, CSS)
#accessibility#bemSubmitted over 1 year agoI think the main point of this project is about HTML structure, so if you think I could have done it in a better way, please let me know. I did put some thought into it though, so I have my reasons for structuring it the way I did.
FAQ Accordion
#accessibility#bemSubmitted over 1 year agoIs the accordion accessible? Is there a better way to write the JavaScript? Is there anything obviously wrong with my code?
Multi-Step Form (React, TypeScript)
#accessibility#bem#react#typescript#viteSubmitted over 2 years ago
Latest comments
- @marcelkuczynski@BenConfig
Hi, nice work!
To stop the page from refreshing, you have to prevent the default behaviour on form submission.
Try adding this JS:
const form = document.querySelector('form'); form.addEventListener('submit', event => { event.preventDefault(); });
Marked as helpful - @ljcutts@BenConfig
The 'dots inside the zeros' are a feature of the Space Mono font family. It looks like you are using the Roboto font family which does not have the dots.
Why not just use the character '$' and then you can apply the
color
property?You should try building the page for mobile first. The mobile design is usually much simpler than the desktop design so it makes sense to start with that. You then apply media queries when you have more viewport space to work with.
- @JosielMatos@BenConfig
Remember to use
<p>
elements for blocks of text.<div>
s and<span>
s aren't semantic elements, they are just used to separate elements for styling purposes.For example, your
.description
element can be a<p>
. And the.price
element can be a<p>
also in my opinion:<p class="price"> <strong>Annual Plan</strong> <span>$59.99/year</span> </p>
- @juanmfretes@BenConfig
Try to use the semantically correct HTML elements.
For the
.container
you could use a<main>
element instead of a<div>
and your.card
s could all be<section>
elements instead of<div>
s.Also you have used
<p>
elements for your.card-heading
s, but these are headings, so why not use<h2>
?Marked as helpful - @earslanyunus@BenConfig
Hey, I checked your page in Safari. There is a lot of extra space above the
<h1>
and on larger screens the text content starts to disappear from the bottom of the.text-box
.For some reason, removing
align-items: center;
from.card
fixed the issue but I couldn't figure out why.Marked as helpful - @azizbna@BenConfig
How about this:
.review::before { content: url(./images/icon-star.svg) url(./images/icon-star.svg) url(./images/icon-star.svg) url(./images/icon-star.svg) url(./images/icon-star.svg); margin: 0px 30px 0px 20px; display: inline-flex; gap: .25rem; }
You can use the
gap
property to increase/decrease the space between the stars as you wish.Marked as helpful