All solutions

Hi, I'm Sakti, This is my solution in this challenge.

This is my first time & I am having difficulty with this challenge I have to make it with flow mobile first and make it as similar as possible to the design and also use the VeeValidate library to overcome validation & errors on the form.

Build, function or package i use:

🚀 Nuxt.Js

• This project was installed using Nuxt.js v3.9.0

🚀 Vue.js Some of the functions from Vue.js that I use in this project are :

• @click
• ref variables
• addEventListener javascript

🚀 HTML

• Semantic Tags
• Accessibility

🚀 Sass/Scss

• Sass/Scss Variables
• CSS Flexbox
• CSS Animation with keyframes
• CSS Media Queries
• CSS Transitions
• etc.

🚀 Sweetalert2 v11.10.3

• Another library or packages for nice & easy to makes alert or message box

🚀 VeeValidate

• Library to handle validation & error form

Any tips, comments & suggestion are welcome

Hi, I'm Sakti, This is my solution in this challenge.

I was having hard time to make float box on social icon and try to make it as similar to the design as possible

Build, function or package i use:

🚀 Nuxt.Js

• This project was installed using Nuxt.js v3.9.0

🚀 Vue.js Some of the functions from Vue.js that I use in this project are :

• @click
• ref variables

🚀 HTML

• Semantic Tags
• Accessibility

🚀 Sass/Scss

• Sass/Scss Variables
• CSS Flexbox
• CSS Animation with keyframes
• CSS Media Queries
• CSS Transitions
• etc.

Any tips, comments & suggestion are welcome

Hi, I'm Sakti, This is my solution in this challenge.

This is fun project to practice handling user interaction. And try to make it as similar to the design as possible

Build, function or package i use:

🚀 Nuxt.Js

• This project was installed using Nuxt.js v3.9.0

🚀 Vue.js Some of the functions from Vue.js that I use in this project are :

• @click
• v-for,
• v-if,
• ref variables

🚀 HTML

• Semantic Tags

🚀 Sass/Scss

• Sass/Scss Variables
• CSS Flexbox
• CSS Animation with keyframes
• CSS Media Queries
• CSS Transitions
• etc.

🚀 Sweetalert2 v11.10.3

• Another library or packages for nice & easy to makes alert or message box

Any tips, comments & suggestion are welcome

Hi, I'm Sakti, This is my solution in this challenge.

The design is quite simple I tried to make it as similar as possible to the design

Any suggestions on how I can improve are welcome!

Hi, I'm Sakti, This is my solution in this challenge.

This is a fun challenge, in this challenge I use semantic tags & try to make it look pixel perfect with design but it's quite difficult without a design file

Hi, I'm Sakti, This is my solution in this challenge.

In this challenge, the most difficult part was that I tried to make it pixel perfect without design files and applying semantic tags, where I was still confused about using the correct tags.

I added an animation when one of the accordion items is open, but there is a slight issue where the animation doesn't run when one of the accordion items goes from open to closed

Build, function or package i use:

🚀 Nuxt.Js

• This project was installed using Nuxt.js v3.9.0

🚀 Vue.js Some of the functions from Vue.js that I use in this project are :

• @click
• v-for,
• ref variables

🚀 HTML

• Semantic Tags

🚀 Sass/Scss

• Sass/Scss Variables
• CSS Flexbox
• CSS Animation with keyframes
• CSS Media Queries
• CSS Transitions
• etc.

Any tips, comments & suggestion are welcome

Hi, I'm Sakti, This is my solution in this challenge.

This is the first time I tried to implement semantic tags from all the challenges I participated in.

I was having a hard time choosing which tags to choose, especially this tag <article></article>

Any tips, comments & suggestions are welcome

Hi, I'm Sakti, This is my solution in this challenge.

Any tips, comments & suggestion are welcome

Hi, I'm Sakti, This is my solution in this challenge.

From all the challenges, this was the first time I used a display grid and created an unusual card list layout and tried to optimize it on various device screens

Hi, I'm Sakti, This is my solution in this challenge.

In this challenge I had difficulty creating an unusual list card layout to make it different in position and also make it look good when the card list had more than 3 items.

Hi, I'm Sakti, This is my solution in this challenge.

This is always quite challenging when I have to make cards & backgrounds as similar as possible to the design without design files

Hi, I'm Sakti, This is my solution in this challenge.

I had difficulty making these 3 cards always have the same height even though the content was different and also making the buttons always at the bottom of the card

Im happy to any feedback to improve my work

Hi, I'm Sakti, This is my solution in this challenge.

Any feedback or suggestions are welcome.

Hi, I'm Sakti, This is my solution in this challenge.

I felt quite challenged when working this challenge when adding a background pattern and making the card look as similar as possible to the design

Hi, I'm Sakti, This is my solution in this challenge.

Hi, I'm Sakti, This is my solution in this challenge.

Im happy to any suggestions to improve my work

Hi, I'm Sakti, This is my solution in this challenge.

Im happy to any suggestions to improve my work

Hi, I'm Sakti, This is my solution in this challenge.

I had difficulty when working on this challenge when adding colors with gradations & responsive mobile versions to make it as close to the design as possible

Please let me know any tips & comments about my solution in this challenge for better results.

Hi, I'm Sakti, This is my solution in this challenge.

Please let me know any tips & comments about my solution in this challenge for better results.

I am grateful that by taking part in this challenge I realized that I still need to learn a lot in implementing design and other things in any aspect needed for improvement.