Ultimate Web Designer & Developer Course: Build 23 Projects!

Become a Full-Stack Developer - Learn Everything from Design to Front & Back-End Programming.
4.5 (3,114 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.
25,815 students enrolled
Take This Course
  • Lectures 246
  • Length 32.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2015 English

Course 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


  • 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 :)

What are the requirements?

  • No prior design or coding knowledge required!
  • Any operating system: Mac, PC, Linux
  • No expensive software required

What am I going to get from this course?

  • 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

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction: Why This is The Only Design/Development Course You'll Ever Need


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!


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


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!


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!

4 questions

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


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

Section 2: Introduction to Visual Design

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


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

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


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


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


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.

7 questions

Let's challenge your Visual Design knowledge!


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.

Section 3: Introduction to Adobe Photoshop

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.

4 questions

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.

Section 4: Introduction to Web Design (and more Photoshop)

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.

10 questions

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.

Section 5: Advanced Web Design Challenge

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!

Section 6: Introduction to HTML

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!

8 questions

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.

Section 7: Intermediate HTML

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.

11 questions

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.

Section 8: Advanced HTML & 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!


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.

7 questions

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.

Section 9: Expert HTML & HTML5

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.

4 questions

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.

Section 10: Introduction to CSS

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


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


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


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


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


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


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


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


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


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


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.


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


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 11: Intermediate CSS

Welcome to Intermediate CSS! We'll dive into more CSS techniques in this section.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Brad Hussey, 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

Instructor Biography

Code College, 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.

Ready to start learning?
Take This Course