All solutions

Hi. These newbie challenges are amazing.

In this project I've used:

• semantic HTML elements;
• Sass & BEM;
• RWD;

Any comments will be appreciated :D

Thanks :D

Hi everyone! :D,

Finally, I can publish this challenge. I concluded that every project, even small, will teach something. First time I was working with the TailwindCss framework and gulp.

** => Please, let me know if you have got any suggestions, especially about HTML structure and accessibility.**

A short explanation:

• I have chosen a button but probably the radio-button or checkbox could be a better choice (the design of it could be nicer);
• I didn't do the border-top gradient because Tailwind doesn't have very good support with it yet (I still learn how to create different plugins);
• manually switching the mode between light/dark (smooth transition). I want to detect if the user has requested the mode: light or dark (prefers-color-scheme) => in this case I have decided to work with the sessionStorage instead of the localStorage because the main goal was to come back to the user's preferences (prefers-color-scheme) which in the meantime may have changed the theme in the general settings.
• added small animation updating the total number (the main idea is copied from the web developer but I've changed a bit it's content to get more readable code - in the meantime I want to create my version of it);
• footer displays on preview site;
• deploy the project to Github Pages with GitHub Actions.

Thank you so much. Ps. don't forget to upvote my project if you like it.

Greetings :D

Hi. Please let me know if you have any suggestions - CR.

Question: What do you think about ordered lists, especially in the context of the Safari browser and accessibility? When the list-style property is set to none (removing dots) the VoiceOver is not announcing unordered lists properly. I can add role="list" to ul, and role="listitem" to li but the validator throws a Warning: The list role is unnecessary for element ul/li.

For this project I did:

• HTML semantic elements;
• Invisible content just for Screen Reader users;
• BEM & SASS;
• Grid & Flexbox;
• Pseudo-element for card overlay;
• Mobile First, RWD;

Additional effects:

• card overlay color (third card);
• button transform on :hover&active with box-shadow;
• styled links in the footer on :hover (footer displays on preview site);

Thanks! :D

Hi. Please let me know if you have any suggestions - CR.

For this project I did:

• HTML semantic elements;
• Invisible content just for Screen Reader users;
• BEM naming;
• Pseudo-elements for background image;
• SASS;
• optimal layout for the site depending on device's screen size;

Thanks! :D

Hi. Please let me know if you have any suggestions - CR.

• It was a bit tricky to get the best position of the circles svg as a background, maybe is there a better way to do it?

For this challenge I did:

• HTML semantic elements;
• Invisible content just for Screen Reader users;
• BEM naming;
• Pseudo-elements for background images and border;
• SASS;
• optimal layout for the site depending on device's screen size;

Thanks! :D