Learning Adventure
Become a Web Designer
In this Learning Adventure, we'll learn all of the necessary skills to become a successful web designer. We’ll start off first by learning how to read and write the essential languages of the web: HTML & CSS. Then, we’ll explore basic design principles like color theory and typography, which will help you to structure and design websites. Once we’ve covered the basics, we’ll advance on to make websites interactive and responsive using the latest tools and techniques. And lastly, we’ll learn some basic marketing methods and essential business strategies. Because having even a general understanding of these skills will make you a better designer and set you apart from the crowd.
- Things You'll Learn
- HTML
- CSS
- JavaScript
- jQuery
5 badges • 17 videos
-
Overview
Build a Simple Website
Smells Like Bakin' is a cupcake company in need of a website. This project will walk us through the basics of HTML and CSS from the very beginning. HTML and CSS are the structural and presentational building blocks of every website and will serve as the foundation for any web project.
-
Step 1
Website Basics
In this first stage, we'll learn about HTML and CSS, which are the building blocks of every website.
-
Step 2
Text Editors and HTML
One of the primary tools that web designers and developers use all the time is called a text editor. We'll use a text editor to write our HTML code, which will describe the structure of our content.
-
Step 3
Creating a Website Structure
HTML describes the structure of content on a web page, but it's also important to define visual structure. Using a CSS grid system, we'll rearrange page elements into an aesthetically pleasing layout.
-
Step 4
Styling Content
Grid CSS can help layout webpages visually, but to add more customizations like fonts and background colors, we will need to write our own CSS code. CSS also allows for borders, margin, padding, and much more.
-
Step 5
Launching the Website
Now that we're finished coding our website, it's time to deploy it live to the web. This involves several steps, including purchasing a domain and hosting. Then, we'll use the File Transfer Protocol (FTP) to put our files onto our server.
7 badges • 23 videos
-
Overview
HTML
This HTML tutorial helps you master HTML. Mastering HTML and its many elements is critical for any type of web professional. HTML or "Hyper Text Markup Language" describes the basic structure and content of a web page.
-
Step 1
Introduction
This introductory HTML tutorial is a broad overview of the Internet, the web, and markup languages.
-
Step 2
Text
Text in HTML can be structured many different ways. Utilizing text elements can add semantic structure to web pages.
-
Step 3
Lists
Lists in HTML can be used to create an ordered or unordered grouping of list items, such as a grocery list or your top five favorite movies.
-
Step 4
Links
Hyperlinks are the fundamental idea that makes the web great. They allow pages to be linked together so that it's easy to navigate through the sea of information.
-
Step 5
Objects
Objects in HTML include elements like images and multimedia plugins. This class of elements essentially allows for the addition of content that is not text-based.
-
Step 6
Tables
Tables in HTML can be used for structuring and formatting tabular data, similar to the display capabilities of spreadsheet software. Tables are useful for organizing and relating quantitative and qualitative data sets.
-
Step 7
Forms
Forms are a special class of HTML elements that can be combined together to create pages that accept user input. The user input generated by forms can then be processed by software that runs on the server-side.
13 badges • 55 videos
-
Overview
CSS Foundations
Cascading Style Sheets (CSS) is a language used to describe the visual look of a web page. Using CSS, it is possible to change colors, margin, padding, fonts, and much more. This content will consolidate the previously released CSS Foundations and CSS3 in a brand new and updated series.
-
Step 1
Getting Started with CSS
Learn basic CSS concepts and how to add CSS to a page.
-
Step 2
Selectors
Selectors allow for styling to be applied to particular page elements. This critical concept makes it easy to choose a specific page element and assign CSS.
-
Step 3
Advanced Selectors
Many advanced CSS selectors help keep our markup clean, semantic and flexible by targeting specific elements without the need of a class or an ID.
-
Step 4
Values and Units
Every CSS property has a type of value it can accept, such as a predefined keyword, a length unit, or a URL. In this Deep Dive, we'll cover common values and units CSS properties accept.
-
Step 5
Text, Fonts, and Lists
Text has a significant effect on how we view a web page, and CSS has many options for defining text styles. Font properties also enable us to change the appearance of text by assigning a font family, font size, thickness and more. In this Deep Dive, we’ll learn common font properties we can use to enhance our text, along with ways to style our HTML lists.
-
Step 6
The Box Model
Every HTML element, no matter how big or small, can be thought of as a rectangular box made up of content, padding, borders and margins. The Box Model is the basis of CSS layout and positioning, and it dictates how elements are displayed and interact with each other.
-
Step 7
Backgrounds and Borders
With CSS, any element can have a background and border applied, and certain properties affect how they appear. In this Deep Dive, we'll explore common CSS background and border properties, along with ways to add drop shadows and inner shadows to HTML elements.
-
Step 8
Web Typography
Web typography is an exciting and rapidly evolving area of CSS, wherein layout engines like webkit are pushing beyond W3C standards. In this Deep Dive, we’ll cover topics such as best practices for choosing a typeface, text layout, responsive text and vertical rhythm. We'll also explore font resources like the @font-face rule, and other detailed font features and techniques that will enhance our text.
-
Step 9
CSS Gradients
CSS gradients allow us to display smooth transitions between two or more colors. In this Deep Dive, we'll explore linear and radial CSS gradients, along with the differences in browser syntax. Released: March 21, 2013
-
Step 10
Flexbox and Multi-Column Layout
With CSS multi-column layouts, we can easily define multiple columns of text. One of the benefits of using CSS-based columns is flexibility; content flows from one column to another, and the number of columns can vary depending on the size of the device or viewport. The CSS3 Flexible Box, or flexbox, is a powerful new feature that makes CSS more efficient for layout. Elements can be dynamically rearranged on the page, laid out in any direction, have flexible dimensions to adapt to the display space, and much more! Released: April 1, 2013
-
Step 11
Transitions and Transforms
CSS transition properties provide a way to control the animation speed in changing the properties over a given duration. We can also specify time intervals, durations and timing functions that follow a customizable acceleration curve. CSS transforms allow us to change the position of elements without disrupting the normal document flow. Transforms are implemented using a set of CSS properties that let us apply transformations like rotation, skewing, scaling and translation in both the plane and 3D space. Released: May 5, 2013
-
Step 12
CSS Animations
CSS animations make it possible to animate transitions from one CSS style to another. Animations change a CSS property over time using keyframes that indicate the start/end states of the animations, and intermediate points along the way. We can easily control animations by including iteration values, delaying their start time, play states and more.
-
Step 13
Media Queries
Media queries allow designers to apply CSS declarations dynamically based on client conditions. Using media features like width, height, and color, we can tailor our content to a wide range of devices and resolutions without having to change the content itself.
3 badges • 10 videos
-
Overview
Aesthetic Foundations
Aesthetic Foundations will cover the elements and principles of art, along with color theory. This basic knowledge will provide a design language that enables more effective communication amongst designers and other team members.
-
Step 1
Elements
The elements of art form the basic visual building blocks. With elements like line, shape, and form, it is possible to approach design from an objective and analytical perspective.
-
Step 2
Principles
The principles of art are a set of rules or guidelines that utilize the elements of art to create patterns. By leveraging principles like harmony, contrast, and emphasis, the elements of art can be manipulated to bring forth emotional depth and dynamic visuals.
-
Step 3
Color Theory
Color theory is the study of mixing colors together and the visual effects of various combinations. Color has been studied for many centuries, but the advent of computer graphics has made this area even more interesting.
2 badges • 7 videos
-
Overview
UX Foundations
User Experience, or UX Foundations, provides a broad, introductory overview to user research, personas, content strategy, and design patterns and conventions. With an emphasis on people, and how they interact with things – rather than technology, this course does not depend on any specific skill set. Anyone with an interest in UX design will find something useful and applicable to their craft within this deep dive course.
-
Step 1
Introduction to User Experience
User Experience is a broad term that refers to a person’s emotions when using a particular product, system, or service. Even though we’ll be focusing on UX as it relates to the digital experience, we’ll first cover the user's tangible experience, as well. Then, we’ll move on to discuss how we can design for positive experiences by following a user centered design workflow, which we’ll follow for the remainder of this course.
-
Step 2
Defining the Project
When starting a brand new UX project it can be tempting to dive in and start writing content or designing right away. But first, it’s important to step back and define business and project goals, understand context, and determine constraints. With that, we can confidently move forward with planning our project. Because without taking the time to really understand the root of the issue – we can’t create an effective solution.
5 badges • 19 videos
-
Overview
Build a Responsive Website
The Smells Like Bakin' cupcake company needs their website to work on tablets and phones. We will modify the code of their pre-existing website so that it is flexible and fits beautifully into a wide variety of screen resolutions and devices.
-
Step 1
Introduction to Responsive Web Design
Some years ago there was a clear differentiation between desktop and mobile. The introduction of tablets and other new web devices brings the challenge of designing for more resolutions and devices than ever before. Fortunately, responsive web design has emerged as a robust solution.
-
Step 2
Creating a Fluid Foundation
The key to a responsive website is building it on a fluid foundation. This defines our website layout in ratios and proportions rather than absolute values. Using the target ÷ context = result formula, we'll convert widths, margins, and padding from pixels to percentages. We'll also learn how to make our images scalable.
-
Step 3
Adaptive Design
Introducing media queries allows us to target specific device resolutions; like an iPad or iPhone, and adjust our website's layout accordingly. This is referred to as an adaptive design approach.
-
Step 4
Responsive Design
Responsive websites are built on a fluid grid and use media queries not to target specific device resolutions, but rather to adjust the design and content as it reaches various breakpoints.
-
Step 5
Advanced Techniques
Responsive web design doesn't stop at creating a fluid foundation and implementing media queries. It's an ongoing process. In this stage, we'll continue to make our typography and media even more responsive. We'll also learn how we should move forward when starting responsive web projects from scratch.
4 badges • 9 videos
-
Overview
Introduction to Programming
Basic programming skills are essential for all web professionals, including designers. Many programming languages share a common set of concepts, which will be covered in this course.
-
Step 1
Basics
Computer programming can be intimidating at first, but this gentle introduction to the subject will make the learning curve a bit easier to climb.
-
Step 2
Control Structures
Control structures determine the flow of execution within an application. A conditional statement can fork the execution down several paths or a loop can execute the same code several times until a condition is met.
-
Step 3
Objects and Arrays
An array is a way of storing multiple items and each item is associated to a number called the index. Each item can be accessed using the index value. Objects are usually associated to meaningful pieces of data which it can hold and manipulate.
-
Step 4
Functions
A function contains a piece of code that needs to be executed several times from different parts of your application. A function optionally takes in arguments and returns an object or value as a result.
6 badges • 33 videos
-
Overview
JavaScript Foundations
Learn the fundamentals to the JavaScript Language. JavaScript is the key to programming in the browser, mastering jQuery, and building apps with Node.js. You will learn how to program effectively in JavaScript, the different types, functions, and techniques for writing solid JavaScript. You will benefit from taking Introduction to Programming if you don't have much experience with programming.
-
Step 1
Variables
The JavaScript Variables badge will teach you everything you need to know about variables, how they are created and used, and how JavaScript handles some special cases of variable creation.
-
Step 2
Strings
Strings are how we represent text in JavaScript. The JavaScript language provides a lot of great tools for creating and manipulating strings, and this chapter will teach you what you need to know to work with strings.
-
Step 3
Numbers
Numbers are an important part of any program. JavaScript provides several useful techniques for dealing with numbers.
-
Step 4
Arrays
Arrays allow us to store large numbers of values within a single variable. They act like lists which allow us to group our data together in an ordered fashion.
-
Step 5
Functions
Functions are a foundational concept in JavaScript. Functions allow us to store code for reuse in our programs. This allows us to organize our code and make it much easier to maintain and write.
-
Step 6
Objects
Objects are the foundation of JavaScript. They are very easy to learn, but can be a bit difficult to master. In this course we will look at simple JavaScript objects as well as how to use Prototypes to do object oriented programming.
5 badges • 20 videos
-
Overview
Build an Interactive Website
This project will walk us through the basics of jQuery and JavaScript and add interactivity to the Smells Like Bakin' website. JavaScript is the interactivity or behavioral layer of a website's front end and is used to add polish and enhance the user experience.
-
Step 1
Introduction to jQuery
JavaScript is used to add interactivity to the front end of a website. JavaScript works slightly differently in each browser, so to smooth out some of those inconsistencies, we're going to use jQuery, a JavaScript framework.
-
Step 2
Form Validation and Manipulation
jQuery offers a range of methods to detect when a user interacts with a form, we'll be using these methods in conjunction with other jQuery methods to add some browser-based validation to a simple contact form.
-
Step 3
jQuery Plugins
The jQuery community is a very active place, with hundreds if not thousands of developers contributing reusable code, known as plugins, to be used in your projects.
-
Step 4
Google Maps Integration
Google Maps offers two ways to add maps to your site, static and dynamic. We'll cover the basics of both and add some markers too.
-
Step 5
Customizing Google Maps
We'll be going further into the Google Maps API and introducing things like custom markers and info windows.
6 badges • 31 videos
-
Overview
How to Market Your Business
Marketing your business requires an understanding of how to communicate the benefits of your business to satisfy the needs of your potential customers. In this set of videos, we'll explore how to expand your reach and improve your messaging through various strategies such as social media, usability, SEO, video and email marketing.
-
Step 1
Social Media
These days, it takes more than a great website to spread the word about your product or service. Social networks are ideal for growing your network and for spreading the word about who you are and what you do.
-
Step 2
Usability Basics
Understanding the basics of usability can allow you to evaluate the effectiveness of your website. These best practices will help you create various website elements - from navigation to forms and even content - and identify existing issues, increasing the chances of presenting a successful website to potential customers.
-
Step 3
Usability Testing
Testing a site doesn't only mean evaluating its design; it also means determining if the users on your site can accomplish the goals they have in mind when they arrive. Testing with this in mind can reveal fixes that go far beyond simple code changes; it can lead to fundamental improvements in the way you do business and make money.
-
Step 4
Search Engine Optimization
SEO - or Search Engine Optimization - is vital to a business website's success. Understanding how search engines work and how to implement various search-related strategies will improve the value of your site and help get it found.
-
Step 5
Email Marketing
Email is one of the most powerful ways to market your business online. It's a great way to keep customers up to date on specials, new products, and the latest news. With a number of powerful campaign management tools available online, even the smallest of companies can get involved.
-
Step 6
Video Marketing
From no-budget to professional productions, video marketing can enhance the message a business is trying to communicate online. As video content becomes more accessible and expected by users, companies need to anticipate ways to use this medium to share information about products, services, and their sense of humor.
The Finish Line!
If you've made it this far, congratulations! If you think you're up for it, why not check out the related bonus content or take on another Learning Adventure?
Related Bonus Content
-
Bonus Video
Creating a jQuery Plugin
14 minutes 13 seconds
-
Bonus Video
Building with AngularJS and APIs
59 minutes 19 seconds
-
Bonus Video
HTML5 Boilerplate and Front-End Development - with Paul Irish
27 minutes 40 seconds
-
Bonus Series
In the Wild
Join Allison as she explores the web industry through interviews with web professionals. This is In the Wild.
-
Bonus Series
Code Racer
Learn how we built Code Racer, which is a real-time multiplayer game where people learn how to create a basic HTML web page while competing with others.
3977 people have joined this Learning Adventure!
Recently Joined
-
DeAnthony Muldrew
-
Arief Armanda
-
Ashley Richardson
-
Christel Macabeo
-
Benjamin Safford
-
Travis Solin
-
Kyle Rust
-
Twofold Creative
-
Gavin Maguire
-
Simon Kiflemariam
-
Jeff Spargur
-
Garry WRAY
-
Corey Chiarelli
-
Steevens ROUYARD
-
Christian Small
-
Ivana K
-
Angela Walston
-
Tomasz Foster
-
Jordan Henry
-
Kevin Walsh
-
Mallory Jackson
-
Dominic Michalec
-
Nick Seville
-
Matthew Morrison
-
Travis Libby
