chklueter / extra-html-css Goto Github PK

So, the assignment - "Dribbble challenge". If you do not know what Dribbbble (https://dribbble.com/) is a design showcase website, where digital designer uploads their experiments, creations, and designs. What we will do, is select 3 designs and code them. That is often the case in Front-End Developers work.

Selected design: https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation Coded example: https://codepen.io/mariosmaselli/pen/ZpvLao The above example could have better markup in my opinion. However, the animation example was re-created with code which was the goal.

So, now I will post 3 designs, each harder accordingly and I would like you to recreate them in code. You could post your finished examples in codepen, but I would like that you would upload them to GitHub and post the link like in the home assignments. I expect the code to be semantically correct and accessible (aria) enabled.

Design: https://dribbble.com/shots/2127657-Day-002-Product-Card/attachments/387606 Description: a product card, very often we have to code something like this in real life for clients.

https://dribbble.com/shots/1406335-Purchase Description: purchase form. Simple, but very important part of many websites.

https://dribbble.com/shots/3429693-Uber-Design-Hero Description: Animations. These are maybe a bit over the top animations, but it is very often you will have to deal with animations, so it's nice to have practice.

Remember, this will look good in your portfolio, you will gain real life practice coding delivered designs and you will be more confident of your skills! Good luck!