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

Web Development In Introduction to Front Fall 2017 End Development 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