SELL SOMETHING COOL GROUP EXERCISE

Here are the setup instructions:

cd ~/code/$GITHUB_USERNAME
git clone git@github.com:MarcelSF/html-group-challenge.git
cd html-group-challenge
rm -rf .git
stt

Challenge Objectives!

This livecode is here to get out creative energy going! It's Front-End after all!

You and your buddy must develop a product card and sell ONE of the products based on the list of images.

Our CSS is now organized in different components, so RESPECT the folder structure! CSS for the components need to go inside the Components folder in separate CSS files. Don't forget to import them in style.css, otherwise your CSS code WON'T be read 😬

For example, you start with a card.css file, so your css styling relevant to the CARD should go there. If you code another component, such as a button, you should create a new file 'button.css' for that component.

Tips on how to proceed:

Step #1 -> Draw your html on paper or Miro. Think about what components your card should have. Look at the cool examples the teacher will show as inspiration for your Product Card

Step #2 -> Write your HTML code from beginning to end. It will look ugly, but HTML isn't worried about looking pretty. That is a job for CSS

Step #3 -> Start styling your card with CSS! This is how we make our components look slick. Take your time, remember to apply colors, spacing, etc. Maybe select new fonts for the card? The world of Front-End is yours!

Step #4 -> At the end of the livecode, present your card to your batch mates!

OBS: Want to sell your own product? Feel free to do so, just add the right image to the IMAGES folder and have fun!

TIPS:

Don't forget to READ what we already provided for you in the style.css file. You already have access to Font Awesome, so use those icons to your best advantage!

Do the exercise in steps. Talk with your buddy. Think about the layout and what the final product will look like. Don't be afraid to experiment!😬

Resources:

Color Picker: https://coolors.co/