All solutions

At first, I had problems displaying the respective error messages for the inputs without having to manually hiding and displaying them. After playing a little bit, I figured an easier solution by looping through the inputs and accessing the children of the respective parent container.

Also, I'm struggling to update the input border colour to red, without having to drastically changing the current code. So if you guys have any input (😉) on making the code/design better and also making the input border red, please feel free to comment.

Hello,

Positioning the social icons for both and the desktop screens was harder than I thought, but eventually I figured it out by rearranging and modifying the content in the html file. Do you guys have any better suggestions for the same, because I think it could be done better?

Any suggestions on optimizing the JavaScript code?

Hello,

It took me sometime to finish this as I focused too much on input validation, as it has been a while since I did it on client side. Feel free to check out the code and the output. I feel like some things could be done better, for example, the input validation code, I feel like it could be reduced to even lesser number of lines. Please, let me know if you have any suggestions for the code or the design.

Fun Fact: I've started this project with bootstrap, but ended up with tailwindcss, as I was trying to override everything in bootstrap😝.

This was tricky at some parts, but figured out the solutions eventually. I didn't know how to create a triangle before, so I had to look it up and turns out it's actually very easy.

Feel free to checkout the code and the result. Please comment if you have any suggestions or find any bugs.

Using tailwind-css for styling is super easy, barely an inconvenience, but finding how to position multiple background images was quite hard, very inconvenient.

Please let me know if I can improve the semanticness of the html document any further.

Also, how to get rid of those issues in the report, which seem to be caused by tailwind-css?🧐

Using tailwind-css without the intellisense was very fun 😆.

How can I improve SCSS code and folder structures?

Can the background image styles be improved further?

I couldn't find the transparent social icons, can anyone help me with those?

Thank you.

Pheww! That took a LOT of time. I wanted to make the bars dynamic according to the data, but I was stuck on how to actually implement it. On top of that, I'm still new to TypeScript and SCSS, so it took even longer with their respective errors😫.

I tried different ways, but they didn't work, so I started looking for other solutions for potential ideas, then I saw one by @elaine and realized using inline styling was a great idea, so I went with that too and it worked🥳! Well, I still had to struggle to incorporate that and the dynamic day thing using TypeScript, but I finally did it😂. I know it's not the perfect solution, but I did my best and learnt a lot about TypeScript and React.

Anyway, feel free to checkout the output and the code.

Hello everybody,

I tried to implement the coloured hover effect for the image, like shown in the design specs, but I couldn't figure it out, if anyone has any idea on how to do it, please let me know.

Thank you.

I wanted to finish this in half an hour, but I wanted to get used to SASS, so I used that in this project. It took some time to get used to it, but I got the hang of it now. I'd like to focus on mixins and functions in future projects.

Feel free to checkout the code and output. Comment your suggestions or corrections.

Edit: Just noticed that there's a background image😆. I'll put it later when I have time.

Edit-2: Updated the body background.

Practising the basics of responsiveness using flexbox and grid. Feel free to comment on the output and the code.

Practising the basics. Feel free to comment your thoughts on the code or the design.

Just practising the basics. Feel free to comment on what could be improved.

Hello everyone,

I've done this project using React and tailwind-css. I thought this wouldn't take much time to finish, but since I'm still not used to tailwind-css, it took me quite some time. Even after all that time, I couldn't make the glowing effect, even though I used necessary styles for that. Feel free to check out the app and let me know your thoughts and suggestions.

P.S. If you're familiar with tailwind-css, please let me know what I did wrong with the button glowing effect on hover.

Hello everyone,

I have done several projects before, but this is my first project on this website, feel free to check it out and please let me know if there are any bugs or suggestions.

Regarding bugs, I have encountered one myself, which is related to media query. All media queries are working fine, except the one with min-width:780px, when I checked the dev tools in Firefox, it said that there's an error regarding grid-template-areas and that it is deprecated. I'm confused because the other queries are working fine, except that one. If anyone knows how to solve this, please kindly leave a comment.

Thank you.