Sometimes I still waste too much time with the sizing of elements, especially with the heights, I expect that an element with height at 100% will take up all the space of the containing element but it doesn't.
I'm trying to get better with semantic HTML and aria attributes
I'm happy with how this challenge turned out.
What challenges did you encounter, and how did you overcome them?I did not encounter any issues.
What specific areas of your project would you like help with?I would be glad to receive any feedback.
Good!
From what I read it is not necessary to use aria-live="polite" on every voting button, as aria-live is usually used for dynamic content updates that the user might want to hear, such as messages or notifications that appear or change in real time (for example, a confirmation message).
I used aria-pressed to indicate the state of the button (whether checked or unchecked), this seems sufficient to communicate the state to users who use assistive technologies.
I would just recommend putting the css and javascript in separate files, it would be more readable. In the next challenge try using Sass.
It was great to work on a larger project and apply concepts across multiple files instead of just one. I would definitely create more mixins as soon as I notice repetitive patterns occurring more than once. Additionally, I would review the entire design before defining variables. Initially, I created variables based on the Design System, but while developing the website, I noticed there were additional font sizes not included in the original Design System.
Working with a Design System was a great experience; it made the process much easier because I didn’t have to constantly decide on margins or paddings—it was all predefined.
What challenges did you encounter, and how did you overcome them?I didn’t encounter any challenges.
What specific areas of your project would you like help with?I would greatly appreciate any feedback. It has been a long time since I worked on larger styles using only HTML and SASS, so I reviewed some folder architecture approaches. I’d love to know if my structure is sufficient or if there are better practices I could adopt.
Great Job!
Great job!
There were a few things I had never encountered before...but I just kept looking for solution.
What challenges did you encounter, and how did you overcome them?The number in the middle of the page is the one that caused me more problem, but in the end I came out with my solution. Because of this I now have a better and stronger understanding of positioning, how they work and side effects that come with them like overflow...
What specific areas of your project would you like help with?The image in the footer, I was not able to made it look as the design where it looks zoom out, I tried everything...but did not work. Maybe something is not correct in the markup. I would love feedback on this and also...
overflow....even if there is no horizontal scrolling the number 02 is causing overflow...
..and the image on the left and right of the header in the desktop version also had overflow because I scaled them up to make it look like the design and then removed it because overflowing and cause horizontal scrolling.
This two things are what really slowed me down and could not fix.
Great job! The code is clean and readable.
Some observations: I would balance the size and the use of space a bit, for example with the layout at a resolution of 1020px the title and the text should be adjusted by adjusting the padding-inline of the content (@media 62.5em).
Using the chrome tool you can select various devices to see how the layout adapts, try to see the one for iPad Pro for example.
I haven't done this challenge yet, it doesn't seem trivial, there are little things that can make you waste a lot of time. For the images above, perhaps I would have tried to use them as the background of the section element with class hero and I would have sized and positioned them with the css based on the various resolutions.
Something like this.
.element {
background-image: url('left-image.png'), url('right-image.png');
background-position: left center, right center;
background-repeat: no-repeat, no-repeat;
background-size: auto, auto;
}
That I finished the challenge and did not give up. Next time I will try to work on the project faster.
What challenges did you encounter, and how did you overcome them?Fetching the data from the JSON file. I overcame this by watching a few tutorials on Youtube.
What specific areas of your project would you like help with?1.How can I fetch and Update the data to my Html file. 2.How to create a design for smaller screens. 3.Is there a simpler way to do this challenge?
It seems to me that you are on the right track, here are some tips. It is important to use semantic html so that it can be used by as many people as possible. I recommend you start from the mobile layout (Mobile-first workflow) and then move on to the desktop version. In this case you could have used flexbox for mobile and grid for the desktop version. Use relative units such as rem or em instead of absolute units such as px it is a common practice to improve accessibility, scalability and management of responsive design.
