Autoplay
Autocomplete
Previous Lesson
Complete and Continue
BigCommerce Front-end Foundations
Introduction
Welcome (3:27)
Don't Miss Your Completion Badge
Prerequisites
Getting Started with Cornerstone (9:00)
The Stencil CLI (11:03)
Stencil CLI Advanced Concepts (10:31)
Filesystem Tour (6:16)
1.1: Page Composition
Introduction to Handlebars (3:51)
1.1.1: Nesting, Blocks and Partials (7:16)
1.1.2: Pages, Layouts and Components (10:14)
1.1.3 (Exercise): Hello World with Partials (7:33)
1.1.4 (Exercise): Hello World with a Component (5:21)
1.1: See the Code
1.2: Handlebars Expressions
1.2.1: Handlebars Expressions Basics (9:42)
1.2.2: Handlebars Helpers (8:29)
1.2.3: Evaluation Context (11:58)
1.2.4 (Exercise): Flesh Out Home Page (12:51)
1.3: Advanced Handlebars
1.3.1: Advanced Handlebars Concepts (11:38)
1.3.2: Array Handling (6:03)
1.4 (Exercise): Product Info Blocks
1.4.1: Preparing the Info Blocks Data (10:36)
1.4.2: Implementing the Product Info Blocks (13:02)
1.4.3: Using dynamicComponent (6:35)
1.4: See the Code
Chapter 1 Conclusion
Summary
2.1: Stencil Objects
Introduction to Stencil Objects (3:31)
2.1.1: The debug Parameter (6:58)
2.1.2: YAML Front Matter (11:29)
2.1.3: YAML-Controlled Objects (10:55)
2.1.4: Other Objects (10:45)
2.1.5 (Exercise): Expand Home Page Content (8:50)
2.2: Advanced Template Concepts
2.2.1: Custom Templates (9:19)
2.2.2 (Exercise): The Showcase Category Template (29:33)
2.2.3: Localization in Stencil (12:35)
2.2.4 (Exercise): Add Translation (13:20)
2.2.5: Widget Regions (8:10)
2.2.6 (Exercise): Add Regions (4:12)
2.2: See the Code
2.3: Theme Settings
2.3.1: Theme Settings Basics (4:58)
2.3.2 (Exercise): Create Theme Settings (15:34)
2.3.3: Theme Setting Schema (7:52)
2.3.4 (Exercise): Create Theme Setting Schema (16:34)
2.3: See the Code
Chapter 2 Conclusion
Summary
3.1: CSS
3.1.1: CSS Toolsets and Structure (17:34)
3.1.2: Custom Stencil Sass Functions (11:58)
3.1.3 (Exercise): Styling Our Custom Features (21:57)
3.2: Image Handling
3.2.1: Static Images (7:21)
3.2.2 (Exercise): Add the Blog Section Logo (6:04)
3.2.3: Content Images Part 1 (15:42)
3.2.4: Content Images Part 2 (8:35)
3.2.5 (Exercise): Add the Category and Brand Section Logos (11:14)
3.2.6: Responsive Images (26:42)
3.2.7 (Exercise): Add Showcase View Images (15:07)
3.2: See the Code
3.3: Fonts and Icons
3.3.1: Using Custom Fonts (10:13)
3.3.2 (Exercise): Add Font Settings (15:34)
3.3.3: Using Icons (7:44)
3.3.4 (Exercise): Add Product Info Block Icons (7:26)
3.3: See the Code
3.4: JavaScript
3.4.1: JavaScript Toolsets and Structure (13:45)
3.4.2: Custom Page Modules (9:39)
3.4.3: Using Theme Settings in JS (5:40)
3.5 (Exercise): Finishing the Showcase View
3.5.1: Showcase Icons and Styles (16:01)
3.5.2: Showcase Enhanced View Functionality (20:09)
3.5.3: Add Showcase Theme Settings (8:29)
3.5: See the Code
Chapter 3 Conclusion
Summary
4.1: The Theme in Production
4.1.1: Bundling and Applying Your Theme (9:39)
4.1.2: Alternative Deployment Methods (7:58)
4.1.3: Editing Theme Files in the Admin (2:37)
4.2: Page Builder
4.2.1: Page Builder Widgets (11:15)
4.2.2: Editing Theme Settings (5:50)
4.2.3: Pulling the Latest Theme Setting Values (6:29)
4.3: Dev and Deployment Workflows
4.3.1: Compatibility with Upgrades (12:20)
4.3.2: QA and Content Strategies (11:24)
Chapter 4 Conclusion
Summary
Wrapping Up
Get Your Badge
Congratulations!
4.1.1: Bundling and Applying Your Theme
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock