Type to search

Design Development web Design

UX & Web Design Master Course: Strategy, Design, Development

Education Eyl 10

Learn how to apply User Experience (UX) principles to your website designs, code a variety of sites, and increase sales!

Joe Natoli

Hello and welcome.

My name is Jonah totally.

I’m a user experience consultant for the last 26 years I’ve been helping organizations of all shapes

and sizes create positive user experiences through Web sites apps systems and just about any kind of

digital product that you can think of.

What does user experience.

Well it’s the thing that makes any of those products useful usable and valuable.

OK that’s the heart and soul of something that’s successful if people use it and people derive value

from it and that means value also comes back to the creator or the business.

That means you make money you save money or people just in general like you.

One way or another value goes out and comes back in.

That’s what user spirits is and that is the core principle of what we’re going to do in this course

I’m going to walk you through four very distinct phases of building something.

All right.

We’re going to start with definition which is why are we doing this.

Why does it matter to users.

Why does it matter to business information architecture.

What content is needed.

How much of it is there.

What are we going to call it.

How are we going to categorize it.

To design what user interface design is appropriate what dictates how something should look and what’s

the difference between designing for a business to business website or business to consumer blog or

e-commerce product web site.

And we’re going to tackle all of that.

And finally I’m going to show you how to build all this.


You are going to design and build three very different kinds of sites.

You’re going to design and build a bit of the web site using TMLC SS You’re going to create a blog based

on the WordPress platform.

And then finally you’re going to design build an e-commerce Web site.


Including learning how to manage products and inventory and all those kinds of things.

OK so from soup to nuts we’re going to cover all of it in this course.

So whether you have dreamed of starting your own business and you want to start something online or

if you do client work and you simply want to be better at it or if you’re a print designer who’s looking

to move into web site design but doesn’t know where to start.

You are most definitely in the right place.

OK let’s go.

What is this course teaching

  1. A clear understanding of the principles and benefits of good UX and how to apply it to your website
  2. The confidence to know what information should be included in your website, and how to design it to increase conversions
  3. A strategy for making sure you know what people need from your website, and what you or your client needs from it in order to succeed
  4. The ability to code a variety of websites with HTML, CSS, WordPress, and other tools

Course Details

This course will teach you everything you need to know about UX, 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 Your Website with UX Strategies

  • Apply UX strategies to a site’s content & design
  • Understand Information Architecture to enhance the content on your website
  • Know what dictates how your website should look
  • Design and code a B2B website, a B2C blog, and an ecommerce site

Understand UX and Learn How to Develop Winning Websites

This course will help you stand out as a web designer, teaching you how to apply User Experience (UX) strategies that will make every site 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 website designer, if you want to get into web design, or if you want to enhance your current business site.

Contents and Overview

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 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 (IA), which looks at the content on your website, how you should categorize it, what you should call it, and more.

This will lay the foundation on which you can further build out your website to make users flock to it, stay on it, and hopefully make purchases.

Plus, you’ll tackle how to design your website depending upon who your visitors 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.

You’ll not only know how to effectively design B2B, B2C, and ecommerce sites, but you’ll also know exactly how to develop these sites, from start to finish.

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.

Who this course is for:
  • New or established business owners who want to gain more from their online presence
  • Beginners who want to learn UX, web design and/or development
  • Website designers who want to enhance their skills
  • Print designers who want to move into web design

What's ın Course Content

Course Overview
The purpose of this course is to share what I know with you — to show you what it takes to build a website from start to finish. From the initial idea roiling around in your head — or your client’s —to structuring information and content to visual design and development. I’m going to give you absolutely everything you need to know to build successful websites, no matter the purpose, the audience or the industry.

Welcome: Get Ready to Define, Design and Code!
Reinforce what you’re learning using the bonus 30-page UX Guidebook. It’s a great tool to reference as you progress through the course, or while developing your own custom sites. It’s filled with worksheets, exercises, checklists and activities that will help you apply great UX to any kind of project.

You can download the guidebook from the course sidebar.

Download the BONUS 30-page Course Guidebook
Introduction to UX

Definition: Planning for Success
Every website or app project should start with strategy, and strategy starts with asking a very simple question: Why Are We Doing This? Before you commit massive amounts of time, energy, resources and money to something, you have to consider the reason(s) for doing any of it. And in order to succeed, you need to be sure those reasons are the right reasons.

Why Are We Doing This?
No matter the industry, niche or product type, a core component of developing solid website strategy is asking three crucial, universal questions. Whether you’re building something from the ground up or redesigning an existing site, your marching orders are the same. You need to find out:

What’s worth doing?
What are we creating?
What value does it deliver?
Three Crucial Questions (You Must Ask)
We’ve got a handle on what the business needs, along with an understanding of what users need. Now — from all of that we’ve researched, from all that we’ve heard from stakeholders and users — what’s actually worth our time and effort? What’s worth the organization’s investment in the project? What’s worth our investment in the project?

What’s Worth Doing?
Part of your job is to make sure that everyone involved — from client stakeholders to design and development team members — is in agreement. You want shared understanding of the project goals and what needs to be designed and built in order to meet those goals. And you want to make sure that your discussions address the why, in addition to the what.

What Are We Creating?
Value is subjective, and its specific to that person’s reason for visiting your website in the first place. Keep this in mind: when a person visits your website, they already know what they want from it. So at this point, your task is to make sure that the value you (and/or your client) believe the website provides is a match for what users expect its value to be.

What Value Does It Provide?
SNACK BREAK: Who Are Your Users?
I’m going to walk you through a very simple but powerful exercise that you can use in order to find strategic opportunities and determine what’s most valuable — to both users and the business.

Exercise: Determining Value & Strategic Opportunity

Definition: Planning for Success Part II
The UX designer’s job is to address not only the information concerns and the related needs of users, but to insist on being very selective and analytical in designing task flows and functional elements that serve a greater goal. That greater goal includes what the business or the site’s creator needs as well in order to survive — and prosper. Designing with the UX Value Loop in mind ensures success for both groups.

It’s Not Just About Users: The UX Value Loop
Business Stakeholder Research
Business goals come primarily from the folks who are carrying the most responsibility and risk for the project’s success: stakeholders. These are your subject matter experts, the people who can explain to you what success means, both for the business and for them. One of the first critical things you have to do is find out how each stakeholder defines success — and how different those definitions are.

Identifying Business Goals
SNACK BREAK: What Are Your (or Your Client’s) Business Goals?
User Research: Putting People First
So once we know what the business goals are for the product, now it’s time to figure out what people (a.k.a. users) want from it. What are they after and what do they expect? What’s the value delivered to them in this equation? The best way to identify these needs is to ask questions of the people who will be using what you design and build.

Identifying User Needs
So at this point, we’ve heard from business stakeholders and users themselves about what their goals and needs are. But how do we use that information to make decisions about Information Architecture, or content strategy, or visual design or interactive technology? The best way I know to connect the two is to create what’s called a decision path.

Decision Paths: Connecting User Needs with Strategy
Exercise: Create a Decision Path
Introduction to Requirements
In terms of design and development, a website’s feature set — what we’ve all agreed we’re going to design and build — is defined by requirements.The more complexity we have, the more requirements we need. The more features we decide to implement, the more detail we need for what exactly those features are, how they should be designed and what level of coding, scripting, plugin or CMS platform is necessary to implement them.

Generating Meaningful Requirements
Requirements fall into three essential categories, each of which you must address and find answers to:

Things people say they need.
Things that they actually need.
Things that they don’t know they need.
Three Kinds of Requirements
Whatever requirements you create, you need to document them — even when you are using Agile or Lean methodologies. Documented reference of what matters most gives the entire team, on your side and on the client side two things:

A sense of the scope of what you’re building (and what you’re not)
A reference point for progress during the project lifecycle.
Documenting Requirements
It’s pretty much common knowledge (or it should be) that the discovery of feature or functionality requirements during UI design or development, is pretty much a recipe for disaster. Unfortunately, it happens quite often. Spending time determining, socializing and getting approval on scope will save you tremendous pain later on in the project.

Determining Project Scope
During the initial stages of any project, you can bet on two things happening:

Everybody and their brother has ideas about features.
There will be a significant number of questions surrounding content, features and functions that no one has answers to.
Both of these facts can quickly expand the scope of what you agree to design or build, unless you corral them both up front. Here’s how.

Controlling Scope Creep
Here’s an interesting (and fun) game you can use to determine what features and functionality matter most. More than a few of those things that sound like good ideas simply may not be possible. At least not right now, anyway. We may not have the time or the budget or the talent to pull these things off. This exercise will help you draw a clear line between what’s doable right now versus what has to wait for later.

Exercise: Smart Project Scoping

Definition: Planning for Success Part III
In this part of the course we’re going to create a test plan. That plan will tell you which browsers and devices are within the project’s specification. It’ll help you focus on what matters most and will reduce development time and costs. It’ll also set client expectations early on, which reduces the potential for misunderstanding later and minimizes scope creep. And most importantly, a good plan allows you to launch with confidence that everything displays and performs as expected.

Planning for User Testing
The time to create a test plan is now, early in the process. You will rarely have a situation where you can test everything you’d like, to the level of detail that you’d like. So the first thing you have to do is be realistic about what matters most — because you can’t do it all. You start with the people using the website — your users — to get a handle the scenarios that are most relevant to them.

Creating a Test Plan: Who Are We Testing For?
You use the information from the DEFINITION work — on your user’s browser/device scenarios — to determine which scenarios you will fully support, which you will partially support and which you won’t support at all. This is how you will divide and conquer.

Prioritizing Device and Browser Support
Here you’re testing all the links in website pages, forms used in the web pages for submitting or getting information from the user — in addition to cookie and database connection testing.

What to Test: Functionality
Usability testing, in a nutshell, helps determine whether the website is easy to use. Is navigation clear and consistent? Is content logical and easy to understand? Usability testing identifies problems before they’re coded. The earlier issues are identified and fixed, the less expensive those fixes will be in terms of time, schedule and (of course) money.

What to Test: Usability
What happens when something goes wrong? When users enter incorrect information or the wrong password? When the sever crashes? When the browser or OS has a problem with a request? Making sure your website provides feedback in these instances is critical to delivering great user experiences.

What to Test: Errors and Exceptions
Compatibility of your website is quite possibly its most important attribute; users will expect compatibility with their chosen device, its software and its OS. Compatibility testing covers browser compatibility, OS compatibility, mobile browsing issues and even printing options.

What to Test: Compatibility
Performance testing accounts for heavy loads where a large number of users are simultaneously accessing or requesting the same page or content. In addition, you do stress testing to see how the site and the server react to stress — and how each recovers from crashes.

What to Test: Performance
The importance of website security can’t be overstated. If you’re responsible for proprietary or sensitive data available only to logged in users, you want to be sure the site is secure. And when you have both public and private data/content, you want to make sure there’s clear segregation between the two.

What to Test: Security
A quick recap of the Definition section of the course, highlighting the critical concepts I want you to take away and remember.

Definition Takeaways: Things to Remember

Architecture: Creating a Solid Foundation
Information Architecture: Organizing Content and Flow
When you’re in a department store and can’t figure out where a particular product is, you might look for signage or labeling on the aisles or hanging from the ceiling. You’re looking for the department or category your item might be in. That’s Information Architecture. And how easily it helps you find what you’re looking for is a measure of how well it works.

What IS Information Architecture (IA)?
Content is usually the reason people are coming to your site, app or system in the first place. All the stuff that they can read, consume, absorb, interact with — even purchase — is essentially, content. The content you decide to include forms the foundation of your Information Architecture, so content is where you start.

Content Strategy: Identifying, Organizing and Delivering
Because content is strategic, there are certain considerations that have to be taken into account when you start thinking about what kinds of content should be included on your website. Content requirements help you figure out what kinds of content will be most relevant, appropriate and useful to site visitors.
Determining Content Requirements
A key step in creating a website of any kind is identifying how content will be created, edited, approved and posted to the website. This is what we call a content workflow, and whether you’re designing a small website for yourself or a massive ecommerce website, taking the time to figure out how it should work is critical. Managing content is the first place where small site owners get tripped up post-launch, and it’s the issue that makes a large website quickly cluttered and unusable.

Exercise: Identifying Content Workflows
Even with a small site, Information Architecture can be a multi-layered, many-headed beast. Here are my tips for working through complexity, context of use and client preconceptions.

My Tips for Successful Information IA Modeling
Now that we know what content we need and how it will be created and managed, we take all that information and apply it to the business of creating and prioritizing an IA model. Specifically, we’re addressing content labeling & taxonomy, and file (HTML) naming & taxonomy.

Creating and Prioritizing IA
Good labeling — in navigation menus, page titling, links and buttons — helps people quickly and accurately predict what they’ll get before they click or tap. The more descriptive the label, and the closer it is to what the user would call it, the higher chance they’ll interact with it.

Content Labeling
How you organize and name the files that live on your web server is every bit as important as the content they contain. Your file naming scheme should line up directly with the IA in terms of categories, subcategories and labels.

File Naming
When a lot of content winds up in a single category, you have a new issue to deal with: what order do I put it all in? Some of the methods we’ll discuss in this section will help you group and classify your content, creating obvious hierarchy and clearly differentiating between category levels.

Grouping and Classifying Content
Exercise: Determining Information Priority

Architecture: Creating a Solid Foundation Part II
Exercise: Turning Information Priority into an IA Model
In this lecture we’ll discuss the most common types of IA models: Hierarchical Tree, Nested List, Hub-and-Spoke, Bento Box and Filtered View. We’ll also explore how each model works and what kinds of sites each model serves best.

IA Models: Which One’s Right for My Site?
In this lecture we’ll explore what the Hierarchical Tree IA Model is, how it works and what kinds of sites it’s best for.

Hierarchical Tree IA Model
In this lecture we’ll explore what the Nested List IA Model is, how it works and what kinds of sites it’s best for.

Nested List IA Model
In this lecture we’ll explore what the Hub-and-Spoke IA Model is, how it works and what kinds of sites it’s best for.

Hub and Spoke IA Model
In this lecture we’ll explore what the Bento Box IA Model is, how it works and what kinds of sites it’s best for.

Bento Box IA Model
In this lecture we’ll explore what the Filtered View IA Model is, how it works and what kinds of sites it’s best for.

Filtered View IA Model
For complex websites that integrate content across different third-party systems, a single IA model may not be flexible enough to accommodate all structures. I’ll give you a few examples of how IA models can be combined in order to present content intuitively and deliver great user experience.

Combining IA Models
There is no single “right” tool for creating an IA spec. There are multiple ways to clearly communicate content categorization, prioritization and relationships. In this lecture we’ll look at the most commonly used, most readily available tools to create your IA — and share it with clients and users —easily and quickly.

Tools for Creating IA Models
Once you have a draft IA, you want to socialize and validate it. In other words, you share it with your client and with potential users in order to determine how easily users can find specific items, You want to find out which parts of the IA work well, and which need improvement.The quickest way to do this, and walk away with solid evidence to base your decisions on, is by doing something called tree testing.
Socializing and Validating Your IA Model
SNACK BREAK: Create an IA Model for Your Website

Architecture: Creating a Solid Foundation Part III
Website Navigation Design is an extraordinarily wide topic to tackle, because it can be painfully simple or mind-numbingly complex. Because navigation can vary so much between websites, there are no hard and fast rules for organizing it. However, there is definitely a tried-and-true process for determining what that organization should be.

Navigation Design
I am a big believer in dual navigation menus, which make a clear distinction between primary information (what users care most about) and secondary information (useful, but not as important). In this lecture I’ll show you how (and why) to make that distinction.

Primary and Secondary Navigation
When most people think about navigation, they usually focus on the persistent menus that appear on every page of the website: the global navigation. But as you’ll see in this lecture, in order to create a truly valuable and useful website that delivers great user experience, equal attention should be given to local navigation.

Global and Local Navigation
For websites where navigation changes based on whether a user is logged in or out, challenges arise. Some websites may have a simple client area, while others have full-fledged communities. In this lecture I’ll share my tips for organizing navigation across different user types with different levels of access.

Navigation for Different User Types
Your navigation scheme is only valid — and valuable — if users can get where they’re going easily and quickly. Validating navigation means determining whether people can tell where they are, where they can go, and in some cases, what to expect when they get there.

Validating Your Navigation Scheme
There may be more than one way to get somewhere on a website, but how do you know which way is best? How do you ensure that the most valuable parts of the website are seen and visited? In this exercise, I’ll show you how to determine those key navigation paths that deliver high value, both to users and to the website owner.

Exercise: Determining Key Navigation Paths
So now that we’ve made some decisions on appropriate organization and form, it’s time to put all that into a visual format that starts to look like a layout. We call that a wireframe, and I’m about to show you everything you need to know about creating and validating one.

Wireframing 101
I see examples of bad wireframing almost daily — prototypes that don’t serve the purpose they were created for, because…well, they’re not really wireframes. The quickest way to clear up this confusion is to talk about what a wireframe isn’t, and that’s what we’ll do here.

What a Wireframe ISN’T
Wireframes serve as the blueprint for design and development. They connect the underlying conceptual structure (or information architecture) to the surface (or visual design) of a website or app. In this lecture we’ll cover what exactly wireframes are — and what yours should be.

What a Wireframe IS
My Tips for Creating Successful Wireframe Prototypes
From paper & pen to complex software, there are any number of ways to create a wireframe prototype. In this lecture we’ll take a spin through the most common wireframing tools and you’ll learn what situations each type is most useful for.

Creating Wireframes: Tools of the Trade
SNACK BREAK: Try Creating a Basic Wireframe on Your Own
In this exercise I’ll walk you through the process of creating a wireframe using Axure RP Pro, step-by-step.

Exercise: Creating a B2B Wireframe with Axure RP Pro
Once you’ve created a click-through prototype, the next step is to socialize it with team members and with your client. You’ll learn who needs to be involved, what you should be asking them, and what feedback you need most from each group.

Socializing and Validating Wireframes
A quick recap of the Architecture section of the course, highlighting the critical concepts I want you to take away and remember.

Architecture Takeaways: Things to Remember

Design: Information, Interaction and Interface
It’s the first question on everyone’s mind, and it’s the part they can’t wait to get to! But great design encompasses a whole lot more that what you see. Here’s a quick look at what that “more” actually is.

“What’s It Gonna Look Like?” An Introduction to Design
Appropriate UI Design enables website visitors to do what they came to do — and what they want to do. That’s a balancing act, and it’s not always an easy one. From the visual to the verbal, the UI can’t insult their intelligence, but it can’t talk over their heads, either. In this lecture I’ll show you how to strike that balance and make sure every design decision you make is appropriate.
Defining Appropriate User Interface (UI) Design
As you shift your attention to UI design, it’s time to revisit the answers to all the questions you asked during your Definition and Architecture work. Every decision you make from this point forward — colors, images, fonts, visual elements — should serve those goals and be appropriate for your audience.

How Definition and IA Inform UI Design
The UI design principles I’m going to give you over the next four lectures are timeless — trends will come and go, but following these rules will always get you real, measurable results. And they’ll do more than just help you design a more intuitive UI — they can also help you identify problems and find solutions in an existing UI.

Timeless UI Design Principles, Part 01
Timeless Design Principles, part 2 of 4.

Timeless UI Design Principles, Part 02
Timeless Design Principles, part 3 of 4.

Timeless UI Design Principles, Part 03
Timeless Design Principles, part 4 of 4.

Timeless UI Design Principles, Part 04
SNACK BREAK: Identify Design Principles in an Existing UI

Design: Information, Interaction and Interface Part II
When it comes right down to it, design of any kind really means problem solving. The key to successful design is identifying the right problems to solve. Here are my tips for doing just that.

My Tips for Solving Visual Problems
Good design has three primary jobs: to organize, economize and communicate. In the next two lectures, we’ll look at each of these principles in detail to see how it’s done.

Organizing Visual Information – Part 01
Organizing Visual Information, part 2 of 2.

Organizing Visual Information – Part 02
Appropriate visual hierarchy establishes an order of importance for the visitor. It tells the eye where to go first (and next). It dictates which elements of the design draws the user’s attention first. Whether or not that first object of attention helps or hinders them is a matter of how appropriately you designed it. In this lecture I’ll show you how to make sure your visual hierarchy is both appropriate and useful.

Designing Appropriate Visual Hierarchy
When UI design meets audience expectation and allows them to predict the outcomes of their actions, it succeeds. People stick around long enough to click something, and they get a sense of value once they do so. In this lecture I’ll show you how that value is perceived, and how your design decisions can create it.

Designing for Audience Expectation
In this lecture I’ll introduce you to the five core principles of Interaction Design. You’ll learn what they are, how they work and how to make sure you leverage their power and value in your own UI design work.

Designing for Interaction
In this lecture I’ll walk you through the process of creating a UI design in Photoshop for a B2B website, based on our previous wireframe work. You’ll learn everything you need to know to go from a blank screen to a finished, polished UI design that’s appropriate for both client and audience.

Exercise: Create a UI Design for a B2B Website
In this lecture I’ll walk you through the process of creating a UI design in Photoshop for a WordPress blog. You’ll learn everything you need to know to go from a blank screen to a finished, polished UI design that’s appropriate for both client and audience.

Exercise: Create a UI Design Layout for a WordPress Blog – Part 01
Part 02 of creating a UI design in Photoshop for a WordPress blog.

Exercise: Create a UI Design Layout for a WordPress Blog – Part 02
Part 03 of creating a UI design in Photoshop for a WordPress blog.

Exercise: Create a UI Design Layout for a WordPress Blog – Part 03
Part 04 of creating a UI design in Photoshop for a WordPress blog.

Exercise: Create a UI Design Layout for a WordPress Blog – Part 04
In this lecture I’ll walk you through the process of creating a UI design in Photoshop for an Ecommerce website. You’ll learn everything you need to know to go from a blank screen to a finished, polished UI design that’s appropriate for both client and audience.

Exercise: Create a UI Design Layout for an Ecommerce Website
SNACK BREAK: Evaluate Your UI Design
A quick recap of the Design section of the course, highlighting the critical concepts I want you to take away and remember.

Design Takeaways: Things to Remember

Development – Building a B2B Website with HTML & CSS
Here’s where the rubber really hits the road — it’s time to make all of this real. Development largely consists of three activities: coding, customizing and configuring. We’re going to dig into all three.

Development: Coding, Customizing and Configuring
In our digitally connected world, and with increasing emphasis on positive user experience, front-end coding is a skill that will always be in demand, will always be relevant and will always be needed. In essence, you are making dreams reality — and that’s powerful stuff.

Over the next three sections you will learn everything you need to know — from theory to actual coding — to build three different kinds of websites:

A basic B2B website using HTML and CSS
A WordPress Blog
An Ecommerce website using WooCommerce
Dreaming in Code: You’ve Got the Power!
In order to have your website available online, you need a place to host it and a URL so people can find it. In this lecture we’ll cover the basics of choosing a hosting plan and selecting a domain name.

Hosting & Domain Considerations
Here we’ll cover the basics of organizing and uploading your files from your local computer to your host’s remote web server, using File Transfer Protocol (FTP) software.

File Structure and FTP: Organizing & Uploading
Just like the structural foundation of a house is critical to its solidity and lifespan, HTML gives web pages their structure. In this lecture we’ll start exploring the foundations of the language, describing basic concepts that will get you on your way to creating HTML files.

Basic HTML Structure: Building a Solid Foundation
In this lecture, I’ll introduce you to the core tags, elements and attributes that give HTML content its form.

Tags, Elements and Attributes: Describing HTML Content
As their names imply, titles and headings tell us — along with web browsers and search engines — what exactly we’re looking at. This quick overview tells you everything you need to know about both.

What’s In a Name? Titles and Headings
Unlike their printed counterparts, web pages are extremely dependent on short “chunked” information. Paragraphs have to be short, succinct and clearly defined. That’s because, as you’ve heard from me already, people don’t read online — they scan. Let’s take a look at how to properly define those limits and style the content for emphasis.

Formatting Paragraphs: Creating and Styling Text Content
If code tells you how, comments tell you why. And while the code you write is meant for a machine to execute, it’s also meant for people to read — meaning you, other team members or even developers who may come after you at some point in the future. Indenting and commenting your code helps to explain, clarify and organize it.

Organizing Your Code: Using Indentation and Comments
Now that you’ve learned the basic fundamentals of HTML, it’s time to put them to use. I’m going to walk you through the process of creating a basic web page, and I encourage you to work along with me as we go.

Creating Your First Web Page: Applying What You’ve Learned
Hyperlinks are the heart and soul of the Internet; they’re how we navigate through any given website, and they’re also how we jump from one site to another. In this lecture I’ll show you how to create the two core categories of hyperlinks created via HTML: hyperlinks and external links.

Content Elements – Hyperlinks: Getting from Here to There
From to-do-lists to travel directions to recipes, lists are certainly a part of our lives. So it’s easy to understand why they’re also popular online. In this lecture, I’ll show you how to create unordered and ordered lists.

Content Elements – Unordered and Ordered Lists: Creating and Formatting
Most of us browse the Internet for one main reason: to find interesting content. While a lot of what we find is text, images add a level of interest and help to communicate and reinforce what’s being presented. Let’s walk through the process of adding images and defining their attributes.

Content Elements – Images: Adding Images and Defining Attributes
Today, we can freely use images, audio and video on our websites with confidence that this content is supported across all major browsers. In this video I’ll walk you through adding audio and video to your web page.

Content Elements – Audio and Video: Adding Media to Your Web Page
One of the first decisions you’ll make when building a website is choosing the primary font to be used. But establishing a visually pleasing look and improving readability and legibility is what creates positive user experience.

We do all that through styling. Let’s take a walk through how it’s done.

Font Styling: Defining Style, Color and Size
Now it’s your turn. In this video you’ll create a webpage with an image and add an unordered list. You’ll also link those list items to 4 additional pages. You’ll find instructions, along with the image, uploaded and accessible from Udemy’s “Materials” section in the right sidebar.

Exercise: Adding Images, Unordered Lists and Hyperlinks
CSS – Content Styling: Adding Good Skin to Good Bones
CSS – Inline, Internal or External? Getting Smart
CSS – Inheritance: Sharing Attributes Efficiently
CSS – Background Color and Image: Creating Background Effects
CSS – Font Color and Weight: Giving Text Impact and Emphasis
CSS – Classes and Spans: Getting Specific with Styling
CSS – Working with Divs: Dividing and Conquering with Classes and IDs
CSS – Link Styling: Using Text Decoration
Exercise – Creating a Navigation Menu: Leveraging CSS for Wayfinding
Basic Table Structure: Organizing Content
Styling Tables with CSS: Enhancing Communication and Readability
Margins and Padding: Establishing Purposeful Negative Space
Display and Positioning: What, Where and How
The Box Model: The Parts and the Whole
Float and Clear: Controlling Visual Flow
Nested Layouts: Using Divs for Precision and Flexibility
Forms: Creating Good Input (and Output)
Creating Forms: Grouping Form Data
Styling Forms with CSS: Creating Consistency and Usability

Exercises: Build A B2B Website with HTML & CSS
Exercise: Create Your B2B Website Header
Exercise: Create Your B2B Website Content
Exercise: Create Your B2B Website Footer
Exercise: Create Your B2B Web Page: Putting It All Together
Browser Testing: Tips and Tools

Development – WordPress Content Management System (CMS)
Installing WordPress Automatically: Using Your Hosting Provider’s CPanel
Installing WordPress Manually: Using an FTP Client
The WordPress Dashboard: A Quick Tour of Features and Functions
Posts vs. Pages: Creating Content in WordPress
Categories: Organizing WordPress Content
Tags: Adding Context To Your Posts
Comments: Connecting and Managing Conversations
Formatting Text: Using the WordPress Text Editor
Adding Hyperlinks: Creating and Managing Links in WordPress
Adding Images: Inserting and Managing Images in WordPress
Adding Video: Inserting and Managing Video in WordPress
Working with Plugins: Extending WordPress Features and Functions
Exercise: Adding a Contact Form Plugin
Using Widgets: Enhancing Your WordPress Layout
Exercise: Adding a Widget
Choosing a WordPress Theme: Finding, Evaluating and Installing
Customizing Your Theme: Structure, Content and Appearance
Creating Custom Menus: Replacing Theme Menus
Using the Code Editor: Modifying Your WordPress Theme
WordPress Settings: General, Reading, Writing and Permalinks
Users and Roles: Assigning WordPress Access and Privileges
WordPress Backup: Backing Up Your Blog and Database
Updating WordPress: Automatic and Manual Updates

Exercises: Build A Blog with WordPress
Exercise: Customizing Your Theme Header, Part 01
Exercise: Customizing Your Theme Header, Part 02
Exercise: Customizing Your Page Content
Exercise: Customizing Your Footer

Development – Ecommerce Website with WooCommerce
Installing WooCommerce
Basic Settings: Getting Started with WooCommerce
Product Settings: Configuring Products in WooCommerce
Tax Settings: Configuring Sales Tax in WooCommerce
Checkout Settings: Configuring Checkout Options in WooCommerce
Shipping Settings: Configuring Shipping in WooCommerce
Account Settings: Configuring Customer Accounts in WooCommerce
Product Categories: Adding Product Categories in WooCommerce
Adding Simple Products in WooCommerce
Adding Variable Products in WooCommerce
Adding Virtual and Downloadable Products in WooCommerce
Adding Linked and Related Products in WooCommerce
Creating Coupons: Configuring Special Offers in WooCommerce
Customizing Email: Email Messaging Customization in WooCommerce
Managing Orders with WooCommerce
Managing Inventory with WooCommerce
Reporting: Sales Reporting in WooCommerce
Configuring Product Category Navigation in WooCommerce

Exercises: Build An Ecommerce website with WooCommerce and WordPress
Exercise: Creating Your Storefront Home Page, Part 01
Exercise: Creating Your Storefront Home Page, Part 02
Exercise: Creating Your Storefront Home Page, Part 03
Exercise: Creating Your Storefront Home Page, Part 04
Exercise: Creating Your Category Landing Page

Launch and Beyond
Prepare to Launch! Approval, Testing, Bugs and Beyond
Pre-Launch Checklist: What to Do Before You Launch
Bonus: Convincing Clients/Stakeholders to Include UX in Requirements Work

Student Reviews

Joe explains everything from the very beginning, he is a professional and experienced UX & Web Designer.

Ronny Aguilar

I’ve been working in the UI/UX sector for quite some years now and this course was a good refresher especially for the UX part. Very detailed and informative.

Abigail Camilleri Tonna

Trying to start work in the Web Development/UX field and found this course extremely helpful! I am someone who has a background in graphic design and a bit of experience in web development but Joe does an extremely thorough job of taking you through the entire process. You will not only learn the physical steps to creating a website, but also the underlying structure to create effective UX. The information presenting here will give a solid foundation.

Jordan Webb

Move A Wordpress Website from Local to Live
Top 20 React Video Course Tutorials.
The 20 Best JavaScript Video Courses on the Internet

You Might also Like

Leave a Comment

Your email address will not be published. Required fields are marked *