@miranlegin
Posted
Hi Cheosphere,
congratulations on completing this challenge!
I'm impressed how you did this challenge because in my view there are probably 20% or more code which is definitely not needed here and i think you made yourself life much harder with this one. There are lots of hard-coded values especially on the height of elements and with things like that life can be so much harder when you need to maintain all that stuff.
What probably bothers me the most is the sizing of the actual buttons for the slider. They are really hard to click because they are to small, you can read some info on setting size on buttons.
Other that that it would be better to use button element instead of a a tag here also because a have different purpose. It is used primarily for links.
Also when i click on the slider buttons there is an instant scrollbar to the right side which is causing content to jump from right to left and back an is easily avoidable with probably smaller value for scale.
Blockquote tag and an H2 could be switched with flex-direction: column is you wanted to switch their places without using negative order on the blockquote itself. Also i'm not an expert it semantics but i don't think that blockquote is used properly here.
Key takeaway from this is to try and make yourself life easier without fighting the layout so much. You've used all the techniques for positioning so you already have some knowledge but using it rightly takes some time and practice.
Keep coding!
Cheers, Miran
Marked as helpful
@Cheosphere
Posted
@miranlegin Hello Miran, a pleasure to greet you and thank you very much for your comment.
You are absolutely right, I complicate my life with fine details in the code, it is because of a personal obsession that I have to make my solution as close as possible to the original design, and looking at some of your challenges, I can see that you do not complicate yourself with this as I do.
Regarding the buttons, initially I had thought of a way to solve the part corresponding to javascript, where the ideal was to use "<a>" tags, but later I changed my mind and it was no longer necessary to use the <a> tag and I forgot change it to <button> 😅.
The size of the buttons for the slider is the one established in the original design, I have opened the site from a smartphone, and I did not have any problem with my finger, it may be complicated for a fatter finger, but I insist that it is the size of the original design, I corroborate this from photoshop measuring the pixels.
In general, I have confusion with html tags, and I think there is a lot of controversy (regarding the official documentation and what other more experienced developers think in forums or similar places) regarding when and where they should be used correctly, I recognize that it is a point very weak that I need to strengthen and I am working to achieve this goal.
I appreciate your words and I will strive to improve my code with practice and study. I send you a big hug from Chile.
Cheers!!!
@miranlegin
Posted
@Cheosphere Hi again, regarding this issue with the size of the buttons i think i need to explain a bit clearer. Design wise everything is working like it should, but if you inspect them in the Dev Tools you will notice that they are 12x22 pixels wide and have a margin of 3.2px on the top side. At least that is what i'm getting on a 2K resolution. What i originally meant was that this clickable area of a button should be at least 44px in both width and height as this is to some researches minimal viable button size. You could for instance apply some padding around it to make it larger for instance. Visually nothing would change but on the UX side it would drastically improve experience.
Regarding confusion around HTML tags i get your point. I struggle daily as well but i think there is one way to think about it. Approach i use is to markup the HTML first, that way you are not worried about styling at all. And in this step you can review if your code works from the logical side. Semantics, proper usage of elements, labels with inputs, legend on the fieldset, keyboard navigation etc. Maybe insert some screen reader only content if needed or hide unnecessary icons or images from it.
This stage is critical and if you succeed in this one you will have less worries in the CSS stage later. There will be some back and forth's like always is but with time it will be easier.
Keep coding!
Greetings from Croatia. Miran
Marked as helpful
@Cheosphere
Posted
@miranlegin Hello Miran, thank you again for your feedback, thanks to this I learn very useful details.
Excuse me for having misunderstood what is related to the size of the buttons, now I understand that you mean the size of the area that receives a click, I have corrected this detail and now the size of said area is 45px in the desktop version, I did not know this information and I appreciate it share it with me and with the community that may read this text.
Regarding html, I still have to improve a lot, sometimes html seems simple to learn, but when delving into this matter you can see that there are countless things and details to consider, tags, semantics, accessibility issues, among others. I am relatively new to web development and I try to improve and learn something new every day.
It is a real pleasure to share these words with you from a distance, and again I appreciate your feedback and that of other users of this community.
Let's keep coding Miran! 🤘🏻 Cheers!
