Introduction to Front End Development

Web Development

Fall 2017

Muhammad Shakeel

Objectives

• Setup development environment

• Difference between front-end, back-end, and full-stack web development

• Define roles of HTML, CSS, and JavaScript (emphasis on how these fit together)

2

Setup Development Environment

• Text Editor and a Browser.

• Browser: Google Chrome (and its developer’s tools)

• Text Editor: Sublime Text (No need to register – free)

▪ https://www.sublimetext.com/

3

Internet Basics

• Understand how the internet works (high end). • Watch:

https://www.youtube.com/watch?v=qEdv_pem-JM

• User asks or requests for a website, called an HTTP request• URL: Uniform Resource Locator• HTTP: Hypertext Transfer Protocol• Internet: A network of networks• Network packets and IP (Internet Protocol)

address• Request reaches the correct server, and the server

makes a response to that request(sends the webpage along with images, and text back to the requesting computer)

4

Finding the Right Address

• www.gift.edu.pk 69.89.31.136

• Your query is submitted to your ISP(Internet Service Provider)

• Within your ISP, the DNS (Domain Name System) takes the Domain name and turns it into an IP address (unique identifier)

5

Going to that Address

• A request is sent to the desired IP address via HTTP

• Your request finds the fastest path possible path to the server with the specified IP

• This is not a direct journey. It requires hoping from server to server until we arrive at the desired server

6

Server Response

• The requested server figures out exactly what we are asking for (home page, sign in page, or some other page)

• The server builds us the right content, often pulling information from the database

• The server responds with any combination of HTML, CSS, and JavaScript

• HTML: Hypertext Markup Language

• CSS: Cascading Style Sheets

• The browser renders the text (HTML + CSS + JavaScript) into a living page with text, colors, and images (View page source) 7

Front-end vs Back-end

• Tip of the iceberg (HTML + CSS + JS).

• It is what we see in the browser (View Source).

• Front-end or the client-side

• It is constructed by the back-end (server-side logic).

• Lots of options and technologies for the back-end (PHP, Ruby, Angular, Node etc.).

• Back-end constructs the front-end (HTML + CSS + JS).

• Restaurant analogy: The back-end is everything that happens in the kitchen; the front-end is what is plated and sent to your table.

8

Web Pages

• Static page: content remains the same every time the page is viewed

• Dynamic page: content changes with time, inputs, or selection

• Server-side code runs and constructs the contents

9

HTML

• Hypertext Markup Language

• Defines the structure of a page• “put an image here”

• “put a form here”

• The “nouns” of a webpage

10

CSS

• Cascading Style Sheets

• Defines the style of HTML• “make all text blue”

• “give the first image a red border”

• The “adjectives” of a webpage

11

JavaScript

• Adds logic and interactivity to a page• “Do some math”

• “Change color when the user clicks”

• “Load new data from twitter”

• The actions or “verbs” of a webpage

12

Codepen Demo

https://codepen.io/mshakeel/pen/EvLXrd

13

Next

HTML

14