Web Snax: Super Simple Recipes for Easy Web Design

Get a FULL web design foundation in one simple, intuitive course. Save and make money creating beautiful websites ASAP.
4.8 (15 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.
1,771 students enrolled
Instructed by Kristen Palana Design / Web Design
92% off
Take This Course
  • Lectures 127
  • Length 9.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 11/2014 English

Course Description

Course Updated: November 22, 2016. (*Added section on getting started with Divi 3.0.)
Are you ready to get a FULL web design foundation and overview (the equivalent of 12 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 in Nov. 2014 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 tenured Associate Professor of Digital Media and the Program Director of Film & Digital Media at The American University of Rome and a practicing award-winning multimedia artist.

I have run my own charitable website, Aura's House that has raised over $100K 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.

I have over 16 years of experience 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 TWELVE 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.
  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.

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.

What are the requirements?

  • 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

What am I going to get from this course?

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

Who is the target audience?

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

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

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.


Some advice before you get started.

Section 2: Good Web Sites Have These Things In Common: The Do's of Web Design
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.


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.


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. Oh, and how to not design a website like someone with Multiple Personality Disorder.


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.

Section 3: Bad Websites Do These Things: The Web Design No-No's

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?


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)

7 questions

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

Section 4: Making a Website in a Text Editor or Code View in Dreamweaver CC

A disclaimer and some advice about learning HTML5.


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

1 page

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


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!)


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.


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


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


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!

1 page

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.


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.


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.


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.


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


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.

7 questions

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


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

Section 5: Creating Web Images and Animated Gifs

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


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.


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


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.


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


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 30 day free trial versions of Adobe software at adobe.com.)

75+ Resources to Get Free Images, Music, and Videos For Your Projects
6 questions

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

Section 6: Get a Free Web Host for Testing Purposes

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.

Section 7: Putting Your Stuff Online

A quick note about this section.

2 pages

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


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.

Downloading From the Remote Server and FTP Troubleshooting
5 questions

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

Section 8: Intro to CSS and Setting Up Your Site In Dreamweaver's Design-Mode

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


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


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


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

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.


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

1 page

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

6 questions

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

Section 9: Right-Brained Layout Strategies
1 page

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


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


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


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.


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.


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

Practicing Layout and Making Your Own Templates With "Save As"
Section 10: Some Factors You Need To Consider When Building Websites

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.

Section 11: Adding Media and Other Extras to Your Website- The Easy Way

I'll explain how easy it is to add content rich and dynamic features to your website by harnessing the power of our left-brained coding friends.


Easily create a PDF from Word, Photoshop, Illustrator, etc and have it available for download from your website.


PDFs can also be spiced up by using an app called Issuu and others like it. The gist is, you create your e-book or magazine in your favorite software program. Then you export it as a PDF and use an app that will simulate the offline reading experience. It's really cool!

Have a look at a magazine project that new AUR graduate, Fatherani Fadhilah made available online via Issuu. SKETSA

Visit Fatherani's final website, made from scratch in Dreamweaver. This is the page where she links to her magazine, SKETSA.


I'll show you an easy way to simply take the code that Youtube, Vimeo, etc provide when you upload a video to their site, and use it to embed the video into your own web pages.

Section 12: Adding Javascript and Dynamic Features to Your Website

This is an introduction to using Dreamweaver's tools to insert javascript functionality into our websites with minimal fuss. First, I'll show you how to make a popup message appear which can also be used for geeky web design practical joking fun.


Here I'll show you how to add JQuery components to your site by demonstrating the shake effect on an image.


You can make a rollover in Dreamweaver by choosing Insert-> Image-> Rollover in the file menu OR you can use the Behaviors window to add the swap image behavior. I'll show you how to do the latter with ease.


I'll show you an easy way to add a cool, functional accordion style navigation menu using javascript that Dreamweaver provides for you.


Easily add a tab navigation menu to your site using code that Dreamweaver provides for you that you can edit and customize as needed.

Section 13: Some Gallery Creation Strategies For Your Website

This is a step by step guide to using the "Swap Image" Behavior in Dreamweaver to make a useful and good-looking image gallery using thumbnails and a collection of larger images.


Here are a few samples of especially nice rollover galleries made by my FDM319 Web Graphics, Coding, and Site Design students this past Fall 2014. (*Some work on rollover, others need to be clicked on.)

Anna De La Torre

Jeremy Allan

Fatharani Fadhilah


Overview: Learn a very right-brained way of making a fancy Lightbox gallery for your website without having to write a line of code.


If your version of Adobe Bridge is new, you might not have the Output Module installed. Here's how to set it up with minimal fuss.


Now that the Output Module is installed, we can have Bridge create a pretty photo book, greeting cards, or contact sheets as a PDF file that can be accessed from our website.


..and finally I'll show you how to make the Lightbox Gallery in just a few minutes, something that takes hours or days if created manually.

Section 14: How To PLAN Your Website

Experimenting and learning is fun, but let's get started now on building your real live professional website.


This PDF is a true classic and a gem from Nathan Shedroff written in 1997. Sounds ancient right? Nope! It's every bit as valid today, with the only exception being that the websites he refers to by name have all changed since the article was first written.


Get started on building our site inventory, navigation chart, and plotting the look and feel of your website

11 pages

This is a sample to help get you started creating your own Web Site master Plan. It doesn't mean you will have a gun to your head and can't make changes later. It will just help you move forward more productively and save yourself time later when you are actually building it.

Section 15: Setting Up Your Domain Name and Web Host -Training Wheels OFF

Here are some Do's and Dont's for choosing the best web hosting plan.


I'll walk you through the process fo getting a domain name and paid web host as well as provide resources.

1 page

Here are some links to help you get started researching the best web host provider and domain name.

Section 16: WordPress Hosted Sites: Migrating to a Content Management System

I'll introduce you to the process of getting set up with WordPress as well as provide resources.

1 page

Resources for getting started in WordPress.


OK. You've go the domain name, you've got the web host, you've even installed WordPress. Let's get started right away making your new WordPress hosted website. If you've made a website before using just code or Dreamweaver, you are going to think WordPress is like a fun little toy. Yes, things really do get easier the more we build on our knowledge!


Take my hand as I take you on a whirlwind tour of your new site, some important buttons, and behind the scenes into your Dashboard control panel.


Here is the rundown on everything you need to get started making your first amazing post.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Kristen Palana, Professor, Award-Winning Artist, & Digital Do-Gooder

My goal is to empower ordinary people to do extraordinary things.

I'm an American/Portuguese multimedia artist and educator recently based in Rome, Italy and a tenured Associate Professor of Digital Media at The American University of Rome where I also co-founded its Film and Digital Media Program. I have over 15 years of university teaching experience in North America, Europe, Africa, and Asia. Since July of 2016 I live and work in Yangon, Myanmar and am a Visiting Associate Professor at American University of Myanmar.

Besides teaching tens of thousands of students at Udemy and other online platforms, I'm also a Course Facilitator for the UN-mandated University for Peace (Costa Rica) through their Centre For Executive Education.

My work is exhibited internationally and online and has received a number of awards. I received my MFA from Pratt Institute in Computer Graphics and Interactive Media and also hold a BFA in Painting from Massachusetts College of Art and Design.

I love taking complex topics and making them simple. I'm currently researching 21st century learning methods and technologies and am enjoying exploring the world of online teaching and connecting with diverse groups of students from all over the world.

What can I help you with today?

Ready to start learning?
Take This Course