All solutions

Hello all,

I tackled this project to get more practice with Next.JS and TailwindCSS. I even gave a shot at accessibility with skip to main content, aria labels, link hovers and made sure keyboard navigation works.

I haven't tested on a screen reader yet but open to any feedback especially to accessibility testing.

Thanks and Happy Coding!!

Hello Everyone,

Completed challenge using React and first time using Tailwind CSS.

Difficulties:

• Replicating Hero section with the illustration SVG slightly cut off when aligned to the right of the viewport. My attempts would result in a horizontal scrollbar.

Any feedback/ideas to achieve this is appreciated.

Happy Coding!!

Tools used:

• Formik - form management
• Yup - schema validation used with Formik - validate link field
• Clipboard API - to copy link
• React
• Tailwind CSS

I initially wrote this in normal HTML/CSS/JS but decided to switch over to React. I'm still learning it and decided to try out React hook form for this challenge.

I really like how the app came out. Some of the features include:

• move focus to next input when char limit reached
• [update] single digits convert to two digits when leaving input (blur event)
• using setInterval and promises to get the count up effect.
• responsive mobile first design

I welcome any feedback and pointers to good React practices. Major challenge I faced was letting go of the responsibility of updating the DOM and let React handle it.

ie. I'm using document.getElementById to move the focus to the next input when the character limit is reached but doesn't feel very React like. Is there another way?

Hello,

Another challenge done. Something I did learn is that hsl(value, value%, value%, 1) can take a 4th value for opacity. I usually converted hsl value to rgba.

For the purple ish active color and box shadow, I took the bright-blue color and reduced opacity. But because bright-blue hsl values were duplicated 3 times in my code I wanted to dry(don't repeat yourself) it up.

Wrote a sass function but didn't work when I applied it to a custom property. No errors. If anyone has any thoughts on it?

@function brightBlue($opacity: null) {
  @if ($opacity) {
    @return hsl(245, 75%, 52%, $opacity);
  } @else {
    @return hsl(245, 75%, 52%);
  }
}
:root {
    --bright-blue: brightBlue();
}

Happy coding!!

Been away for too long. This was a good one to test my feet again using flexbox.

• CSS class names are written using BEM naming convention.
• Added some simple keyframes for animation practice.
• First time using Gulp to assist with sass compiling and autoprefixer for specific vendor prefixes instead of using VSCode extensions.

Any thoughts when it comes to accessibility for a qr code?

Any feedback is welcomed, Happy coding!!

Hi everyone, simple but looks could be deceiving with this challenge. Spent a good amount of time fiddling with positioning on those background images. Threw some keyframes at it for some eye candy...sort of.

Any suggestions on it are welcomed, thanks

Hello everyone, open to any feedback to improve

Cheers

Kept it simple.

Hello everyone, any feedback is much appreciated. Not sure if I made the phone to small or should increase size for a higher resolution device.

As I was building the phone styling I decided to use a real textbox and button. Then thought they were pretty useless since it's just an illustration 🤔......💡 unless it actually submits a message.

It has no practical use but was fun so what the hell.

Note: custom scrollbar styling in phone illustration can be seen in Chrome. Other browsers may vary

Hello everyone,

I'm curious how some add aria accessible support for a custom toggle component?

Any other feedback welcomed

Any feedback is appreciated. Still trying to get the hang of animations

What's best practice when increasing font size from mobile to desktop layouts. I find myself tweaking font-sizes between media queries kind of exhausting?

Thanks

Any tips or suggestions are welcomed