Frontend Mentor | Chame "Guigui-chan"'s profile

P

@Joshk7Submitted 17 days ago

What are you most proud of, and what would you do differently next time?

I'm proud of the semantic html and use of aria attributes to make this website more accessible.

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

The primary challenges that I faced were creating semantically correct html, validations, and setup with web3 forms.

I created descriptive tags that describe inputs as well as using html tags that make sense for the context of what I was trying to do. For validation, I created a javascript object to map each input to its own validation function. Lastly, setting up web3 forms was as simple as copying a snippet of code and setting up a new email.

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

I'd like help with my semantic html.

<label class="name__label" for="given-name"
    >First Name
    <span class="required" aria-hidden="true"> *</span>
    <span class="sr">required</span>
</label>
...
<span class="error invisible" id="error_given">This field is required</span>

Is this the proper way to add aria labels for screen readers. Specifically for the radio buttons, they're wrapped in a fieldset and each buton is described by the same error. Is this correct?

Lastly, any tips on validation would be appreciated!

Functional Contact Form

#pure-css

1

Chame "Guigui-chan"•270

@Guilherme-Porto-SilvaPosted about 15 hours ago

The radio buttons, in this site, are both part of the same "Query Type" field, this is why their error is described by the same span. The first and the last name are asked by diferent inputs, I supouse its so that the person who is responding back to our client can use them separately when writting an anser, this is why each one has its own error warn.

The most good way to write semantic html is saying "If my client's device fails to load my custom stylesheet, is the site still going to make sense and be usefull?", for the user agent stylesheets were created for solving that.

0

Muhamad Rukhul Kirom•330

@rukhulkiromSubmitted 4 days ago

What are you most proud of, and what would you do differently next time?

What I am Proud Of?

Good accessibility
Effective Functionality
Clean & Well-Structured Code

What Would I Do Differently Next Time?

Use CSS for Plus/Minus Icon Toggle

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

Challenge: Initially, the accordion's transition felt abrupt or didn't work correctly when toggling sections.
Solution: Used scrollHeight to dynamically set the height of the expanded content instead of using max-height: 0;. This ensured a smooth transition when opening and closing FAQ items.

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

I’ve implemented aria-expanded and aria-hidden for screen readers, but are there any improvements I could make?
Is my keyboard navigation implementation (handling Enter and Space keys) the best approach, or is there a more efficient way?
Right now, I’m using max-height with scrollHeight for the animation. Is there a better way to make the expanding/collapsing effect smoother?

FAQ Accordion

#accessibility#pure-css

1

Chame "Guigui-chan"•270

@Guilherme-Porto-SilvaPosted 2 days ago

You solved all your problams using <div>s, thus going against something sad by one of the first article's in this learning path. For you see, we buid for evreyone, not only for those who are aways able to load our custumed stylesheets. This is actually the reason why browsers have user agent stylesheets, its for the pages to make sense when the stylesheet the programer has written fails to be loaded, thus providing harder to fail pages. When you go trough life with only classified <div>s, this B plan is completely fucked up. To solve this problam, use semantic HTML tags, such as a <main> to be this white retangle and <strong>s or <b>s to wrap the questions.

You set <body>'s font size to 16px, wich is also accessibility harmfull, because there are people who are not blind but have truble reading small text, so, the go to their browser's configurations and increase the font size of the browser itself. In our language, they increase how many px does 1rem value. When you define font sizes using px, doing that does nothing, therefore, if someone really needs that change in order to be able to read the texts, they aren't being able to read your site's content. Define all font sizes using units that somehow depend on the value of 1rem. By default, 1rem = 16px, but the user should be able to increase it to 32px without turning the site unuseble.

I also didn't get why you storaged those five vars in your CSS root if you didn't use calc();, any relative color at all... If you had directly put the color indicators in the property values, reading your code would be a little easyer and your clients would not have to store five informations in memory spaces.

Instead of using otherBtn.nextElementSibling.style.maxHeight = null; (line 24), you could have created a class hidden that aplys the style max-height: 0; and used otherBtn.nextElementSibling.classList.add. This would provide more control and less error chance, because those styles aplyed by JavaScript rule over any style aplyed by CSS. They are treated as more important, since the browser assumes the script was made to manipulate everything. By adding and removing classes, you decrese the chance of there being a style you wish had been removed but was still there, due to the code that was supoused to have changed it not having power to do so.

0

MayurK-cmd•70

@MayurK-cmdSubmitted 3 months ago

Interactive rating component

#react#pure-css

1

Chame "Guigui-chan"•270

@Guilherme-Porto-SilvaPosted 4 days ago

the thing is: Frontend Mentor asked - during the "Peer review" leanrning path chalange fase - a boy who has never looked into React to leave a feedback on the code of a React user, wich is kinda tuff...

I gess you could aply color: hsl(0, 0%, 100%); to the number buttons? I don't know...

0

Adelabu Mobolaji•260

@BolazcodingSubmitted about 1 month ago

What are you most proud of, and what would you do differently next time?

I'm proud that i was able to use JavaScript to complete this project.

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

It was smooth

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

JavaScript

Tip Calculator App Using JS

#lighthouse#pure-css#solid-js

1

Chame "Guigui-chan"•270

@Guilherme-Porto-SilvaPosted 9 days ago

If the inputs were type="number", the users would be able to write only numbers in them, preventing some issue possibilities and making the H.T.M.L. more semantic.

When you write "if (numPeople === 0)", your client's browser checks if numPeople is a number, wich is time and computation power waste, since you had alredy used the "Number(this.value);", therefore, you could have put only two equal signs, "if (numPeople == 0)"

0