Web Snax: Super Simple Recipes for Easy Web Design
4.5 (46 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,922 students enrolled

Web Snax: Super Simple Recipes for Easy Web Design

Get a FULL web design foundation in one simple, intuitive course. Create beautiful websites for fun or profit ASAP.
4.5 (46 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,922 students enrolled
Created by Kristen Palana
Last updated 6/2020
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 37 mins on-demand audio
  • 17 articles
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop a solid web design foundation that will provide many options for moving forward as a paid web designer or content manager.
  • Recognize major Web Design Do's and Don'ts and be able to apply these principles to any existing and new websites.
  • Know the easiest and most intuitive best-practices strategies for creating websites and all the extras.
  • Create websites from scratch using simple code in a text editor. Use your knowledge of HTML to expand your control of blogs, online forums, and in WordPress hosted sites.
  • Discover effective web graphics creation best practices and strategies in Photoshop.
  • Build a website from scratch in Adobe Dreamweaver CC.
  • Add powerful dynamic features to your website by tapping into the power of left-brained programming dynamos and their pre-written scripts you can add to your website for free.
  • Know how to move forward to set up a domain, web host, and WordPress hosted website.
  • Build a beautiful WordPress hosted website right from the ground up, import your content from other blogs and sites, and maximize your impact.
  • Easily give your website a complete makeover using the WordPress Elegant Theme, Divi.
  • Diagnose, tune-up, and supercharge your website so it performs better, generating more clicks, engagement, followers, subscribers, and sales 24 hours a day while you are off doing other things.
  • Use the course as your personal go-to guide and reference manual for all apsects of web site creation.
  • Learn the easiest and least expensive way to make a professional-looking website by using the top-rated online tool, Wix
  • No experience necessary, but you should have access to at least a simple text editor and preferably also Adobe Creative Suite, particularly Photoshop, Illustrator, Dreamweaver, and Bridge (optional).
  • Free 30-day trials of Adobe Software can be found at adobe

Are you ready to get a FULL web design foundation and overview (the equivalent of 13 power-packed smaller courses) all in one concise bundle from an artist and professor teaching web design since 2002 to hundreds of happy University students?

Use these bite-sized lessons to make your own website from scratch or learn how to manage a website that someone else created for you.

Worried that you are too late to get started or there is too much you don't know? Online tools, software programs, coding languages, and methods change or come and go, but a good web design foundation will stay with you no matter which direction you go in or which tools you ultimately use.

This course will teach you best practice web design fundamentals that NEVER change (the way software programs change) along with several current and easy methods for creating beautiful websites. Learn at your own pace and in the order you choose. Web Snax is one giant, delicious resource that you can come back to again and again.

What Students Are Saying:
This is probably to date one of the best courses that I have taken here at Udemy. Kristen is an excellent instructor and is very helpful as you move forward. I would recommend this course to anyone that is even thinking about learning web design. Kristen is Amazing. Thanks!" -Shawn G. Miller


Most of my past and current students are artists, designers, and technophobes who now never have to pay anyone else to make their own websites, saving themselves thousands per year.

Many have also gone on to start their own web design businesses or joined companies as well-paid web designers and content managers. If they can do it, so can you.

This fun and easy to follow course was originally created for my Web Graphics, Coding, and Site Design Students from The American University of Rome to use as a resource at the end of our busy semester and beyond. It's now open to the public, is constantly being updated, and has received glowing reviews from students all over the world.

In Web Snax, I draw upon my experience teaching web design on four continents to students from all walks of life and can show you how to create and manage your own website regardless of your personal software/hardware set up, resources, and budget.

New lessons are continuously added, making this the most comprehensive online web design course available and the best choice for right-brained, visual learners who are often intimidated by technology, software, and the like and prefer to be taught in plain language from a fellow creative.

I'm a practicing award-winning multimedia artist and a former tenured Associate Professor of Digital Media and Program Director of Film & Digital Media at The American University of Rome (2006-2016). I'm currently a Visiting Associate Professor of Digital Media at the brand new American University of Myanmar in Yangon, Myanmar (Burma). 

I have run my own charitable website, Aura's House that has raised over $125K for needy children in developing countries around the world. I also manage my own online portfolio, and have personally worked on the official website for multi-platinum, award-winning rock band, The B-52's and designed and/or contributed to websites for clients and non-profit organizations.

Since 2000 I've been teaching students all over the world using my tried and true custom approach (turning complex information into something simple, memorable, easy-to-understand in as short amount of time as possible) to ensure that you get the most important, relevant, and useful information that can be applied immediately.

This course teaches you THIRTEEN (*It's a lucky number in Italy :-) ) important essentials of web design, leaving you empowered to go in any direction you choose in the field.

  1. The Do's and Don'ts of Web Design and Best Practices.
  2. Content Management and Planning an Effective Website.
  3. Web Graphics and Media Creation Essentials.
  4. How HTML works and an introduction to coding.
  5. How CSS works.
  6. Making websites from scratch using Dreamweaver.
  7. How to upload to and download from the internet using an FTP program.
  8. How to get a high quality web host and domain name.
  9. Adding dynamic features to a website using J-Query assets, Javascript, and code created by programmers.
  10. Migrating to a Content Management System. Create/manage a WordPress hosted site and set up pages, posts, themes, widgets, plugins, etc.
  11. (*NEW) A Step-by-Step Demonstration of giving your website a complete makeover using the WordPress Elegant Theme, Divi 3.0.
  12. (*NEW) Diagnose, tune-up, and supercharge your website so it performs better, generating more clicks, engagement, followers, subscribers, and sales 24 hours a day while you are off doing other things. All students in this course get access to my follow-up course, WordPress Website Challenge: Easy Ways to Boost Impact FREE.
  13. (*NEW) Make web design easy. Create a beautiful, professional Wix website in about 1 hour using Wix's powerful free tools. All students in this course get access to my newest and easiest web design course to date: Wix: Make a Quick and Easy Professional Website for Free

This course will show you what to do and why to do it so you will understand the material easily and can apply it no matter what you decide to do next; as a content manager for your organization's website, a web designer for yourself or others, or as a key member of a company's full web team, etc.

You have a 30-day, 100% money-back guarantee with no questions asked so you have nothing to lose. I make myself available so you will have access to me if you have questions or need feedback along the way.

Please Note: Students enrolled in ANY of my courses periodically receive freebies and discounts to my other top-rated current and upcoming courses as well.

Are you ready to get started right away saving yourself money on web design fees and even making new income setting up websites for others? Let's go!

Click the "Take This Course" button in the upper right corner of this page to enroll now. I look forward to working together with you so you can empower yourself to achieve your web design goals.

Who this course is for:
  • Artists, dreamers, and visual learners who are tired of paying other people to make websites for them.
  • Complete beginners who have a slight fear of computers and technology.
  • Web design novices who already may have had some training and want to fill in some gaps or learn something new.
  • Left-brained programmer types (I admire you all SO much!) who want to learn more about design and more right-brained visual strategies to complement your technical skills and daring-do.
  • Novice to Intermediate Web Designers looking for more intuitive ways of accomplishing common web tasks, without all the technical jargon and assumptions about your coding capabilities.
Course content
Expand all 126 lectures 09:18:17
+ Introduction
2 lectures 05:03

This is an introduction to the course, who it's for, what you'll get out of it, and how to best use it as a resource.

Preview 02:33
+ Good Web Sites Have These Things In Common: The Do's of Web Design
5 lectures 19:41
About the Next Two Sections

This is an introduction to web design best practices and starts off with where to place the most important information on a web page.

Preview 02:47

We go over placement of important links, site organization, loading times, visual strategies, and the importance of having a good website that works well with additional social media pages.

Where to Put the Navigation, Visual Strategies, and other Good Web Design Do's

More good web design best practices are covered such as how to order and prioritize content, getting your viewer's attention (and keeping it), and choosing the right color scheme. 

Good Websites Know their Identity and Other Design Strategies

Here we take a look at tone or "vibe" in a website and how important it is for the web designer to ensure they are sending the intended message to the target audience.

The Importance of Tone and Vibe in a Website. Sending the Right Message.
+ Bad Websites Do These Things: The Web Design No-No's
2 lectures 10:31

Please don't glob up your page with too much text, make us scroll forever hunting for links, and hurt our eyes with bad contrast, sparkles, flashy animated gifs, and poorly cut-out graphics. Please?

Don't Do These Things! -Hallmarks of Bad Web Design.

Learn to recognize more hallmarks of bad web design, see places that cultivate and dissect bad websites, and how one man's bad website led to his dream fairytale wedding. (Sniff)

More Bad Web Design and How It Can Lead To Love (No Joke!)

Let's see if you can recognize the good, the bad, and the ugly in web design.

Web Design Do's and Don'ts Best Practices Quiz
7 questions
+ Making a Website in a Text Editor or Code View in Dreamweaver CC
15 lectures 48:51

A disclaimer and some advice about learning HTML5.

A Quick Note About This Section

An introduction to HTML and its importance to web design, past and present.

Introduction to HTML and This Section

Use this sheet to create your own first web page and follow along as I show you how to build it step by step.

Your First HTML5 Page- The Cheat-sheet
1 page

Learn how to use the basic building blocks of web design, Hypertext Markup Language. All you need is a simple text edito, and a browser. Don't worry, right-brainers, it's EASY (as long as you don't make typos!)

HTML 5: The Basics. Setting Up to Make Our First Website From Scratch

We'll use some simple HTML code to make THE most simple web page that can still be called a web page. Training wheels ON.

Making the World's Most Simple HTML Web Page

We'll add some text to the body of your HTML document so your first web page will actually be able to say something.

Simple HTML5 Webpages: Adding Text (-It Speaks!)

We'll add some images that are already web-ready.

Simple HTML5 Webpages: Adding Images

HTML is used for creating the structure of a website. Here I discuss how it works together with CSS, Javascript, and PHP languages. Very important!

An Important Note about HTML vs. CSS, Javascript, and PHP Coding Languages

Now that we're warmed up, here's the second cheat-sheet that adds a few more HTML tags to your tool belt. Use this sheet to follow along with me as we go from having a web page to a web SITE.

A Slightly More Advanced HTML5 Page- The Cheat-sheet
1 page

If you'd like me to show you what some of the tags on your new HTML5 cheat sheet do, watch as I add and test them. Here I mostly demonstrate some formatting and spacing tags.

Adding More HTML Tags and What They Do: Formating and Spacing

It's time to make a second page as well as a link to it from our first HTML page. Once you have more than one web page, you have an actual mini web site.

Adding Your First Link and Turning a Web Page Into a Web Site

I don't always teach you what to do. I also teach you what NOT to do. Here I easily fix a broken image link with no drama or panic whatsoever.

Common Problems: Fixing a Broken Image Link

Learn how to link to any page currently online and make it open in its own window or tab.

Adding Global Links: Link to Pages Outside Your Website

Are you still with me? You've almost jumped through your "mandatory-HTML-coding-for-beginners hoop." Here we add an email link and I show you another spacing trick for this stage of the game.

Adding an Email Link and Some More Spacing Tags

Let's see what you've learned so far after the HTML5 crash-course.

HTML5: Test Your Knowledge So Far
7 questions

Here is a great HTML Reference resource and a lovely animated video about the history of the internet.

Useful Links for Exploring HTML5 Further and a Web History Break
+ Creating Web Images and Animated Gifs
8 lectures 51:07

I'll tell you some important things you need to know before you start putting images online.

Intro to Creating Web Graphics and Important Tips

This is a crash course in itself of how to take an image and make it the correct size, resolution, and format for use on the web.

How to Make an Image Web-Ready (Photoshop CC)

Find out when it's best to save as a JPEG and when a GIF is called for and why.

When to Save as a GIF Instead of a JPEG

Time to get out of the box and make some more interesting graphics that ditch their rectangle borders.Please click on the download/resources tab to get a link that discusses more about transparent GIFS as well as two other possible formats you might decide to use.

Making a Transparent GIF

I'll teach you how to make a simple animated GIF and how to use your new powers for good and not evil. (Bad animated GIFS are annoying.)

Creating a Simple Animated GIF

Here is a simple, cheap, and easy way to make a slideshow for your website without needing to get into Wordpress plugins or anything else. All you need are your images and Photoshop. (*Remember, you can always get 7 day free trial versions of Adobe software at adobe.com.)

Preview 08:53

In this lesson (that comes from my top-rated course, Make Easy But Powerful Social Media Graphics: Canva | Stencil) I will show you a super easy and quick way to take an existing logo and put it on a transparent background. I normally do this task in Photoshop or Gimp, but after creating this lesson, I'm just going to use the free online tool Lunapic instead. It's a time saver! :-)

Extra: Take Your Logo and Put It on a Transparent Background in Under 4 Minutes
75+ Resources to Get Free Images, Music, and Videos For Your Projects

See how much you just learned from the Images, Graphics, and Animations Section.

Images and Animations for the Web, Best Practices Quiz
6 questions
+ Get a Free Web Host for Testing Purposes
1 lecture 00:58

Having a new website is nice, but at some point we need to actually put it online. Here is my take on free web hosts and a link of recent recommendations to get you started.

A Free Web Host in 2020? Really? Yes!
+ Putting Your Stuff Online (When you are NOT using WordPress)
4 lectures 16:12

A quick note about this section.

How to Put Your Stuff Online With an FTP Program or Dreamweaver CC

The Cheat sheet for setting up in Dreamweaver and putting your site online.

A Cheatsheet to Get You Started Putting Your Stuff Online
2 pages

I'll show you how to set up a new site in Dreamweaver, enter your local and remote server information, and actually put your files online for the world to see.

Step by Step Demonstration For Putting Your Files Online via Dreamweaver
Downloading From the Remote Server and FTP Troubleshooting

This quiz will help test your knowledge of FTP programs and getting your stuff online.

Putting Your Stuff Online
5 questions
+ Intro to CSS and Setting Up Your Site In Dreamweaver's Design-Mode
8 lectures 32:41

This is an introduction to my approach regarding teaching visual learners CSS

Introduction to CSS

This is an introduction to CSS and how it can be used to finally control the look and feel of your HTML pages.

What CSS is and 3 Ways to Use It

Design View, where have you been all my life? Here's what the right-brainers have been waiting for.

Using Design Mode in Dreamweaver and Building Your Geek Vocabulary

Here we'll use the Properties Window to start adding background colors, fonts, and other visual settings to our web page.

Crash Course: Add CSS Using Design Mode in Dreamweaver CC
Important Tips About Using Fonts in Your Web Site

Here I show you some easy ways to make little edits to your HTML pages in Dreamweaver's Design View.

Little Edits and Making Links in Design View

I'll show you how to easily edit images in Design View in Dreamweaver as well as introduce the importance of adding accessibiltity features for your web audience

Editing Images & Adding Acessibility Features in Design Mode in Dreamweaver CC

Here is one online and one offline resource for learning more about CSS.

More CSS Resources For Further Learning
1 page

This quiz will test your knowledge of what we covered in the CSS intro section.

Review of CSS Quiz
6 questions
+ Optional: Right-Brained Layout Strategies for those NOT using WordPress
7 lectures 35:15

I'll show you what I will cover regarding beginning layout strategies as well as additional resources for the extra self-motivated and inquisitive.

Layout Strategies and Resources
1 page

I'll show you an old-school trick that can be a lifeline for right-brained web design beginners. Training wheels ON.

Creating a Clickable Image Map

This is a simplified introduction to how CSS takes HTML elements and uses the box model to create a layout.

What Is The Box Model? Using HTML5 DIV Tags Together with CSS.

Here we'll look at a Dreamweaver HTML template so I can show you exactly how DIVS and CSS work together to create layouts and how you can use such a template for your own site.

Using a Template to Understand How DIVS and CSS Work

Here I show how I use tables as training wheels for artsy-folks for displaying tabular data and as a crude layout hack for those committed to learning the more proper DIVS and CSS layout methods among others later on.

Tables as Training Wheels for Right-Brainers

Here I get into all the settings for controlling tables as well as provide overall good design advice regarding text and imagery.

Controlling Tables
Practicing Layout and Making Your Own Templates With "Save As"
+ Some Factors You Need To Consider When Building Websites
1 lecture 03:30

Web design is NOT like graphic design. You can't guarantee your colors, layout, sizes, and text won't change. You CAN however be aware of what is beyond your control and plan things so your site more or less displays and functions the way you expect it to.

Web Designer Awareness: Some Factors Beyond Your Control and How to Cope