DYODE. Dev Challenges

Liquid Challenge

These questions should be answered with real world solutions in liquid

*Please provide these answers in written form

1. Describe how you would make a line of text in a homepage section editable from theme customization and how you would access this in liquid.
2. How would you add the collection featured image as a banner on the collection liquid template?
3. Using liquid code and HTML, create a simple pagination container, "< 1 2 ... 5 >".
4. Using liquid code, access the product named "Blue T-Shirt". Store the id, title, handle, price, url, and image in variables.
5. Using liquid code, create a key:value array using the list below. Loop through the array. Upon key type, store the value in a variable to be used later:
   • fruit:apple
   • vegetable:carrot
   • cloth:t-shirt
   • denim:jeans

Frontend Challenge

Once you complete the challenge, you'll:

• You send us a github link to your repo and a public preview URL for quick access
  • Heroku, Netlify, GitHub pages are some free options for hosting
• We'll run yarn install and yarn start to view your result

The Test

• Use a javascript framework to build out what you see in this Figma link.
  • Acceptable frameworks: React, Next, Gatsby, Vue, Nuxt
• This should be built responsive using the mobile first philosophy.
• It contains two carousels, a hero carousel and a product carousel.
• Please find a good responsive carousel dependency to use.
• Please refrain from using any style libraries ie: Bootstrap, Material Ui, Foundation, etc...

What we're looking for:

• How closely it resembles the original design
• How you organize your components
• Reusability
• How well your elements scale responsively
• An understanding of what the mobile first philosophy means
• A separation between javascript and scss.