This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Welcome to the Ultimate Web Designer & Web Developer Course! Are you ready to become a full-stack web designer in 2023? If so, you’re in the right place.
Our comprehensive course is taught by Brad Hussey, a Udemy Partner and experienced web designer with more than 500,000 students worldwide and over 10 years of experience as a professional web designer. From the basics of web design to front-end development skills, this A to Z course covers everything you need to know to succeed in the world of web design and development. It focuses on what you need to learn and avoids unnecessary details. With over 80,000 happy students, this Udemy course is trusted by beginners and experts alike.
In this course, you’ll learn how to use Adobe Photoshop, sketch professional wireframes, and code with HTML, CSS, JavaScript, and jQuery. You’ll also learn about responsive design using frameworks like Bootstrap and Tailwind CSS (coming soon). In addition to building your own project, you’ll work on over 23 designs, websites, and applications throughout the course.
What are some of the projects you will build?
In addition to working on your very own self-directed project that challenges you to use your new skills as you learn, you’ll be building over 23 custom projects throughout the course:
In Photoshop:
-
Design a custom web graphic
-
Design a custom business card
-
Design a modern landing page
-
Re-design a blog
In HTML5 & CSS3:
Multiple custom websites & web pages
-
Code the Google landing page
-
“Orbiting planets” animation in CSS3
-
A responsive “Startup Style” website
In Javascript & jQuery
-
A working “Tip Calculator”
-
An actual race car game
-
A “To-Do List” web application
In PHP & MySQL
-
Dynamic websites
-
An impressive application that fixes clickbait headlines
-
Working “login” and “logout” sequence
-
A profile page that pulls information from a database
-
Robust “Client Address Book” application that manages your clients’ information
-
Custom WordPress plugin
In AngularJS
-
Real Estate Listing Single-Page Application
In WordPress Plugins
-
Custom, real-world “survey” plugin
…and much more
Once you’ve mastered the front-end, we’ll delve into advanced skills like PHP, MySQL, WordPress, and custom WordPress plugin development. By the end of the course, you’ll have the skills and knowledge to start your own successful web design career, whether you want to work as a freelancer or at a design agency.
But it doesn’t end there! Our course also includes a career section that provides valuable tips, resources, and real-world guidance to help you succeed in your new career. With step-by-step instruction from one of the most experienced and passionate web design educators around, you’ll be well on your way to becoming a successful web designer.
So don’t wait any longer. Join our course today and start your journey to becoming a full-stack web designer in 2023!
See you on the inside!
Introduction to Visual Design for Web Designers & Web Developers
-
1Welcome!
Welcome!
In this lecture, we learn the journey we are about to embark on, understand what's required to succeed, and what you can expect from this course, and me, your instructor.
Let's do this!
-
2Course Change Log — New Updates to the Course!
-
3Resources for the Journey
I've linked up the course project files for you to download in the course's resource section. These files will be updated along with the course when necessary.
Also, I’m going to be using some software in the course — like Photoshop, Adobe XD, Figma, GitHub, various code editors, and so on — and I highly recommend using the same software as myself, so it's easier to follow along. I’ll share those tools in the resources section of this lesson, also, I’ll make recommendations as we go along.
That said, I understand that you may just be getting started in your career or freelance business. You may not be ready to invest in software just yet, so I will try to share some budget-friendly (or free where possible) alternatives to the paid software I use.
Suppose you're planning on getting clients, already have some clients, or generating an income as a web designer or developer. In that case, I strongly recommend you invest in the right tools and software — as free tools may be limited and can only get you so far.
Before you download several tools or software — I suggest waiting until we reach the relevant section in the course where I'll make a software recommendation. I'll have you do this because paid tools often come with a free trial period, and I don't want you to waste your trial if you're not using the tool!
With that said, please review the resources section of this lesson to get the most updated list of my recommended tools & software.
-
4Price Calculator: Discover Your Hourly Rate & Your Income Potential
In this lecture, we learn how to decide on an hourly rate, and how much much you can expect to charge as a professional freelancer once you've completed this course!
Designing Websites, Graphics & Interfaces with Figma
-
5Elements & Principles of Visual Design on the Web
Although visual design on the web can be incredibly complex, all web designs boil down to 6 basic elements:
Lines
Shapes
Colour palette
Texture
Typography
Form
While there are no official "industry standard" rules for visual design — as the beauty of a design purely depends on the audience — there are a set of widely accepted guidelines, or "principles", when it comes to visual communication. The basic principles boil down to the following:
Balance
Rhythm
Proportion
Space
Dominance
Hierarchy
Unity
-
6The "C.R.A.P." Principles
In this lecture, we'll learn about the C.R.A.P. Principles in Visual Design.
-
7Typography Guide for Web Designers
In this lesson, you'll learn what you need to know about fonts, typefaces, and what they mean for your design. Learn how to choose the perfect font or typography style for your website.
Plus, we'll have a good laugh while doing so...
-
8The Basics of Colour Theory
The basics of colour theory for web designers.
-
9Designing with Grids on the Web
In this lesson, we'll learn why grids are important in web design, and how to layout a website using a 12 column grid.
-
10Design Systems Explained: The 10 Minute Guide for New Web Designers
Design systems are essential for creating beautiful, professional, and consistent website experiences. In this lesson, I will show you the basics of design systems and how they can help you as a new web designer. I will break down what design systems are, why they're so popular with designers right now, and how they can help you as a new web designer.
-
11Visual Design Quiz
Let's challenge your Visual Design knowledge!
Introduction to Adobe Photoshop
-
12Figma vs. Photoshop for Web Design
Many web design tools are available to us designers today: including Figma, Sketch, AdobeXD, but for years, web designers used Photoshop.
But is Photoshop the right choice for web design?
In this lesson, we'll explore why you should use Figma instead of Photoshop for web design and how to use the 80/20 rule and JIT learning to help you learn Figma faster.
Additionally, you'll learn how to improve your design skills by copying other designers. With these techniques, you'll be on your way to creating beautiful websites in no time!
-
13How to Quickly Get Started with Figma for Web Design
Figma is a web design software. It's used for wireframing, prototyping, and designing websites or mobile apps. Figma enables designers to create interactive prototypes with live code previews. This means they can make changes in the app as they go without writing any code! The interface of Figma is very intuitive and easy to use, which makes it ideal for beginners who are just starting out.
It also has many features that Photoshop does not have such as: real-time collaboration, syncing across devices (even offline), unlimited layers per artboard, vector shapes & text editing tools, libraries of UI elements... the list goes on! All this comes at no cost - so why wouldn't you want to dig into Figma?
In this lesson, we're going to learn how to quickly get up and running with designing websites and user interfaces in Figma.
-
14Figma Fundamentals: Learn the UI, Groups, Components & more
In this video, we'll take a look at how to improve your web design workflow and productivity in Figma.
We'll learn:
How to Create Layers in Figma
Name Your Figma Layers with Good Naming Conventions
Create Dynamic Global Components
Create Instances of Components
Create Global Color Styles & Text Styles
And more
-
15Figma Project: Create a Design System in Figma
In this video, Brad Hussey will challenge you to design your own "Design System" within Figma. Final example is included.
Assignment Instructions
Create a copy of this Figma File (a free Figma account is required)
View the final example
Create your own version of the Design System example provided (or create your very own!)
-
16Figma Project - Design System Walkthrough
In this video, Brad Hussey will walkthrough the project and create the design system in Figma.
-
17Figma Project: Create a LoFi Wireframe in Figma
Assignment Instructions
Create a copy of this Figma File (a free Figma account is required)
View the final example
Create your own version of the wireframe example (or create your very own!)
Introduction to Web Design (and more Photoshop)
-
18Section Intro: The 80/20 Rule, Photoshop Basics, and More
Welcome to the Introduction to Photoshop! In this section we'll learn our way around the Photoshop interface, and begin some basic design projects.
-
19Creating a New Photoshop Document
In this lecture, we'll learn how to create a new Photoshop Document. There are numerous settings when starting a new document, so we'll make sure to cover everything you need to know.
-
20Photoshop Environment: The Toolbar - Part 1
In this lecture, we'll learn about the various tools available to you in Photoshop.
-
21Photoshop Environment: The Toolbar - Part 2
This lecture is a continuation of the previous video.
-
22Photoshop Environment: Palettes
In this lecture, we'll be learning about the Photoshop "palettes".
-
23Photoshop Environment: The Menu
In this lecture, we'll learn about the tools & options available to you in the Photoshop Menu.
-
24Photo Enhancement & Manipulation
In this lecture, we'll put our new skills to use and learn how to manipulate two images to create a single new image.
-
25Photoshop Project #1: Create a New Graphic with Multiple Layers + Tutorial
In this project, you will use your current knowledge of Photoshop to create a custom graphic.
-
26Photoshop Project #2: Design a Business Card + Tutorial
In this project, you will create your very first business card in Photoshop.
-
27Photoshop Quiz
Challenge your Photoshop knowledge so far!
-
28Section Outro: Wrap Up, Further Learning & What's Next
Let's wrap up our Photoshop section and move forward into the next section! Provided in this lecture are some resources for further learning.
Advanced Web Design Challenge
-
29Section Intro: Web Design Basics, Wireframing, Photoshop
Welcome to the Intro to Web Design section! We'll extend our Photoshop knowledge, and learn more about designing for the web.
-
30Web Design Terminology: The Jargon the Pros Use
Learn the jargon the professionals use in the industry.
-
31The Four Phases of a Web Design Project + Cost Estimates
We'll cover the 4 top-level phases of a web design project, from conception to completion. These sections are:
Discovery Phase
Creative Phase
Development Phase
Launch Phase
-
32What is User Experience (UX) Design?
In this lecture, we'll take a deeper look into what User Experience design is all about.
-
33The Anatomy of a Website Design
In this lecture, we'll take a look at the basic anatomy, and common conventions, of most websites on the Internet.
-
34The 960 Grid System + Free Photoshop Downloads
In this lecture, we'll learn about the 960 Grid System, and how we can download a free resource to help us design and develop our websites using the 960 Grid System.
-
35Web Design Project #1: Design a Minimal Landing Page + Tutorial
In this lecture, we'll design our very first minimal landing page using Adobe Photoshop.
-
36Web Design Project #2: Re-Design a Blog Landing Page
In this project, we'll be looking at an ugly blog landing page, and learning what we can do to completely re-design it.
-
37Web Design Project #2: Tutorial
In part two of this project, we'll be re-designing a blog landing page in Photoshop.
-
38Web Design Quiz
Test your web design knowledge.
-
39Section Outro: Wrap Up, Further Learning & What's Next
Let's wrap up our Introduction to Web Design and move forward into the next section! Provided in this lecture are some resources for further learning.
Introduction to HTML
-
40Challenge Intro: How the Challenge Works
This is the very first challenge of the course, and there will be many more. Each challenge will build upon the previous one, so that by the end of the course, you'll have designed and built something real and tangible as proof of your new skills. This video outlines how the challenge works, and what you'll be expected to do.
-
41Discovery Phase: Create a Sitemap
Your first step in the challenge is to start with the Discovery Phase. Create a basic sitemap of your website. Open up a spreadsheet program, OmniGraffle or even a notepad, and begin organizing your website's content. Start by listing your top level pages — Home, About, Services, Contact — and then under your top level pages, list any sub pages. If you're creating a sitemap for a current website you plan to re-design, like your blog, list all of the pages in your website, then organize them in the best, most user-friendly manner possible. This is called a Content Audit.
-
42Discovery Phase II: Sketch & Wireframe Your Design
Part two of the Discovery Phase is to begin wireframing. Grab a piece of paper, a notepad, or a gridbook, and begin sketching your layouts. In the very least, wireframe the home page, and an interior page — but I encourage you to wireframe as many of your pages as possible. Try to use common conventions in web design layouts, but don't be afraid to break the rules and try something different.
-
43Creative Phase: Design Your Website in Photoshop
Our next step is the Creative Phase. Once you've sketched all of your layouts, and you're ready to start designing. Open up Photoshop and turn those wireframes into beautiful designs. Feel free to use websites like Creative Market, and the Noun Project to get assets, images and icons for your design. This phase should take you considerable time, so don't be afraid to dedicate yourself to your design.
-
44Sharing, Collaborating & Getting Feedback on Your Design
It's important to get feedback on your designs & mockups. This video shows you how you can get feedback from your family, friends and even the students in this course!
-
45Challenge Wrap Up & What's Next
Let's wrap up the design section and move into our the development section of our course!
Intermediate HTML
-
46Section Intro: HTML Fundamentals, First Webpage, Course Files
Welcome to the Introduction to HTML! We're going to learn the absolute fundamentals of HTML in this section.
-
47The Basics of HTML: Tags, Attributes, Elements
In this lecture, we'll dive right into the basics of HTML, we'll learn about Tags, Attributes & Elements. We'll also cover HTML Parent / Child Structure, and the Basic Structure of a Website.
-
48Basic File & Folder Structure of a Website
In this lecture, we'll learn the basic file & folder structure of a website, and we'll also understand the proper naming conventions for files on the web.
-
49Your Must Have Tool: A Good Code Editor
In this lecture, we'll learn about why it's important to have a good code editor in your tool belt, and which free and paid code editors are the best for you.
-
50Hello World: Create Your Very First Web Page!
In this lecture, we'll create our very first web page with HTML!
-
51HTML Quiz
Let's challenge your introductory knowledge.
-
52Section Outro: Wrap Up, Further Learning & What's Next
Let's wrap up our Introduction to HTML and move forward into the next section! Provided in this lecture are some resources for further learning.
Advanced HTML & HTML5
-
53Section Intro: HTML Tags, Code a Real Web Page
Welcome to Intermediate HTML! We're going to dive deeper and learn more about HTML tags.
-
54Basic Structure of an HTML Document
In this lecture, we'll learn how to code the very basic structure of an HTML document.
-
55Heading & Paragraph Tags
In this lecture, we'll learn about HTML Heading and Paragraph tags.
-
56Using Emphasis & Strong Emphasis
In this lecture, we'll learn about the two kinds of HTML emphasis tags.
-
57Hyperlinks
In this lecture, we'll learn how to link web pages together using HTML hyperlinks.
-
58Lists
In this lecture, we'll learn about the three kinds of HTML lists:
- Ordered lists
- Unordered lists
- Description lists
-
59Images
In this lecture, we'll learn how to add images to web pages.
-
60Tables
In this lecture, we're going to learn how to code tables with HTML.
-
61Forms
In this lecture, we'll learn how to code forms.
-
62HTML Entities & "Special Characters"
In this lecture, we'll learn about special characters and how to use them in our web pages with HTML Entities.
-
63HTML Project: Code a Basic Web Page + Tutorial
In this video, we will build a full HTML web page.
-
64Intermediate HTML Quiz
Test your intermediate HTML knowledge.
-
65Section Outro: Wrap Up, Further Learning & What's Next
Let's wrap up our Intermediate HTML section and move forward into the next section! Provided in this lecture are some resources for further learning.
Expert HTML & HTML5
-
66Section Intro: Advanced HTML Techniques, HTML5
Welcome to Advanced HTML & HTML5! We'll learn even more about HTML, and you'll be introduced to the latest and greatest version of HTML: HTML5!
-
67IDs & Classes
In this lecture, we'll learn the difference between IDs & Classes and how to use them properly.
-
68Span & Div Tags
In this lecture, we'll learn about the HTML span and div tags.
-
69Intro to HTML5 Tags: Header, Footer, Nav, Section, Article, Aside & Time
In this lecture, we'll learn all about the new HTML5 tags, and how to use them properly in a web page.
-
70HTML5 Project: Build a Basic HTML5 Web Page + Tutorial
In this video, we'll build a full HTML5 web page with the skills we've learned so far.
-
71Advanced HTML Quiz
Challenge your advanced HTML knowledge.
-
72Section Outro: Wrap Up, Further Learning & What's Next
Let's wrap up our Advanced HTML section and move forward into the next section! Provided in this lecture are some resources for further learning.
Introduction to CSS
-
73Section Intro: Expert HTML5 techniques
Welcome to the Expert HTML & HTML5 section! We'll learn expert level techniques in this section.
-
74New HTML5 Inputs
In this lecture, we'll learn all about the new inputs available in HTML5.
-
75Making Internet Explorer Compatible with HTML5
In this lecture, we'll learn how to make HTML5 play nice with Internet Explorer 8 and lower.
-
76HTML5 Data Attribute
In this lecture, we'll learn how to use custom data attributes in HTML5.
-
77Expert HTML Quiz
Test your advanced HTML knowledge.
-
78Section Outro: Wrap Up, Further Learning & What's Next
Let's wrap up our Expert HTML section and move forward into the next section! Provided in this lecture are some resources for further learning.