Christopher Dodd – Shopify Theme Developer

Here’s What You Get:

Frontend Javascript

15 Lessons
Includes 1 additional product

Javascript is the programming language of the web and in this module, you’ll learn how to introduce interactivity onto any website. This is Javascript specifically for frontend web development, straight to the point, without the fluff.

What’s included?
Within the module, you’ll have access to the following lessons…

• Introduction
• What is Javascript
• Javascript Programming Fundamentals
• Programming Fundamentals Introduction
• Variable Declaration & Data Types
• Loops and Conditionals
• Functions and Scope
• Arrays and Array Methods
• HTML DOM
• HTML DOM Introduction
• DOM Traversal and Manipulation
• Events and Event Listeners
• AJAX – Asynchronous Javascript
• AJAX Theory
• AJAX in practice
• Javascript in Practice
• Practical Project – Part 1
• Practical Project – Part 2
• Conclusion

HTML and CSS Fundamentals

35 Lessons
Learn the core essential languages of Frontend Web Development of HTML and CSS in this balanced 30+ lesson module, teaching you everything you need to know about the languages without the fluff.

What’s included?
Within the module, you’ll have access to the following lessons…

• Introduction
• How to Navigate the Module
• What is HTML & CSS
• HTML
• Anatomy of a Tag
• Headings and Paragraphs
• Links,Images and Buttons
• HTML in Practice 1
• Lists
• Tables
• Forms
• HTML in Practice 2
• HTML Head
• HTML Layout
• HTML in Practice 3
• Classes, IDs and Semantic Elements
• Other Elements
• CSS
• Anatomy of a CSS Ruleset
• CSS Selector Types
• How to use CSS in a web project
• CSS in Practice 1
• CSS Box model
• CSS Position Property
• CSS in Practice 2
• CSS Flexbox
• CSS in Practice 3
• CSS Grid
• CSS in Practice 4
• CSS Units
• CSS Variables
• CSS Media Queries
• CSS in Practice 5
• CSS Specificity
• CSS Other Properties
• Watch these last
• What to do when you’re stuck
• Next Steps

Introduction to Shopify Theme Development (Full Course Members)

Closed
Course
5 Lessons

This module is exclusively for students who have elected to take the theme developer bridging course.

Simply sign up to that course to gain access.

Contents:

• Introduction
• Shopify and Shopify Themes
• Theme Development Workflow
• Theme Code Folder Overview
• How to Navigate the Course

Responsive Web Development

16 Lessons
Learn how to apply your HTML / CSS skills to create responsive websites in this practical module where we’ll learn how to code up a web page based on a Figma design

What’s included?
Within the module, you’ll have access to the following lessons…

• Introduction to the module
• Introduction to the design file
• How to think about Responsive Development
• Project Setup
• Section 1 Development
• Section 1 – Setting up Core Styles
• Section 1 – Responsive HTML
• Section 1 – Media Queries 1: Mobile screen sizes
• Section 1 – Media Queries 2: Other screen sizes
• Section 2 Development
• Section 2 – Assignment
• Section 2 – Solution
• Section 3 Development
• Section 3 – Assignment
• Section 3 – Solution
• Section 4 Development
• Section 4 – Assignment
• Section 4 – Solution
• Conclusion
• Conclusion and next steps
• Updates
• Figma to HTML with v0

Shopify Javascript

15 Lessons
Includes 1 additional product
Learn how to use Shopify’s AJAX APIs (including the Cart, Product and Search APIs) to supercharge interactivity on the frontend.

What’s included?
Within the module, you’ll have access to the following lessons…

• Introduction
• Setup instructions before we start coding Javascript in Shopify
• Setting up a development store
• Setting up your development environment
• Javascript in Shopify
• Basic theory and fundamentals for using Javascript in a Shopify Theme
• Liquid vs Javascript
• How to access Shopify data using Javascript
• How to include Javascript in a Shopify theme
• Product Variant Selection
• Not an API but a very common interaction in Shopify, powered by Javascript
• Product Variant Selection – Main Lesson
• Product Variant Selection – Web Component Refactor
• Shopify AJAX APIs
• A closer look at the 4 Shopify AJAX APIs
• Cart API
• Product API
• Product Recommendations API
• Predictive Search API
• Appendix 1: Youtube Videos
• These videos have been posted for free on Youtube but they are also relevant to this module.
• The Section Rendering API
• AJAX Collection API (Hack)
• Appendix 2: Skillshare Lessons
• Relevant lessons taken from my Skillshare classes
• The Storefront API

Shopify Liquid – The Complete Course

32 Lessons
Your complete guide to coding Shopify themes using the native templating language.
Over 4 hours of lessons covering theoretical understanding and practical application of the language.

What’s included?
Within the module you’ll have access to the following lessons…

• Introduction
• Introduction to the Module
• Setup instructions before we start coding Liquid
• Setting up your development store & adding a staff account
• Setting up your local development environment
• Shopify Liquid 101
• Theory Lessons to understand how Shopify Liquid works as a language
• Shopify Liquid vs Javascript
• Basic Liquid Patterns – Tags and Filters
• Accessing Store Data Through Objects
• Theme and Section Data
• JSON – a closer look
• JSON Templates
• JSON Locales
• Theme Structure
• Blocks are smaller, reusable pieces of Liquid that each have their own set of settings, and can be added, removed, and reordered within a section.
• Introduction to Blocks
• The Three Types of Blocks in Shopify
• Theme Blocks
• Interlude
• Shopify Themekit
• Shopify Liquid in Practice
• How to use Shopify Liquid to code up the different templates of your theme
• How to Code Menus – Admin Setup
• How to Code Menus – Liquid Code
• How to Code Images
• How to Code Product Forms
• How to Code the Cart Page
• Coding Blogs and Articles – Admin Setup
• Coding Blogs and Articles – Liquid Code
• How to Code Pages + Alternative Templates – Admin Setup
• How to Code Pages + Alternative Templates – Liquid Code
• How to Code the Search Page
• Appendix 1: Youtube Videos
• These videos have been posted for free on Youtube but they are also relevant to this module.
• Shopify Metafields
• Shopify Metaobjects
• Shopify Metaobject Pages
• Shopify Section Groups
• Liquid vs JSON Templates
• Update: Variant object now accessible within product_option_value
• Appendix 2: Skillshare Lessons
• Relevant lessons taken from my Skillshare classes
• Advanced Liquid Patterns

Shopify Store Setup: Understanding the Shopify eCommerce Platform

10 Lessons

This module contains all the core essentials you need to understand the Shopify platform. We’ll start with an overview of the Shopify eCommerce structure and then take a closer look at the various pieces that make up a Shopify store like products and variants, custom pages and navigation, themes and apps

What’s included?
Within the module you’ll have access to the following lessons…

• Introduction
• Creating a development storeShopify Store Architecture
• Products and Variants
• Product Organisation
• Pages, Blog posts and Navigation
• Themes & Templates
• Custom Data
• Discounts
• Apps

Web Components

Course
12 Lessons
Covering the set of 4 specifications that make up web components meta-specification and how we can use these to create new custom and reusable HTML tags for use in web pages and web apps. Web Components became super relevant to Shopify Theme Developers in 2021 when Shopify released a new default theme where a lot of the Javascript functionality was encapsulated in web components.

Contents:

• Introduction
• Web Components – A Real Life Example
• The 4 Web Component Specifications
• Custom Elements Part 1
• Custom Elements Part 2
• The Shadow DOM
• Slots and Templates
• Customized Built-in Elements
• ES Modules
• Web Components in Practice – Part 1
• Web Components in Practice – Part 2
• Web Components in Practice – Part 3