Introduction to Front-End Development - WordPress.com · •Front-end or the client-side •It is...
Transcript of Introduction to Front-End Development - WordPress.com · •Front-end or the client-side •It is...
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