Ultimate Web Designer & Web Developer Course

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!

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.

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!

Although visual design on the web can be incredibly complex, all web designs boil down to 6 basic elements:

1. Lines

2. Shapes

3. Colour palette

4. Texture

5. Typography

6. 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:

1. Balance

2. Rhythm

3. Proportion

4. Space

5. Dominance

6. Hierarchy

7. Unity

In this lecture, we'll learn about the C.R.A.P. Principles in Visual Design.

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...

The basics of colour theory for web designers.

In this lesson, we'll learn why grids are important in web design, and how to layout a website using a 12 column grid.

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.

Let's challenge your Visual Design knowledge!

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!

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.

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

In this video, Brad Hussey will challenge you to design your own "Design System" within Figma. Final example is included.

Assignment Instructions

1. Create a copy of this Figma File (a free Figma account is required)

2. View the final example

3. Create your own version of the Design System example provided (or create your very own!)

In this video, Brad Hussey will walkthrough the project and create the design system in Figma.

Assignment Instructions

1. Create a copy of this Figma File (a free Figma account is required)

2. View the final example

3. Create your own version of the wireframe example (or create your very own!)

Welcome to the Introduction to Photoshop! In this section we'll learn our way around the Photoshop interface, and begin some basic design projects.

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.

In this lecture, we'll learn about the various tools available to you in Photoshop.

This lecture is a continuation of the previous video.

In this lecture, we'll be learning about the Photoshop "palettes".

In this lecture, we'll learn about the tools & options available to you in the Photoshop Menu.

In this lecture, we'll put our new skills to use and learn how to manipulate two images to create a single new image.

In this project, you will use your current knowledge of Photoshop to create a custom graphic.

In this project, you will create your very first business card in Photoshop.

Challenge your Photoshop knowledge so far!

Let's wrap up our Photoshop section and move forward into the next section! Provided in this lecture are some resources for further learning.

Welcome to the Intro to Web Design section! We'll extend our Photoshop knowledge, and learn more about designing for the web.

Learn the jargon the professionals use in the industry.

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

In this lecture, we'll take a deeper look into what User Experience design is all about.

In this lecture, we'll take a look at the basic anatomy, and common conventions, of most websites on the Internet.

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.

In this lecture, we'll design our very first minimal landing page using Adobe Photoshop.

In this project, we'll be looking at an ugly blog landing page, and learning what we can do to completely re-design it.

In part two of this project, we'll be re-designing a blog landing page in Photoshop.

Test your web design knowledge.

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.

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.

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.

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.

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.

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!

Let's wrap up the design section and move into our the development section of our course!

Welcome to the Introduction to HTML! We're going to learn the absolute fundamentals of HTML in this section.

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.

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.

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.

In this lecture, we'll create our very first web page with HTML!

Let's challenge your introductory knowledge.

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.

Welcome to Intermediate HTML! We're going to dive deeper and learn more about HTML tags.

In this lecture, we'll learn how to code the very basic structure of an HTML document.

In this lecture, we'll learn about HTML Heading and Paragraph tags.

In this lecture, we'll learn about the two kinds of HTML emphasis tags.

In this lecture, we'll learn how to link web pages together using HTML hyperlinks.

In this lecture, we'll learn about the three kinds of HTML lists:

1. Ordered lists
2. Unordered lists
3. Description lists

In this lecture, we'll learn how to add images to web pages.

In this lecture, we're going to learn how to code tables with HTML.

In this lecture, we'll learn how to code forms.

In this lecture, we'll learn about special characters and how to use them in our web pages with HTML Entities.

In this video, we will build a full HTML web page.

Test your intermediate HTML knowledge.

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.

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!

In this lecture, we'll learn the difference between IDs & Classes and how to use them properly.

In this lecture, we'll learn about the HTML span and div tags.

In this lecture, we'll learn all about the new HTML5 tags, and how to use them properly in a web page.

In this video, we'll build a full HTML5 web page with the skills we've learned so far.

Challenge your advanced HTML knowledge.

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.

Welcome to the Expert HTML & HTML5 section! We'll learn expert level techniques in this section.

In this lecture, we'll learn all about the new inputs available in HTML5.

In this lecture, we'll learn how to make HTML5 play nice with Internet Explorer 8 and lower.

In this lecture, we'll learn how to use custom data attributes in HTML5.

Test your advanced HTML knowledge.

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.