In Introduction to Front Fall 2017 End Development Muhammad - - PowerPoint PPT Presentation

In 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

In 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

Ja 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 xt

HTML

14