Learning Adventure
Become a Web Developer
In this Learning Adventure, we'll learn how to create basic web applications in the Ruby programming language and the Ruby on Rails web application framework. Once we're through, we'll have the knowledge necessary to create web applications (like social networks) and simple Ruby programs.
- Things You'll Learn
- HTML
- CSS
- Ruby
- Ruby on Rails
- Git
- JavaScript
- jQuery
- CoffeeScript
- Relational Databases
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.
11 badges • 46 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
-
Stage Coming Soon
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 and 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.
-
Stage Coming Soon
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.
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.
4 badges • 16 videos
-
Overview
Console Foundations
The console is an important skill for any developer. Many programs can only be used via a command line interface, and often the only access you have to a server will be over a command line interface. Once you are familiar with the basics of the console, you will be able to perform very powerful tasks quickly and easily.
-
Step 1
Getting Started with the Console
The command line and console can be a scary thing to get started with. Once you understand the history of the command line, and what it's good for, you can get familiar very quickly. The command line provides you the ability to interact with your computer using text commands, often making actions that would be difficult with menus or mouse clicks simple.
-
Step 2
Users and Permissions
Almost all computers have the idea of user accounts. Along with that comes permissions which define which users can interact with the different files and programs on the computer. It’s important to know how to setup and manage users, and how permissions are applied to files and folders.
-
Step 3
Processes
A process is the building block of how our computers run programs. It represents an instance of a program running. You can run multiple instances of a single program by creating multiple processes. Anything that is running has a process, and understanding how to manage your processes will keep you in control of your computer.
-
Step 4
Environment and Redirection
The environment is a general term that refers to a particular configuration of hardware or software. It defines where the computer should look for programs, where your important folders are, and other configuration data. We will look at how to manage your environment and how to do other useful things, like finding files on your computer.
-
Stage Coming Soon
Setting up a Server
Using the command line is always a means to do something else. A common thing you may do using the command line is installing and configuring software. To practice what we learned, we will set up a complete server environment that will host a wordpress installation from scratch. This will involve installing software, managing users and permissions, editing files, and more.
9 badges • 48 videos
-
Overview
Build a Simple Ruby on Rails Application
This project will walk us through creating a social networking web application with features similar to Facebook. Ruby on Rails is a web application framework which makes it easy and quick to build dynamic web sites.
-
Step 1
Getting Started with Rails
There are many things involved in creating a complicated web application. There are clients, servers, and all of the things in between. This stage walks us through what web applications are and the process of installing Ruby on Rails.
-
Step 2
Frontend Development
A large part of creating web applications is designing what the user sees when they view a page. This includes the HTML markup and CSS that styles the pages. This stage introduces views in Ruby on Rails, and how they let us shape the content.
-
Step 3
Creating an Authentication System
A common feature of web applications is to allow people to sign up and create an account, and then be able to log in with an email address and password. There are many security concerns that need to be taken into account when implementing such a feature. Fortunately, Ruby on Rails has several pre-built tools to make implementing a login system easy.
-
Step 4
Customizing Forms
Forms are an important part of any web application because they are how the user interacts with the app. Creating forms that are easy to use is simple to do with Ruby on Rails when you use the built-in tools and some other popular tools built for Rails.
-
Step 5
Writing Tests
Automated testing is a powerful tool that every developer should master. By writing tests that verify your code works as expected, you can reduce the number of unexpected bugs that make your app fail. Writing these tests also helps ensure you don’t break some other part of your app while building a new feature.
-
Step 6
Designing URLs
Ruby on Rails includes powerful tools for customizing and routing URLs. We'll show you how to define which URL will point to which page in our app.
-
Step 7
Testing the Whole App
In addition to testing small, specific functions of the web application, we also need to test that larger use cases are working properly, by writing higher level tests. We use these tests, called integration tests, to make sure common features like logging in and creating an account work for the user.
-
Step 8
Building the Profile Page
The profile page is the foundation of our social network application. Each user will have their own profile page with their own custom URL based on their username. This profile page will initially just show the status updates that the user has posted.
-
Step 9
Deploying
The most important step of creating our application is deploying it to the internet. While developing, we run the app locally to test it, but its final home is on the internet. There are many different ways of deploying a web application, but one of the easiest ways is Heroku, which lets you deploy your app for free.
14 badges • 61 videos
-
Overview
Ruby Foundations
Learn the fundamentals to become a Ruby and Rails developer. You'll learn things like what Ruby is, how to write object oriented Ruby, classes and modules, programming structures and types, and more. There are no requirements for this course other than a web browser and willingness to learn.
-
Step 1
Ruby Basics
The Ruby Basics badge will get you up and running with Ruby and have you writing your first Ruby programs in no time!
-
Step 2
Objects, Classes, and Variables
The Objects, Classes, and Variables badge gets you familiar with the Ruby language. You'll learn about how to tell the Ruby interpreter what to do, set variables, and create and instantiate classes.
-
Step 3
Strings
The Strings badge teaches you how to create and work with strings, learn about special characters and escape, and learn about common and useful methods available when working with strings.
-
Step 4
Numbers
The Ruby Numbers badge will get you comfortable working with numbers in Ruby. This badge teaches you about integers, floating point numbers, math, and more. You'll learn how to create and work with numbers, compare numbers, and work with currency.
-
Step 5
Arrays
An array is container for different kinds data. The arrays badge will teach you what arrays are and get you comfortable with creating and working with arrays.
-
Step 6
Hashes
A hash is a data structure which is a collection of key and value pairs. The hashes badge will get you comfortable creating, querying, and working with hashes.
-
Step 7
Methods
A method is a set of expressions that return a value. Learning how to create your own methods is the basis for almost all programming you'll do in Ruby. The Ruby Methods badge teaches you all about creating and using methods.
-
Step 8
Loops
A loop is a series of statements that can be repeated several times. The Ruby language has several different kinds of loops available when writing programs. The loops badge walks you through creating loops and using different kinds of loops in your code.
-
Step 9
Blocks
Blocks are a special kind of syntax in Ruby. A block is a way of grouping statements together that is executed when Ruby encounters the method. The Ruby Blocks badge teaches you how to create, use, and work with blocks in your Ruby programs.
-
Step 10
Procs & Lambdas
Procs & Lambdas are blocks of code that are assigned to variables. In this way, procs and lambdas can be passed around to different methods and the scope can change. The Procs & Lambdas badge teaches you how to create and work with procs and lambdas as well as the differences between them.
-
Step 11
Modules
Modules serve as containers for data, classes, methods, or even other modules. Modules are very useful for sharing behavior between your classes and are frequently used for namespacing classes and constants in your programs.
-
Step 12
Ruby Core
The core collection of classes and modules helps out when coding Ruby programs. The Ruby Core badge walks you through some of the classes and modules available.
-
Step 13
Ruby Standard Library
The Ruby standard library is packaged with every Ruby installation. The standard library contains modules and classes that are commonly used for writing programs. This includes functionality for testing, configuration, option parsing, benchmarking, and more. The Ruby Standard Library badge walks through some of the modules and classes available in the standard library.
-
Step 14
Testing
Automated testing is the process of writing code that tests different behavior of your programs. The Ruby standard library includes a library called MiniTest which can be used to write automated tests. The Ruby Testing Badge walks through using the MiniTest library and introduces the process of test driven development.
5 badges • 26 videos
-
Overview
Building Social Features in Ruby on Rails
In our first Ruby on Rails project, we started building a simple social network called Treebook. Now we're ready to add friendships, friend lists, and AJAX features using intermediate features of the Ruby on Rails application framework.
-
Step 1
Creating Friendships
Let's add social features to Treebook! In this stage we're going to add friendships to our Treebook application. We'll start by creating a friendship model as well as learn what a join model and join table are.
-
Step 2
Building the Friendship UI
Now that we have our friendship models created and tested, we need to build the front-end to let users friend each other. We'll start by creating a controller for user friendships and integrating that in to the application routes. Finally, we'll hook up the models to the new controller.
-
Step 3
Adding State
It is important to be able to respond to different events in our friendship model. For example, when a user sends a friend request to another user, we want the requestee to get an email. We're going to use something called a state machine to manage this.
-
Step 4
Using AJAX
Treebook is now working pretty well and allows users to friend each other. With all of this functionality in place, let's spice things up by adding some AJAX to our site for remote JavaScript interactions.
-
Step 5
Managing Friendships
In this stage, we're going to allow users to manage their friends. We'll provide a new interface for listing, deleting, and blocking friends.
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 Series
Design and Development
Learn how a designer and developer can effectively collaborate to build a web app.
-
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.
1769 people have joined this Learning Adventure!
Recently Joined
-
Sabik Biswas
-
Florian Hawes
-
Web MarkNow
-
Michael Akinwumi
-
Scott Van Patten
-
Sarah Williams
-
Nicholas Davidson
-
Shane Barry
-
Emanuel Ashiedu
-
Vikram Mudaliar
-
Travis Miller
-
Trevor Wilson
-
Rick Yentzer
-
Holda Crocker
-
Kedy Augustin
-
Ryan Kingsmith
-
Valerie Ennis
-
David Gilliam
-
Jason Breitigan
-
Blake Harp
-
Warren Johnson
-
Jason Pellegrino
-
Matt Denton
-
Perry Azevedo
-
Roxanne Brown
