WHAT IS
FULL STACK?
INTRO TO
WEB DEV
HTML/CSS
HTML stands for Hypertext Markup Language is a language that are made up of
tags used to create web pages. Web developers nowadays have used HTML and CSS
to separate content from presentation. Take a look at zen garden to see what
can be done to the same HTML file using different CSS files. The possibilities
are endless.
In this lesson series, you will learn how to create an HTML using the Aptana IDE. You will learn about HTML5 tags and how to incorporate a CSS file. By the end of this experience, you will be able to create a basic web site that has a simple, yet beautiful presentation.
In this lesson series, you will learn how to create an HTML using the Aptana IDE. You will learn about HTML5 tags and how to incorporate a CSS file. By the end of this experience, you will be able to create a basic web site that has a simple, yet beautiful presentation.
RESPONSIVE
In the early days of the internet, there were only several screen sizes that
web developers had to program for. This made the presentation portion of the
process easier, with developers using standard widths and heights.
With the advent of different computing devices, web developers had to come up with a solution to the problem of accomodating the large variety of screen sizes. A website needed to look presentable when viewed on a desktop, tablet, or cellphone.
One solution we are going to explore is the use of the Skeleton Boilerplate. Skeleton is a set of pre-built classes that automatically resize a website based on the size of the receiving device's display. Skeleton also incorporates the 960 grid system, making web page design a simple task of arranging pre-built boxes.
With the advent of different computing devices, web developers had to come up with a solution to the problem of accomodating the large variety of screen sizes. A website needed to look presentable when viewed on a desktop, tablet, or cellphone.
One solution we are going to explore is the use of the Skeleton Boilerplate. Skeleton is a set of pre-built classes that automatically resize a website based on the size of the receiving device's display. Skeleton also incorporates the 960 grid system, making web page design a simple task of arranging pre-built boxes.
COOKIE CLICKER
Cookie Clicker is a Javascript game that burst on the scene in 2014 and had
players clicking furiously on their computer keyboards. A simple game that
taps into the hoarders motivation to collect and improve. Surprisingly addicting
and always leaves you wanting more.
In this lesson series, you will program "Cookie Clicker" using Javascript to manipulate the required variables and DOM elements. Clicking on a picture of a cookie will cause your number of cookies to grow, which will in-turn allow you purchase buildings. They say there is no end to the game, but eventually your scores will exceed the amount that can be stored in a variable. Up for the challenge?
In this lesson series, you will program "Cookie Clicker" using Javascript to manipulate the required variables and DOM elements. Clicking on a picture of a cookie will cause your number of cookies to grow, which will in-turn allow you purchase buildings. They say there is no end to the game, but eventually your scores will exceed the amount that can be stored in a variable. Up for the challenge?
LOGIN SYSTEM
The version of Cookie Clicker on Dashnet allows you to save the state of your game as you progress. Ironically, the original web application uses a text file called a “cookie” to store this information. We could use a cookie as well, but since this is a great opportunity to explore database integration using SQL and PHP, your web application is going to use a login system to store the data describing the game’s state in a database.
We will start by creating the account login and creation web pages and then code the backend using PHP and mySQL running on Xampp and SequelPro. Finally, we will learn how to send information to and from the database server asynchronously using AJAX and JSON. It sounds complicated, but once you get the hang of it, you will have an understanding of the systems going on behind every social media from Facebook to Twitter to Instagram.
We will start by creating the account login and creation web pages and then code the backend using PHP and mySQL running on Xampp and SequelPro. Finally, we will learn how to send information to and from the database server asynchronously using AJAX and JSON. It sounds complicated, but once you get the hang of it, you will have an understanding of the systems going on behind every social media from Facebook to Twitter to Instagram.
SAVE/RESET
We will now be creating a save button that will store the state of the user's game into the database. To handle some of the database requests, we will be using AJAX. AJAX stands for Asynchronous Javascript & XML. Asynchronous means having two actions take place at the same time. In our case, we will be having a client playing our Cookie Clicker while behind the scenes a request to the server will ask for information to be pulled from the database and sent back to the application on the client’s side. This process uses Javascript to trigger the requests and XML to store the data encoded using JSON.
This process sounds complicated, but once you get the hang of it, you will have an understanding of how data is transferred to and from a client’s computer to the server without refreshing the browser. Many web applications such as Gmail, Google Maps, and especially Cookie Clicker use this technique to allow a web page the ability to display data without having to leave the web page.
This process sounds complicated, but once you get the hang of it, you will have an understanding of how data is transferred to and from a client’s computer to the server without refreshing the browser. Many web applications such as Gmail, Google Maps, and especially Cookie Clicker use this technique to allow a web page the ability to display data without having to leave the web page.