Here you can find my projects to enhance my front-end skills with their live links. I will also add more information like what I learnt, what the difficulties I had and so on.
- I implemented my newly acruired grid knowledge with a friend in recoded bootcamp. It was hard to remember all grid properties xD
- Grid Layout
- Live Link
Preview of the challenge
- Drawing a decent circle for 76 of 100 was difficult.
- CSS Variables
- Live Link
Preview of the challenge
- BEM convention for class names
- Live Link
Preview of the challenge
- Font sizes and spacing between text had me have hard times :D I tried to make it as closer to the design as possible.
- I used scss in a project for the first time. It made project progress way much easier bc of nesting with & symbol.
- Live Link
Preview of the challenge
- I think that it wasn't hard much, good practice though.
- I hadn't written client-side form input validation by myself before.
- I learned that
::placeholderexists xD - Live Link
Preview of the challenge
- I powered through not to repeat my code again and again, creating functions helped me a lot
- NaN and Infinite results drove me crazy just a bit hihihi
- Even though I don't like the grid system, I forced myself to use it for building percentage buttons and custom input so, I practiced grid template columns and rows :)
- toFixed method to add 2 decimals at the end of results.
- Live Link
Preview of the challenge
- I didn't know how to restore the point in order to show it in thanks page. I tried using exports and imports which didn't do the trick. It took some time to use localStorage xD
- Tried using imports and export
- Used localStorage to store the rating point
- used window.location to navigate to the thanks page
- Live Link
Preview of the challenge
- Curly background images of body were quite difficult to place them properly. However, I figured it out using before and after pseudo classes. That took time a bit but couldn't more benefitial :)
- I try to provide responsive text, and I messed up. Then I figured it out too, now I have good solution for responsive texts.
- I added cool animated buttons, and elemets like intro part.
- Live Link
Preview of the challenge
- Elapsed years :/
- Button position was kinda hard but I found a easy way to do it.
- Clamp for responsive text
- Live Link
Preview of the challenge
-
Blurry images that I newly tries is incompatible in Firefox browser, and I couldn't fix it :(
-
I used TypeScript and it kept throwing some weird errors which makes difficult production publish.
-
Arrows I used in carousel is incopatible in Firefox browser as well...
-
Carousel
-
navbar hamburger menu
-
window.resize
-
blurry effect when hover images to display album names
-
dark-mode which LOOKS AMAZING AND EYE SAVER ! using color-scheme and css variables
- Live Link
Preview of the challenge
-
Input field which contains search icon
-
Dropdown menu was kinda hard bc I've never done that one before.
-
Quite basic URL routing based on the words searched by user.
-
Dropdown Menu
-
Font family changes by user desire
-
Play button
-
Voice player
- Live Link
Preview of the challenge
- I rebuilt it using Angular 15 in order to add neat routing system
- It also stores the font family using localstorage like darkmode.
- Live Link