Ultimate Web Designer & Developer Course: Build 23 Projects!
4.6 (4,020 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
30,816 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ultimate Web Designer & Developer Course: Build 23 Projects! to your Wishlist.

Add to Wishlist

Ultimate Web Designer & Developer Course: Build 23 Projects!

Become a Full-Stack Developer - Learn Everything from Design to Front & Back-End Programming.
Bestselling
4.6 (4,020 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
30,816 students enrolled
Last updated 7/2016
English
Learn Fest Sale
Current price: $10 Original price: $200 Discount: 95% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 31.5 hours on-demand video
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build 23+ custom design, web and programming projects - from scratch!
  • Learn more than 18 professional disciplines
  • Plan, design and code your very own self-directed project - from A to Z!
  • Plan, design and program robust, and fully custom websites and applications
  • Design and code modern & responsive landing pages
  • Code at an expert level of proficiency with HTML & CSS
  • Code websites & applications with HTML5 & CSS3
  • Code games & animations with CSS3 and jQuery
  • Comfortably use the tools in Adobe Photoshop
  • Design modern websites in Adobe Photoshop
  • Design a professional business card in Adobe Photoshop
  • Design with grids, on paper and on the screen
  • Understand the history and application of visual design
  • Wireframe and optimize user experiences for websites and applications
  • Choose the correct fonts for design & web projects
  • Create beautiful colour schemes based on scientific colour theory
  • Build a working "Tip Calculator" in Javascript
  • Build a useful "To Do List" web application in jQuery UI
  • Comfortably set up hosting & domain names for your clients
  • Program advanced PHP applications
  • Design, build and manage custom database-driven websites with MySQL
  • Build a fully functional "Client Address Book" with PHP & MySQL
  • Set up a WordPress blog in 5-minutes
  • Manage your client's WordPress websites
  • Get hired as a full-time web designer or web developer
  • Grow a profitable and successful freelance career with your new skills
  • Earn a full-time income from any of the disciplines you learn!
  • Make money on the side designing & building websites
  • Learn AngularJS & Build an AngularJS Application
  • Learn all about WordPress Plugin Development
  • Plan, Develop & Publish a "Survey" WordPress Plugin
View Curriculum
Requirements
  • No prior design or coding knowledge required!
  • Any operating system: Mac, PC, Linux
  • No expensive software required
Description

COURSE UPDATED – 36 New Lectures!

Added two brand new sections covering AngularJS, and WordPress Plugin Development.

Are you looking for an all-in-one Web Design, Web Development and Career Building course that takes you step-by-step through the all of the skills you need know to start a working professionally?

Are you a programmer looking to improve your design skills, so your designer colleagues can stop making fun of your bad designs? Or maybe you're a designer looking to learn how to code, so your programmer colleagues can stop laughing at your sad coding attempts?

Have you wasted hours of your time or money watching terrible video tutorials that make you fall asleep at your desk?

Stop wasting your time & money! This is the ultimate, most comprehensive, A to Z web design, development and career building course on the market. I promise and I guarantee that to be true.

Here is my guarantee to you: If within 30 days you complete this course and you haven't experienced impressive results, you can't design or build modern websites, or you can't get a paying web design or development gig — I will give you 100% of your money back.

You will go from knowing nothing to creating over 23 impressive designs, websites, and applications — all with step-by-step instruction from the most entertaining and engaging coding instructor on the web today!

We'll start by learning Visual & Web Design, how to use Adobe Photoshop, and how to sketch professional wireframes. We'll then learn to code with HTML5, CSS3, Javascript and jQuery. At this point you'll be able to code custom websites, animations and web applications by yourself.

Once we're cool with the front-end languages, we'll then melt our brain-bits with highly advanced skills like Responsive Websites, PHP, MySQL, WordPress and custom WordPress plugin development. You'll then have the ability to build responsive, dynamic websites and blogs, basic eCommerce sites and online stores, and have a professional understanding of all aspects of web design & development.

After you've learned everything from Design to Development, you'll be taken through a hands-on career section fully-loaded with valuable tips, resources, and real-world guidance to help you start your career — whether you want to work-from-home as a freelancer, or secure a full-time studio gig at a design agency.

- - -

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
  • Impressive application that fixes clickbait headlines
  • Working "login" and "logout" sequence
  • 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

- - -



Why trust me? What makes me any better than the thousands of coding instructors out there?

My name is Brad Hussey, and I've been working professionally as a designer and developer for over 6 years. I studied design & development in college for 2 years before getting hired as an in-house web developer at a local web development firm. Only a year into full-time employment, I quit to start my own freelance business from home, which has been the best career move I've ever made because it allows me the freedom to work on my own terms on projects I love to be a part of, and it pays extremely well.

What makes me different than all the other coding instructors out there is that I know how to communicate complex & boring concepts without putting you to sleep! While you're staring at a screen with hundreds of lines of code, I like to keep things light, crack jokes and keep you entertained. My approach is simple, hands-on, and relaxed. Think of me as your handsome friend who just so happens to be a passionate computer geek under the surface.

Don't take it from me, read what some of my students have said about my courses:

"Instantly, I felt comfortable with Brad's style and approach. After only a week of finishing this course, I have 3 projects for freelance website design. I couldn't thank Brad enough!" — a graduate of Bootstrap to WordPress

"I challenged myself to an entire weekend to complete the [client] project, utilizing this course as a step-by-step guide. I am happy to say that my challenge was successful! I've already received payment for my work and my client was so impressed that he immediately gave me another project to work on!" — a graduate of Bootstrap to WordPress

- - -

How would you like to be able start a lucrative career in web design & development, work for a high-tech company, or kick back in the comfort of your own home studio providing high quality solutions to your very own clients?

There's a ton of design & coding courses out there begging for your money & attention, but none of them will give you the ultimate fusion of web design, development and career building that I guarantee this course will deliver.

So stop wasting your time and money on courses & tutorials that don't deliver - and let's launch your career to new heights!

Join me on this journey, and I promise I won't let you down. Set yourself up for success, and sign up for the course right now. See you on the inside :)

Who is the target audience?
  • Developers and Programmers looking to dramatically improve their design skills
  • Graphic & Web Designers desiring to dramatically improve their web development & programming skills
  • Total beginners who want to learn how to plan, design and program amazing websites & applications
  • Those who desire to make a comfortable living online as a web designer or developer
  • Professionals who desperately want to leave the 9-to-5 for a fruitful new web career
  • Freelancers who want to deliver higher value to their web design clients
  • Designers & developers who want to know how to start a successful freelance career
  • Anyone who wants to learn from the most entertaining & engaging coding instructor
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 246 Lectures Collapse All 246 Lectures 32:30:49
+
Introduction: Why This is The Only Design/Development Course You'll Ever Need
5 Lectures 09:18

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!

Preview 02:06

In this lecture, we learn about the amazing perks & benefits you get access to by being enrolled in this course.

What You Get in This Course: Major Course Discounts + eBook
01:31

In this lecture, we learn how to get a free 30-day trial of the latest version of Adobe Photoshop. We also touch on free alternatives to Photoshop, and how to get free design downloads!

Preview 02:04

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!

Preview 02:33

Let's challenge what you've learned in the very first few lectures!

Pop Quiz!
4 questions

In this lecture, we'll review what we've learned so far, and get prepared to jump into the next section!

Preview 01:04
+
Introduction to Visual Design
7 Lectures 20:29

In this video, we are introduced to the concepts we are going to learn in depth in the following lectures.

Preview 00:45

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. Heirarchy
  7. Unity
The Basic Elements & Principles of Visual Design
05:51

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

The Design "CRAP" Principles
01:59

In this lecture, we'll learn the basics of Typography in Visual Design.

Typography Basics
03:01

In this lecture, we'll dive into the Science of Colour.

The Science of Colour (or Color)
05:33

In this lecture, we'll learn about the history of "the grid", how it has evolved over time, and how we use it today on the web.

Designing with Grids
02:29

Let's challenge your Visual Design knowledge!

Visual Design Quiz
7 questions

In this video, we wrap up what we've learned, and discover a few books and websites we can use to further our learning in Visual Design.

Preview 00:51
+
Introduction to Adobe Photoshop
10 Lectures 01:37:54

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

Section Intro: The 80/20 Rule, Photoshop Basics, and More
01:29

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.

Preview 04:51

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

Photoshop Environment: The Toolbar - Part 1
20:39

This lecture is a continuation of the previous video.

Photoshop Environment: The Toolbar - Part 2
14:44

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

Photoshop Environment: Palettes
11:49

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

Photoshop Environment: The Menu
12:14

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

Photo Enhancement & Manipulation
17:00

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

Photoshop Project #1: Create a New Graphic with Multiple Layers + Tutorial
07:08

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

Photoshop Project #2: Design a Business Card + Tutorial
07:39

Challenge your Photoshop knowledge so far!

Photoshop Quiz
4 questions

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

Section Outro: Wrap Up, Further Learning & What's Next
00:21
+
Introduction to Web Design (and more Photoshop)
10 Lectures 01:22:51

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

Section Intro: Web Design Basics, Wireframing, Photoshop
00:31

Learn the jargon the professionals use in the industry.

Web Design Terminology: The Jargon the Pros Use
04:44

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

The Four Phases of a Web Design Project + Cost Estimates
07:42

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

What is User Experience (UX) Design?
14:36

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

The Anatomy of a Website Design
05:17

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.

The 960 Grid System + Free Photoshop Downloads
05:24

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

Web Design Project #1: Design a Minimal Landing Page + Tutorial
17:42

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

Web Design Project #2: Re-Design a Blog Landing Page
06:07

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

Web Design Project #2: Tutorial
20:22

Test your web design knowledge.

Web Design Quiz
10 questions

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.

Section Outro: Wrap Up, Further Learning & What's Next
00:26
+
Advanced Web Design Challenge
6 Lectures 04:25

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.

Preview 01:06

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.

Discovery Phase: Create a Sitemap
01:03

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.

Discovery Phase II: Sketch & Wireframe Your Design
00:35

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.

Creative Phase: Design Your Website in Photoshop
00:35

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!

Sharing, Collaborating & Getting Feedback on Your Design
00:43

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

Challenge Wrap Up & What's Next
00:23
+
Introduction to HTML
6 Lectures 19:49

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

Preview 00:33

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.

Preview 04:05

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.

Basic File & Folder Structure of a Website
04:34

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.

Your Must Have Tool: A Good Code Editor
05:57

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

Hello World: Create Your Very First Web Page!
04:08

Let's challenge your introductory knowledge.

HTML Quiz
8 questions

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.

Preview 00:32
+
Intermediate HTML
12 Lectures 01:10:17

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

Section Intro: HTML Tags, Code a Real Web Page
00:18

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

Preview 05:10

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

Preview 06:26

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

Preview 04:35

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

Hyperlinks
05:14

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

  1. Ordered lists
  2. Unordered lists
  3. Description lists
Lists
05:52

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

Images
09:47

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

Tables
05:52

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

Forms
14:00

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

HTML Entities & "Special Characters"
03:19

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

HTML Project: Code a Basic Web Page + Tutorial
09:23

Test your intermediate HTML knowledge.

Intermediate HTML Quiz
11 questions

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.

Section Outro: Wrap Up, Further Learning & What's Next
00:21
+
Advanced HTML & HTML5
6 Lectures 41:53

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!

Section Intro: Advanced HTML Techniques, HTML5
00:18

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

IDs & Classes
04:53

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

Span & Div Tags
08:53

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

Intro to HTML5 Tags: Header, Footer, Nav, Section, Article, Aside & Time
15:35

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

HTML5 Project: Build a Basic HTML5 Web Page + Tutorial
11:41

Challenge your advanced HTML knowledge.

Advanced HTML Quiz
7 questions

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.

Section Outro: Wrap Up, Further Learning & What's Next
00:33
+
Expert HTML & HTML5
5 Lectures 22:53

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

Section Intro: Expert HTML5 techniques
00:16

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

New HTML5 Inputs
13:03

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

Making Internet Explorer Compatible with HTML5
04:23

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

HTML5 Data Attribute
04:23

Test your advanced HTML knowledge.

Expert HTML Quiz
4 questions

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.

Section Outro: Wrap Up, Further Learning & What's Next
00:48
+
Introduction to CSS
13 Lectures 01:29:00

Welcome to the Introduction to CSS! Let's learn how to make our websites pretty!

Section Intro: Essentials of CSS + Download Course Files
00:43

In this lecture, we'll learn all about the basics of CSS.

What is CSS? All the basics you need to know!
02:34

In this lecture, we'll learn how HTML elements inherit styles from their parents & ancestors in CSS.

Inheritance of Styles
01:24

In this lecture, we'll learn all about the CSS Box Model.

Measurements & The Box Model
07:44

In this lecture, we'll learn how to style a web page with Inline CSS.

Inline CSS
05:12

In this lecture, we'll learn about the second method to style your web pages with CSS.

Internal CSS
05:53

In this lecture, we'll learn about the third, and best method used for styling your web pages with CSS.

External CSS
08:11

In this lecture, we'll learn about Class & ID selectors.

ID & Class Selectors
11:50

In this lecture, we'll learn about a powerful CSS selector: The Descendant Selector.

Descendant Selectors
11:05

In this lecture, we'll learn how to use the Grouping Selector.

Grouping Selectors
10:58

In this lecture, we'll learn how different CSS selectors are given priority based on the Specificity Calculator. Knowing this will save you hours of frustration when styling your websites.

Specificity
05:56

In this lecture, we'll put out CSS skills to use by coding & styling a real blog-style web page.

CSS Project: Style an HTML Web Page + Tutorial
16:33

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

Section Outro: Wrap Up, Further Learning & What's Next
00:57
19 More Sections
About the Instructor
Brad Hussey
4.6 Average rating
18,397 Reviews
224,608 Students
10 Courses
Freelancing Web Designer @ Code College

A highly skilled professional, Brad Hussey is a passionate and experienced freelancing web designer, developer, blogger and digital entrepreneur. Hailing from North Of The Wall (Yellowknife, Canada), Brad made the trek to the Wet Coast (Vancouver, Canada) to educate and equip himself with the necessary skills to become a spearhead in his trade of solving problems on the web, crafting design solutions, and speaking in code.

Brad's determination and love for what he does has landed him in some pretty interesting places with some neat people. He's had the privilege of working with, and providing solutions for, numerous businesses, big & small, across the Americas.

Brad builds custom websites, and provides design solutions for a wide-array of clientele at his company, Brightside Studios. He regularly blogs about passive income, living your life to the fullest, and provides premium quality web design tutorials and courses for tens of thousands of amazing people desiring to master the craft.

180,000+ Students Don't Lie

Join Brad and adventure into his world of web design, web development, and speaking in code. You won't regret it!

What are people saying about Brad?

"[Brad is] the BEST coding instructor on the planet. Brad has a passion for teaching and he does it with joy. He pours his heart into his lessons and makes you feel at ease. It's just like having your best buddy having a chat with you - only this time, you are learning valuable skills. He's the type of guy who is passionate about transforming people's lives through his lessons. He's not after the money. He truly wants you to succeed.Three hearty cheers to Brad - the best coding instructor on planet Earth."

— Cicero, Brad's student


"...These videos are well created, concise, fast-paced, easy to follow, and just funny enough to keep you chuckling as you're slamming out lines of code. I've taken 3 courses from this instructor. Whenever I have questions he is right there with a simple solution or a helpful suggestion to keep me going forward with the course work."

— Brennan, Brad's student


"...Brad is amazing and I honestly think he's the best tutor of all the courses I have taken on Udemy. Will definitely be following him in the future. Thanks Brad!"

— Brad's student


"...Brad has an infectious enthusiasm, a great eye for detail, and expert-level knowledge of the material."

— Brad's student

Code College
4.5 Average rating
17,045 Reviews
209,193 Students
9 Courses
The Best Coding Courses on the Web

Code College is an online school that provides high quality learning material, courses, and training videos for students looking to learn web design, web development, marketing, online business, and more!

Founded in 2014 by Canadian entrepreneur, successful instructor, and blogger, Brad Hussey, Code College is a growing network of highly skilled instructors who provide the best quality tutorials, courses and learning material on the web.