![](https://uploads.heightsplatform.com/program/ux365/course/40/cover_image/original-938ca38088f4e2b264a51bffea7be712.jpg)
UX + WEB DESIGN MASTER COURSE
My step-by-step guide to UX strategy, IA, Design + Basic HTML + WordPress Development for websites.
Learn how to create and develop UX strategy, Information Architecture and UI design for web sites and apps — and learn basic code to build a basic HTML site, a WordPress site and a basic eCommerce store.
This course will teach you the nuts and bolts of real-world UX project work, including design, content, and coding. And you'll learn from the ground up, so it doesn't matter how much experience you have when you start.
You'll be exposed to principles and strategies, but, more importantly, you'll learn how to actually apply these abstract concepts by coding three different websites for three very different audiences.
Improve web sites and systems with UX strategies
- Apply strategies for better UX to a site's content and design.
- Understand Information Architecture (IA) to make content relevant, useful and findable.
- Understand the user needs, business goals and visual design principles that dictates how your website should look.
- Design and code a B2B website, a B2C blog, and an eCommerce site.
This course will help you stand out as a web designer, teaching you how to apply User Experience strategies that will make every site or app you build useful, usable, and valuable.
Reinforce what you're learning using the bonus 30-page downloadable UX Guidebook.
Filled with exercises and activities, the UX Guidebook is a great tool to reference as you progress through the course, or while developing your own custom sites.
You'll also get hands-on experience designing and coding three different types of sites.
This will give you the confidence to pursue similar projects if you're already a web designer, if you want to get into UX or UI design, or just want to enhance your own current site.
What You'll Learn
Even if you're a complete beginner, this course will show you how to make a website functional, attractive and successful. It will walk you through all of the steps required to enhance the User Experience on any site, right down to the code, content, and design.
- You'll begin by defining who your website users are and what they expect from the website.
- You'll also learn how and why business goals — yours or your client's — have to be uncovered and addressed for site success.
- You'll learn what questions to ask both groups, and you'll use the answers to inform your content and design decisions.
- Next, you'll dig into Information Architecture, which looks at the content on your website and how it should be organized, categorized, prioritized and labeled.
- You'll also tackle how to design your website depending upon who your users are, whether your website is B2B (business-to-business), B2C (business-to-consumer), or an eCommerce site for selling products online.
- Different audiences have different needs, so learning what your target user expects from your site means you'll be able to design and build a site that meets those expectations and leads to greater conversions.
- In addition to knowing what you need to put into your website to make it stand out from the crowd, you'll also learn how to identify and remove UX- and UI-related obstacles.
- The ability to see and solve these problems will ensure every website you build moving forward will be useful, usable and valuable to the people who use it.
- Most importantly, you'll then learn how to actually build and code these types of sites using HTML, CSS, WordPress, and more.
By the end of this course, you'll have an in-depth understanding of UX and web design, as well as the tools to develop a variety of sites with the right code.
You'll know why UX is so important to both users and businesses, what content is needed on a site, what UI design is appropriate, and how to transform your vision into a fully functional website using the most effective tools available.
188 Lessons
Already Joined? Login
Course Overview: What You'll Learn
![](https://uploads.heightsplatform.com/program/ux365/lesson/331/cover_image/f027dd332ac36f35488331bec1f1bcd8.png)
Welcome: Get Ready to Define, Design and Code!
![](https://uploads.heightsplatform.com/program/ux365/lesson/332/cover_image/998bd359cc0091b87d78588c01cfbdc5.jpg)
Download the BONUS 30-page Course Guidebook
![](https://uploads.heightsplatform.com/program/ux365/lesson/333/cover_image/9c29d107ec95eb236dafb2904c773b37.png)
Introduction to UX
Definition: Planning for Success
![](https://uploads.heightsplatform.com/program/ux365/lesson/334/cover_image/18d0c428588246afdd9b210e4491a103.png)
Why Are We Doing This?
![](https://uploads.heightsplatform.com/program/ux365/lesson/335/cover_image/26ec5701aeb795f804524ae349f75fba.png)
Three Crucial Questions (You Must Ask)
![](https://uploads.heightsplatform.com/program/ux365/lesson/336/cover_image/e290808dc99bb797121a2be5144dfcc3.png)
What's Worth Doing?
![](https://uploads.heightsplatform.com/program/ux365/lesson/337/cover_image/32a65d81a47d1eb2a9eff0fb03e7dfc4.png)
What Are We Creating?
![](https://uploads.heightsplatform.com/program/ux365/lesson/338/cover_image/3f4794e6022723b99d10c675391ddb3d.png)
What Value Does It Provide?
![](https://uploads.heightsplatform.com/program/ux365/lesson/339/cover_image/f5100d74ab837225d4b97e4bebef8cbd.png)
SNACK BREAK: Who Are Your Users?
![](https://uploads.heightsplatform.com/program/ux365/lesson/340/cover_image/bc889f0bac493f973c7a67a430217f8f.png)
Exercise: Determining Value & Strategic Opportunity
Definition: Planning for Success Part II
![](https://uploads.heightsplatform.com/program/ux365/lesson/341/cover_image/db827af2dc4a46231acb9d7fd3df9db4.png)
It's Not Just About Users: The UX Value Loop
![](https://uploads.heightsplatform.com/program/ux365/lesson/342/cover_image/3a6d5902fd83f5224ce3f70b1a1dea80.png)
Business Stakeholder Research
![](https://uploads.heightsplatform.com/program/ux365/lesson/343/cover_image/183a01516504bc773983e58097de6312.png)
Identifying Business Goals
![](https://uploads.heightsplatform.com/program/ux365/lesson/344/cover_image/e69f6eb9a148f365168c39ef70db6a33.png)
SNACK BREAK: What Are Your (or Your Client's) Business Goals?
![](https://uploads.heightsplatform.com/program/ux365/lesson/345/cover_image/714ef375a1658480030f0410b7acde95.png)
User Research: Putting People First
![](https://uploads.heightsplatform.com/program/ux365/lesson/346/cover_image/1ef980d56780e0bfd05f010c968c8650.png)
Identifying User Needs
![](https://uploads.heightsplatform.com/program/ux365/lesson/347/cover_image/f9a6fa020cc975392fc0afd9196a0cb0.png)
Decision Paths: Connecting User Needs with Strategy
![](https://uploads.heightsplatform.com/program/ux365/lesson/348/cover_image/a35a6005ecdd3117958317659789640a.png)
Exercise: Create a Decision Path
![](https://uploads.heightsplatform.com/program/ux365/lesson/349/cover_image/ff33600215359b1295da7d5c4e7d5fb3.png)
Introduction to Requirements
![](https://uploads.heightsplatform.com/program/ux365/lesson/350/cover_image/86088b97d56e0f66b0717713c9555145.png)
Generating Meaningful Requirements
![](https://uploads.heightsplatform.com/program/ux365/lesson/351/cover_image/6102e189d9988f3418d94b334dd6000a.png)
Three Kinds of Requirements
![](https://uploads.heightsplatform.com/program/ux365/lesson/352/cover_image/4ff2fd80bf6147b4623ea0eae6e31675.png)
Documenting Requirements
![](https://uploads.heightsplatform.com/program/ux365/lesson/353/cover_image/e20c92a83d0c8e132f2bb6b5242d94eb.png)
Determining Project Scope
![](https://uploads.heightsplatform.com/program/ux365/lesson/354/cover_image/5d0fe2b01b582b9fcd130aaaaf36dedc.png)
Controlling Scope Creep
![](https://uploads.heightsplatform.com/program/ux365/lesson/355/cover_image/e202adf806b29385a9445373d9d73a94.png)
Exercise: Smart Project Scoping
Definition: Planning for Success Part III
![](https://uploads.heightsplatform.com/program/ux365/lesson/356/cover_image/1586dda8ebf44a95404faa0a81400532.png)
Planning for User Testing
![](https://uploads.heightsplatform.com/program/ux365/lesson/357/cover_image/7e91e717cbc4abe807ac949ba2befc28.png)
Creating a Test Plan: Who Are We Testing For?
![](https://uploads.heightsplatform.com/program/ux365/lesson/358/cover_image/deb866e948451064ba8c108293761c4a.png)
Prioritizing Device and Browser Support
![](https://uploads.heightsplatform.com/program/ux365/lesson/359/cover_image/76ae8cfe4ba6d86342e1b7dd8f19d100.png)
What to Test: Functionality
![](https://uploads.heightsplatform.com/program/ux365/lesson/360/cover_image/110de53023ee9c0355104f2ee27b58c3.png)
What to Test: Usability
![](https://uploads.heightsplatform.com/program/ux365/lesson/361/cover_image/31313e9b4184bda72a6ee51bcde87b51.png)
What to Test: Errors and Exceptions
![](https://uploads.heightsplatform.com/program/ux365/lesson/362/cover_image/f69c8d3274f3edc9909de38f1a8e3d57.png)
What to Test: Compatibility
![](https://uploads.heightsplatform.com/program/ux365/lesson/363/cover_image/32683c3a9c2c3263248698d92aee5117.png)
What to Test: Performance
![](https://uploads.heightsplatform.com/program/ux365/lesson/364/cover_image/fb5feccb1808f0b4198f87aa3922df16.png)
What to Test: Security
![](https://uploads.heightsplatform.com/program/ux365/lesson/366/cover_image/17cb5abd2e92d60008591783a9bd882b.png)
Definition Takeaways: Things to Remember
Information Architecture: Creating a Solid Foundation
![](https://uploads.heightsplatform.com/program/ux365/lesson/367/cover_image/5d462d1030cc4c75a2fcde37c87c8953.png)
Information Architecture: Organizing Content and Flow
![](https://uploads.heightsplatform.com/program/ux365/lesson/368/cover_image/0f4b805ef9490911ad92f8ad93f87526.png)
What IS Information Architecture (IA)?
![](https://uploads.heightsplatform.com/program/ux365/lesson/369/cover_image/3f57a56bff7182428cd435e10df59177.png)
Content Strategy: Identifying, Organizing and Delivering
![](https://uploads.heightsplatform.com/program/ux365/lesson/370/cover_image/4ac0cf30defa5279503ad19cbd16e8aa.png)
Determining Content Requirements
![](https://uploads.heightsplatform.com/program/ux365/lesson/371/cover_image/37f09f76c6e23e75ff4b8546115eb4bc.png)
Exercise: Identifying Content Workflows
![](https://uploads.heightsplatform.com/program/ux365/lesson/372/cover_image/a048ee4c0eaf9e160a6327b8d0ac1849.png)
My Tips for Successful Information IA Modeling
![](https://uploads.heightsplatform.com/program/ux365/lesson/373/cover_image/09754dea74a679a8ad8128e2b01609f2.png)
Creating and Prioritizing IA
![](https://uploads.heightsplatform.com/program/ux365/lesson/374/cover_image/b0038e47a1862c8f9c865f7dee1e7e2e.png)
Content Labeling
![](https://uploads.heightsplatform.com/program/ux365/lesson/375/cover_image/10da4233dd9475e44d81f841798595d9.png)
File Naming
![](https://uploads.heightsplatform.com/program/ux365/lesson/376/cover_image/646bbc7c925555e05071ba3b2f95c139.png)
Grouping and Classifying Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/377/cover_image/cced43160c1a5918c1606f030bb95b6c.png)
Exercise: Determining Information Priority
Information Architecture: Creating a Solid Foundation Part II
![](https://uploads.heightsplatform.com/program/ux365/lesson/378/cover_image/2fff7e25a3319d4150f28825a09a7d52.png)
Exercise: Turning Information Priority into an IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/379/cover_image/71b254ee01e24bcf5f42594791273669.png)
IA Models: Which One's Right for My Site?
![](https://uploads.heightsplatform.com/program/ux365/lesson/380/cover_image/cb01fd893cd0be09b4fa9f5009d0f210.png)
Hierarchical Tree IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/381/cover_image/064d8d4f20c9015f4600b9944ef8d042.png)
Nested List IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/382/cover_image/c9f5d11c0fbc73a901dff2e766e77025.png)
Hub and Spoke IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/383/cover_image/a3d69e12501f44a8546258402ed83aa4.png)
Bento Box IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/384/cover_image/8402eb0044901709cddb94c13e444fac.png)
Filtered View IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/385/cover_image/b5cf50e9ee9430e6a856c166dd143991.png)
Combining IA Models
![](https://uploads.heightsplatform.com/program/ux365/lesson/386/cover_image/9845793f3862fb7ff47332bd08a49c91.png)
Tools for Creating IA Models
![](https://uploads.heightsplatform.com/program/ux365/lesson/387/cover_image/ecc5c5a76aa02cac82e7d88cf3022cc8.png)
Socializing and Validating Your IA Model
![](https://uploads.heightsplatform.com/program/ux365/lesson/388/cover_image/a2966493c3c020cf768a31dd2cf3dd93.png)
SNACK BREAK: Create an IA Model for Your Website
Information Architecture: Creating a Solid Foundation Part III
![](https://uploads.heightsplatform.com/program/ux365/lesson/389/cover_image/60bd5f80a8ca1878a7e9853bef6750fe.png)
Navigation Design
![](https://uploads.heightsplatform.com/program/ux365/lesson/390/cover_image/2ff311146430fc8e93ab72286dc6977b.png)
Primary and Secondary Navigation
![](https://uploads.heightsplatform.com/program/ux365/lesson/391/cover_image/996a013df34dc51f2d772f3ac08e3fe3.png)
Global and Local Navigation
![](https://uploads.heightsplatform.com/program/ux365/lesson/392/cover_image/c3a3bfffcadc420f4237db068144f525.png)
Navigation for Different User Types
![](https://uploads.heightsplatform.com/program/ux365/lesson/393/cover_image/1e9d2180efde21f7648a4acccd2193a9.png)
Validating Your Navigation Scheme
![](https://uploads.heightsplatform.com/program/ux365/lesson/394/cover_image/8e281dcdafa2fdac6a092de46c9746e5.png)
Exercise: Determining Key Navigation Paths
![](https://uploads.heightsplatform.com/program/ux365/lesson/395/cover_image/5f92a1d32fb4b8b4ce607f0c2c4e131a.png)
Wireframing 101
![](https://uploads.heightsplatform.com/program/ux365/lesson/396/cover_image/dd21688f36812f9a917aeb58e2509b8a.png)
What a Wireframe ISN'T
![](https://uploads.heightsplatform.com/program/ux365/lesson/397/cover_image/7584466e697002468162a1d05e1eeac5.png)
What a Wireframe IS
![](https://uploads.heightsplatform.com/program/ux365/lesson/398/cover_image/b939019ed6b6758ba9866ec91b89aca7.png)
My Tips for Creating Successful Wireframe Prototypes
![](https://uploads.heightsplatform.com/program/ux365/lesson/399/cover_image/c0e1ca615c81b3bf897c5e0957d4058b.png)
Creating Wireframes: Tools of the Trade
![](https://uploads.heightsplatform.com/program/ux365/lesson/400/cover_image/2392b479665d8a3df8e925e5116672ec.png)
SNACK BREAK: Try Creating a Basic Wireframe on Your Own
![](https://uploads.heightsplatform.com/program/ux365/lesson/401/cover_image/7776df38547e29ac4b2ef8913b563694.png)
Exercise: Creating a B2B Wireframe with Axure RP Pro
![](https://uploads.heightsplatform.com/program/ux365/lesson/402/cover_image/1c1c2e0e03f7f685f1691380f03a6acd.png)
Socializing and Validating Wireframes
![](https://uploads.heightsplatform.com/program/ux365/lesson/403/cover_image/a034d5bcad451b65426a255938552185.png)
Information Architecture Takeaways: Things to Remember
Design: Information, Interaction and Interface
![](https://uploads.heightsplatform.com/program/ux365/lesson/404/cover_image/e5152f52eca9df9e57ead740a3fde090.png)
"What's It Gonna Look Like?" An Introduction to Design
![](https://uploads.heightsplatform.com/program/ux365/lesson/405/cover_image/605db4a875bb86c1a64074ae6a54c58d.png)
Defining Appropriate User Interface (UI) Design
![](https://uploads.heightsplatform.com/program/ux365/lesson/406/cover_image/24244bdb19247bd85309c49930bc4ae8.png)
Timeless UI Design Principles, Part 01
![](https://uploads.heightsplatform.com/program/ux365/lesson/407/cover_image/c4e8fea1292dd50a3a4cd9f1b1ba9585.png)
Timeless UI Design Principles, Part 02
![](https://uploads.heightsplatform.com/program/ux365/lesson/408/cover_image/c7303e53f7eb3a36c7c3fdf02c246851.png)
Timeless UI Design Principles, Part 03
![](https://uploads.heightsplatform.com/program/ux365/lesson/409/cover_image/e8429378fde7e907e1d73b8bb1500d93.png)
Timeless UI Design Principles, Part 04
![](https://uploads.heightsplatform.com/program/ux365/lesson/410/cover_image/713da0b8038496562b33a07864d64a5d.png)
SNACK BREAK: Identify Design Principles in an Existing UI
Design: Information, Interaction and Interface Part II
![](https://uploads.heightsplatform.com/program/ux365/lesson/411/cover_image/d1cbfd3862f7dff3c7e2ef82a173e19b.png)
My Tips for Solving Visual Problems
![](https://uploads.heightsplatform.com/program/ux365/lesson/412/cover_image/4be50b817801248c8351d010a51c5f5f.png)
Organizing Visual Information - Part 01
![](https://uploads.heightsplatform.com/program/ux365/lesson/413/cover_image/fb2afc4ce36d1f2315c91b388b0bdf82.png)
Organizing Visual Information - Part 02
![](https://uploads.heightsplatform.com/program/ux365/lesson/414/cover_image/4ffe7a3ff71027b9ab7d222f0e8eb545.png)
Designing Appropriate Visual Hierarchy
![](https://uploads.heightsplatform.com/program/ux365/lesson/415/cover_image/d1996915f5aaa0a929db57f4a915750c.png)
Designing for Audience Expectation
![](https://uploads.heightsplatform.com/program/ux365/lesson/416/cover_image/0c0ad3b4f5f3312ea8f38a9ea58e8f45.png)
Designing for Interaction
![](https://uploads.heightsplatform.com/program/ux365/lesson/417/cover_image/faf40956e718d1703073d70512b620f4.png)
Exercise: Create a UI Design for a B2B Website
![](https://uploads.heightsplatform.com/program/ux365/lesson/418/cover_image/0cc6d63d1583c2eda2bbc06bc158e2f0.png)
Exercise: Create a UI Design Layout for a WordPress Blog - Part 01
![](https://uploads.heightsplatform.com/program/ux365/lesson/419/cover_image/62a6f68d53c362103bc27e2af94329c3.png)
Exercise: Create a UI Design Layout for a WordPress Blog - Part 02
![](https://uploads.heightsplatform.com/program/ux365/lesson/420/cover_image/12fd37d7eb3ffaf245741d4874557df0.png)
Exercise: Create a UI Design Layout for a WordPress Blog - Part 03
![](https://uploads.heightsplatform.com/program/ux365/lesson/421/cover_image/fbd077311b7ca31948d8950343516ca0.png)
Exercise: Create a UI Design Layout for a WordPress Blog - Part 04
![](https://uploads.heightsplatform.com/program/ux365/lesson/422/cover_image/c569b6aadefae614924ed3160b5a9ec4.png)
Exercise: Create a UI Design Layout for an Ecommerce Website
![](https://uploads.heightsplatform.com/program/ux365/lesson/423/cover_image/bcefc3e59071ef6286caf80b2c6b4d0b.png)
SNACK BREAK: Evaluate Your UI Design
![](https://uploads.heightsplatform.com/program/ux365/lesson/424/cover_image/b01815076cec638a7e3f8820983ee2bd.png)
Design Takeaways: Things to Remember
Development - Building a B2B Website with HTML & CSS
![](https://uploads.heightsplatform.com/program/ux365/lesson/425/cover_image/1f551343b5fb58d485421d844ed8f927.png)
Development: Coding, Customizing and Configuring
![](https://uploads.heightsplatform.com/program/ux365/lesson/426/cover_image/273d741d365d01529a426906e55fd668.png)
Dreaming in Code: You've Got the Power!
![](https://uploads.heightsplatform.com/program/ux365/lesson/427/cover_image/5be29852157ff26f69a45f96a0ef3b21.png)
Hosting & Domain Considerations
![](https://uploads.heightsplatform.com/program/ux365/lesson/428/cover_image/b2c7ccdde8b55150b6bf64e5847bae19.png)
File Structure and FTP: Organizing & Uploading
![](https://uploads.heightsplatform.com/program/ux365/lesson/429/cover_image/dc31a7350ab00c714e5623657ed422d5.png)
Basic HTML Structure: Building a Solid Foundation
![](https://uploads.heightsplatform.com/program/ux365/lesson/430/cover_image/dc713de86cf44d7a6c90d5f97b0d7f3c.png)
Tags, Elements and Attributes: Describing HTML Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/431/cover_image/1f8bbdc0a9e8398efee4d404f8c75b91.png)
What's In a Name? Titles and Headings
![](https://uploads.heightsplatform.com/program/ux365/lesson/432/cover_image/71b02488b15bf8b9f2b814dbd46f77aa.png)
Formatting Paragraphs: Creating and Styling Text Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/433/cover_image/773341423a26e0bad69690b660255a78.png)
Organizing Your Code: Using Indentation and Comments
![](https://uploads.heightsplatform.com/program/ux365/lesson/434/cover_image/8fa54b5cf85dceb818c751cf0d8295f3.png)
Creating Your First Web Page: Applying What You've Learned
![](https://uploads.heightsplatform.com/program/ux365/lesson/435/cover_image/6de4519f7cad6987bf087da0c59a5560.png)
Creating Your First Web Page: Applying What You've Learned
![](https://uploads.heightsplatform.com/program/ux365/lesson/436/cover_image/5f0536d83e2230a40d91368c0f1c53aa.png)
Content Elements – Hyperlinks: Getting from Here to There
![](https://uploads.heightsplatform.com/program/ux365/lesson/437/cover_image/03c0f71b1a012dbae4efd2583c8764bb.png)
Content Elements – Unordered and Ordered Lists: Creating and Formatting
![](https://uploads.heightsplatform.com/program/ux365/lesson/438/cover_image/6521ff265e137493c357fc4245f693e6.png)
Content Elements – Images: Adding Images and Defining Attributes
![](https://uploads.heightsplatform.com/program/ux365/lesson/439/cover_image/2886de9b0926bc24709305dc84d60574.png)
Content Elements – Audio and Video: Adding Media to Your Web Page
![](https://uploads.heightsplatform.com/program/ux365/lesson/440/cover_image/0ef81ec9df3d7242e14fc05299ccfcb0.png)
Font Styling: Defining Style, Color and Size
![](https://uploads.heightsplatform.com/program/ux365/lesson/441/cover_image/e1a1f94475c24360863b86bcbf761af7.png)
Exercise: Adding Images, Unordered Lists and Hyperlinks
![](https://uploads.heightsplatform.com/program/ux365/lesson/442/cover_image/b295a844c4270875f05254d28523360c.png)
Exercise: Adding Images, Unordered Lists and Hyperlinks
![](https://uploads.heightsplatform.com/program/ux365/lesson/443/cover_image/d395e04fe571df2b3c5b187a4c4c2b90.png)
CSS – Content Styling: Adding Good Skin to Good Bones
![](https://uploads.heightsplatform.com/program/ux365/lesson/444/cover_image/99003fd3c1a681f6bb875400386e804e.png)
CSS – Inline, Internal or External? Getting Smart
![](https://uploads.heightsplatform.com/program/ux365/lesson/445/cover_image/df9d904e3a3ef6d5c8711ad0f1441d28.png)
CSS – Inheritance: Sharing Attributes Efficiently
![](https://uploads.heightsplatform.com/program/ux365/lesson/446/cover_image/49163d5f75042964ff3f4cbbf02c09bd.png)
CSS – Background Color and Image: Creating Background Effects
![](https://uploads.heightsplatform.com/program/ux365/lesson/447/cover_image/9c9a24d5dd18452fc3f5eb0f48ce9367.png)
CSS – Font Color and Weight: Giving Text Impact and Emphasis
![](https://uploads.heightsplatform.com/program/ux365/lesson/448/cover_image/5a849efb57ebe795d1c6728afe186ad3.png)
CSS – Classes and Spans: Getting Specific with Styling
![](https://uploads.heightsplatform.com/program/ux365/lesson/449/cover_image/c6c800af5580f6dcc624d75ace575b99.png)
CSS – Working with Divs: Dividing and Conquering with Classes and IDs
![](https://uploads.heightsplatform.com/program/ux365/lesson/450/cover_image/c113eab75f9d8f142d16cdeec0ca1d63.png)
CSS – Link Styling: Using Text Decoration
![](https://uploads.heightsplatform.com/program/ux365/lesson/451/cover_image/a36795a56280346b08f6559bd71a087d.png)
Exercise – Creating a Navigation Menu: Leveraging CSS for Wayfinding
![](https://uploads.heightsplatform.com/program/ux365/lesson/452/cover_image/f01d7af2b4c2868618923ed46e4caaf7.png)
Basic Table Structure: Organizing Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/453/cover_image/f1207e1f03305143b50d48d3cedf2e5a.png)
Styling Tables with CSS: Enhancing Communication and Readability
![](https://uploads.heightsplatform.com/program/ux365/lesson/454/cover_image/4f7cb19638593a5e4e30657a05fc8698.png)
Margins and Padding: Establishing Purposeful Negative Space
![](https://uploads.heightsplatform.com/program/ux365/lesson/455/cover_image/8f79d9794fe6c8d4cc238750135301b7.png)
Display and Positioning: What, Where and How
![](https://uploads.heightsplatform.com/program/ux365/lesson/456/cover_image/393a6ddbd6a7da3f610a86b99bc365d3.png)
The Box Model: The Parts and the Whole
![](https://uploads.heightsplatform.com/program/ux365/lesson/457/cover_image/e33c2829fc0a403d0205b9b29556f724.png)
Float and Clear: Controlling Visual Flow
![](https://uploads.heightsplatform.com/program/ux365/lesson/458/cover_image/9f8d01aea12569bf8c9760d338a385d4.png)
Nested Layouts: Using Divs for Precision and Flexibility
![](https://uploads.heightsplatform.com/program/ux365/lesson/459/cover_image/6c2ae7a6d14f5298ec67ecc502e908fa.png)
Forms: Creating Good Input (and Output)
![](https://uploads.heightsplatform.com/program/ux365/lesson/460/cover_image/741840741f4a17746172254b6b72a503.png)
Creating Forms: Grouping Form Data
![](https://uploads.heightsplatform.com/program/ux365/lesson/461/cover_image/1be1b42ad943e77fe3aee544187ca878.png)
Styling Forms with CSS: Creating Consistency and Usability
Exercises: Build A B2B Website with HTML & CSS
![](https://uploads.heightsplatform.com/program/ux365/lesson/462/cover_image/e9cb4f8ea4fb18db972edb48782b5988.png)
Exercise: Create Your B2B Website Header
![](https://uploads.heightsplatform.com/program/ux365/lesson/463/cover_image/78cb2540f5072a69527970dd5d71883b.png)
Exercise: Create Your B2B Website Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/464/cover_image/a37995fe840e0b1a87b6e1ce776fdb32.png)
Exercise: Create Your B2B Website Footer
![](https://uploads.heightsplatform.com/program/ux365/lesson/465/cover_image/20a03257dd1fb3e9acf4d9562380f8e3.png)
Exercise: Create Your B2B Web Page: Putting It All Together
![](https://uploads.heightsplatform.com/program/ux365/lesson/466/cover_image/bfb33319647e7db1b880832de7936d7d.png)
Browser Testing: Tips and Tools
Development – WordPress Content Management System (CMS)
![](https://uploads.heightsplatform.com/program/ux365/lesson/467/cover_image/4341fd0f1c3681811ef9406bd7c053a3.png)
Installing WordPress Automatically: Using Your Hosting Provider's CPanel
![](https://uploads.heightsplatform.com/program/ux365/lesson/468/cover_image/3d402d6872a9e4f8de6035dfd94b6ec0.png)
Installing WordPress Manually: Using an FTP Client
![](https://uploads.heightsplatform.com/program/ux365/lesson/469/cover_image/65291afea3cf03006bab605fae602659.png)
The WordPress Dashboard: A Quick Tour of Features and Functions
![](https://uploads.heightsplatform.com/program/ux365/lesson/470/cover_image/2e83da99197ed1b01562e76f2c9940d9.png)
Posts vs. Pages: Creating Content in WordPress
![](https://uploads.heightsplatform.com/program/ux365/lesson/471/cover_image/3864fd5cf9b3d3952080eab29c68b907.png)
Categories: Organizing WordPress Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/472/cover_image/a0a3bddf9fe06c171aeeca4f912f02d3.png)
Tags: Adding Context To Your Posts
![](https://uploads.heightsplatform.com/program/ux365/lesson/473/cover_image/77f8424c2f654b701efb76af6a295568.png)
Comments: Connecting and Managing Conversations
![](https://uploads.heightsplatform.com/program/ux365/lesson/474/cover_image/0e956de8c9a99259bf15cc4e722a557b.png)
Formatting Text: Using the WordPress Text Editor
![](https://uploads.heightsplatform.com/program/ux365/lesson/475/cover_image/625daa019443848867b06fad54e6e955.png)
Adding Hyperlinks: Creating and Managing Links in WordPress
![](https://uploads.heightsplatform.com/program/ux365/lesson/476/cover_image/c35f51dbc7eb74929a699bf898096734.png)
Adding Images: Inserting and Managing Images in WordPress
![](https://uploads.heightsplatform.com/program/ux365/lesson/477/cover_image/e29eddda493db1a8fef5ecfa8edcca9d.png)
Adding Video: Inserting and Managing Video in WordPress
![](https://uploads.heightsplatform.com/program/ux365/lesson/478/cover_image/a88b6da5179359d20e0ee8d45c552adf.png)
Working with Plugins: Extending WordPress Features and Functions
![](https://uploads.heightsplatform.com/program/ux365/lesson/479/cover_image/ae529410440d2ea5b565613a0b77b236.png)
Exercise: Adding a Contact Form Plugin
![](https://uploads.heightsplatform.com/program/ux365/lesson/480/cover_image/27e092906cbcbe787c1c59241a30baaf.png)
Using Widgets: Enhancing Your WordPress Layout
![](https://uploads.heightsplatform.com/program/ux365/lesson/481/cover_image/c90c55a67edbded73f9d76263fef19d0.png)
Exercise: Adding a Widget
![](https://uploads.heightsplatform.com/program/ux365/lesson/482/cover_image/174e3ac0c77e570ddc218b77b97cd6d5.png)
Choosing a WordPress Theme: Finding, Evaluating and Installing
![](https://uploads.heightsplatform.com/program/ux365/lesson/483/cover_image/45193809e076ad1354de71c9698fbee7.png)
Customizing Your Theme: Structure, Content and Appearance
![](https://uploads.heightsplatform.com/program/ux365/lesson/484/cover_image/d74900b8dba8f717e15d7ad75f1d5d56.png)
Creating Custom Menus: Replacing Theme Menus
![](https://uploads.heightsplatform.com/program/ux365/lesson/485/cover_image/01f61de0ebf95eb0442df5ec668d1173.png)
Using the Code Editor: Modifying Your WordPress Theme
![](https://uploads.heightsplatform.com/program/ux365/lesson/486/cover_image/9bd1f8651774f1c0aeb1ecd2007c986d.png)
WordPress Settings: General, Reading, Writing and Permalinks
![](https://uploads.heightsplatform.com/program/ux365/lesson/487/cover_image/d3808b0a8fe8a87433c632e5af73cb8d.png)
Users and Roles: Assigning WordPress Access and Privileges
![](https://uploads.heightsplatform.com/program/ux365/lesson/488/cover_image/591fce1fe6da5cd9513484b14049de16.png)
WordPress Backup: Backing Up Your Blog and Database
![](https://uploads.heightsplatform.com/program/ux365/lesson/489/cover_image/8e0176bf3839fe5b4ce6aaf70b6436d4.png)
Updating WordPress: Automatic and Manual Updates
Exercises: Build A Blog with WordPress
![](https://uploads.heightsplatform.com/program/ux365/lesson/490/cover_image/029aecd134ae29a59edb328966df503c.png)
Exercise: Customizing Your Theme Header, Part 01
![](https://uploads.heightsplatform.com/program/ux365/lesson/491/cover_image/97d896e1040c72c72a686d6000213c39.png)
Exercise: Customizing Your Theme Header, Part 02
![](https://uploads.heightsplatform.com/program/ux365/lesson/492/cover_image/dea695d8732a9fafd8f5406104adea69.png)
Exercise: Customizing Your Page Content
![](https://uploads.heightsplatform.com/program/ux365/lesson/493/cover_image/10d68edabae02ae68ba813017bed6e8c.png)
Exercise: Customizing Your Footer
Development - Ecommerce Website with WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/494/cover_image/7410a67346cfe93cbf5b532708fd8004.png)
Installing WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/495/cover_image/94c2c157d84b0c55a560dacca70cfc01.png)
Basic Settings: Getting Started with WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/496/cover_image/9132c1b40946eeb664126b99825b832a.png)
Product Settings: Configuring Products in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/497/cover_image/d1641bafbc7622cbcfbd888128380ace.png)
Tax Settings: Configuring Sales Tax in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/498/cover_image/6f7e1c46da8bd48d8ea2eff2752eb5fe.png)
Checkout Settings: Configuring Checkout Options in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/499/cover_image/fb060acbc06624bacb7f669fc83c9fae.png)
Shipping Settings: Configuring Shipping in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/500/cover_image/ba0178f1a126779fbc47e0eadb3def34.png)
Account Settings: Configuring Customer Accounts in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/501/cover_image/668fa895af3c66a0f350909868cf63c7.png)
Product Categories: Adding Product Categories in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/502/cover_image/ec7f6dab5d87a6ea0a02756f902732c3.png)
Adding Simple Products in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/503/cover_image/771f95b74f56b97a38d38cbcc9e92fd4.png)
Adding Variable Products in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/504/cover_image/74118525a7ad745a7a51c7d34864ef92.png)
Adding Virtual and Downloadable Products in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/505/cover_image/94003a8cbd257119beb57d4c48c49e11.png)
Adding Linked and Related Products in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/506/cover_image/e58c60cf384a7552b3511e0484894488.png)
Creating Coupons: Configuring Special Offers in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/507/cover_image/8966bb8d72b794208edcc2b8f4b9df03.png)
Customizing Email: Email Messaging Customization in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/508/cover_image/f2c2daff38a21e5df13628b559d26541.png)
Managing Orders with WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/509/cover_image/b49ea2ab7d2c8bd493e9de3216eccd1a.png)
Managing Inventory with WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/510/cover_image/a645f9a3a2aa82f81432bd10322df342.png)
Reporting: Sales Reporting in WooCommerce
![](https://uploads.heightsplatform.com/program/ux365/lesson/511/cover_image/a201938bfaf93e77a5ec7e4b93018883.png)
Configuring Product Category Navigation in WooCommerce
Exercises: Build An Ecommerce website with WooCommerce and WordPress
![](https://uploads.heightsplatform.com/program/ux365/lesson/512/cover_image/95e1542faf6bd96e00d439c65d845105.png)
Exercise: Creating Your Storefront Home Page, Part 01
![](https://uploads.heightsplatform.com/program/ux365/lesson/513/cover_image/7496ab06962c37a10e67ae257342daf8.png)
Exercise: Creating Your Storefront Home Page, Part 02
![](https://uploads.heightsplatform.com/program/ux365/lesson/514/cover_image/81d36536a3f7fe16388016bfaf6828b9.png)
Exercise: Creating Your Storefront Home Page, Part 03
![](https://uploads.heightsplatform.com/program/ux365/lesson/515/cover_image/853f7f239b0335328b9ae94eef8121d2.png)
Exercise: Creating Your Storefront Home Page, Part 04
![](https://uploads.heightsplatform.com/program/ux365/lesson/516/cover_image/61451759532348eaddfcabb1266ea486.png)
Exercise: Creating Your Category Landing Page
Launch and Beyond
![](https://uploads.heightsplatform.com/program/ux365/lesson/517/cover_image/96c1d60cc201bc0317f3dc9fb04acfbb.png)
Prepare to Launch! Approval, Testing, Bugs and Beyond
![](https://uploads.heightsplatform.com/program/ux365/lesson/518/cover_image/724a01cffa48bfd52ab342b3d192e6a7.png)