Learning Adventure
Become a PHP Developer
PHP is a server-side programming language that allows us to create dynamic websites. By the end of this Learning Adventure, we'll have created a sophisticated dynamic website in PHP. We'll start out by creating a static website for a bakery using HTML and CSS, the basic building blocks of any website. Next, we'll build a simple dynamic website for a T-shirt store using PHP. We'll learn more advanced programming techniques in JavaScript and PHP, enhancing our simple websites by adding more robust functionality. We'll end this Learning Adventure by setting up our own web server in the Console, and you'll be ready to build and deploy your own dynamic websites in PHP. (5/10/2013: New CSS Foundations content added. 5/15/2013: New Enhancing a Simple PHP Application project added, and CSS Foundations moved.)
- Things You'll Learn
- HTML
- CSS
- PHP
- Programming
- JavaScript
- jQuery
- Console
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.
7 badges • 43 videos
-
Overview
Build a Simple PHP Application
This project will show you how to build an e-commerce store in the PHP programming language. By the end, you'll be able to build an online t-shirt store that can display inventory items and take orders via PayPal.
-
Step 1
Getting Started with PHP
The browser can understand HTML and CSS all by itself, but we’ll need a little bit more sophisticated setup to handle PHP. We’ll get familiar with what PHP code looks like and where it can run, exploring the differences between a client-side language and a server-side language. We’ll walk step by step through installing everything you’ll need to run PHP code, and we’ll end with a simple but functioning PHP script.
-
Step 2
Creating the Menu and Footer
Our product catalog website will have a number of pages, but the pages share a few common elements like the top navigation menu and the footer. We’ll build these shared elements into a set of template files, using basic programming concepts like variables and conditionals to make it all work.
-
Step 3
Adding a Contact Form
PHP does more than just make a set of HTML files easier to maintain. It also adds advanced functionality to a site that HTML and CSS alone cannot achieve, like sending an email. We’ll create a contact form for our website, allowing users to enter a message into an HTML form and then using PHP to process the form submission.
-
Step 4
Listing Inventory Items
Our product catalog contains quite a bit of information, too much to fit in simple variables. A PHP array will be perfect for the task, and we’ll explore all the ins and outs of working with arrays to store sets of related data. We’ll also use the data from the array to populate our main Shirts page that shows a list of all the products in our catalog.
-
Step 5
Integrating with PayPal
Each shirt in our catalog has its own individual page, and we’ll build out a new template for all of those pages that integrates with Paypal. PayPal offers services that provide an easy way to handle a shopping cart and payments. We’ll walk through the steps of setting up a new PayPal account. We’ll cover how to customize the cart and checkout pages, and we’ll get the form code necessary to integrate the Add to Cart buttons into our store.
-
Step 6
Working With Functions
The home page of our website displays a small subset of the products, but the layout should be the same as the Shirts Listing page. We’ll work with PHP functions, blocks of code that can be called from other blocks of code, to make sure that products are displayed the same across all list pages. PHP comes with a large number of native functions, but it also provides a way to create our own.
-
Step 7
Wrapping Up The Project
We have a few items left to wrap up the project, tightening the integration with PayPal and sending the email from our contact form. We’ll discuss how to deploy the site, objects in PHP, and third-party libraries. At the end of this stage, we’ll have a fully-functional ecommerce website.
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 • 32 videos
-
Overview
Enhancing a Simple PHP Application
This project will take the existing e-commerce store we built earlier and enhance it with new techniques using the PHP programming language. By the end, you'll be able to build an online t-shirt store with clean web addresses, basic search functionality, pagination, and more. You'll also understand programming concepts like refactoring and separation of concerns.
-
Step 1
Integrating Validation Errors
Our contact form currently checks that the information submitted by visitors to our site is valid, but we need to improve how validation errors get displayed. We’ll enhance the flow of our code that handles form submissions, displaying error messages within the context of the form and carefully avoiding a common security vulnerability by escaping our output.
-
Step 2
Cleaning URLs with Subfolders
The web addresses in our store have various technical pieces in them, like a .php file extension. Cleaning up the web addresses can help optimize them for search engines, make them easier to remember or to guess, and make them more likely to endure the same over time. We’ll cover a number of concepts as we remove the extension, including subfolders, constants, and absolute and root-relative paths.
-
Step 3
Cleaning URLs with Rewrite Rules
The web addresses in our store have various technical pieces in them, like question marks with variables after them. Cleaning up the web addresses can help optimize them for search engines, make them easier to remember or to guess, and make them more likely to endure the same over time. We’ll cover a number of concepts as we remove these pieces, including rewrite rules and htaccess files.
-
Step 4
Refactoring the Codebase
Refactoring is the process of improving your code’s structure to make it easier to understand, maintain, and extend over time. We’ll re-organize the code we’ve written so far to follow some good practices around separating different types of code. We'll discuss topics like automated duplication, models, and views. Finally, we’ll look at native PHP functions like array_reverse, as well as write a few new functions of our own.
-
Step 5
Adding Search: Controller & View
As the number of shirts increases, visitors to our store may want to search the catalog for shirts that contain a specific keyword. This functionality will require a new page with a search form. We'll create the page, writing the controller code to handle the form submission and the view code to display the form and the search results. We’ll also look at some more native PHP functions like empty.
-
Step 6
Adding Search: Model
As the number of shirts increases, visitors to our store may want to search the catalog for shirts that contain a specific keyword. This functionality will require a new function in the model to handle the search algorithm. We’ll examine the different data types for PHP variables and look at some more native PHP functions like strpos. We’ll also walk through how to use the online PHP documentation to learn about more native PHP functions.
-
Stage Coming Soon
Paginating a List: Controller
As the number of shirts increases, it can be helpful to present the Shirts Listing page across multiple pages with links between them. This functionality will require more robust controller code for the Shirts Listing page, using a GET variable to determine the page number and using some of PHP's native math functions to calculate which shirts should appear on each page.
-
Stage Coming Soon
Paginating a List: Model and View
As the number of shirts increases, it can be helpful to present the full list of shirts across multiple pages with links between them. This functionality will require a new function in our model code and new links in our view code. We'll cover a new math operator, a new kind of loop, and a partial view for shared code.
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.
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.
5 badges • 18 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.
-
Step 5
Installing Software
A common thing you may do using the command line is installing and configuring software. There are two main ways you can install software from the command line. You can build the software from its source code files, or you can use a package manager to install software for you.
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?
1155 people have joined this Learning Adventure!
Recently Joined
-
Khizar Shujaat
-
Mohd Aizzat
-
Ronny Perez
-
Ali Yazdani
-
Adam Roberts
-
Caleb McElroy
-
Marek Tobias
-
Jeffrey Engmann
-
David Hood
-
kyle kimberlin
-
John-Marvin Davis
-
Patrick Conaty
-
Nick Mersenski
-
Saau Reek
-
Girish Lamichhane
-
AJ Zawawi
-
Daniel Bethel
-
Nathan Hare
-
HERNAN GARZON
-
Lee Jorgensen
-
May Nyein
-
Sameer Parwani
-
Clint Sanders
-
Daniel Hallford
-
Andrew Shook
