## ![](https://s3.amazonaws.com/python-ga/images/GA_Cog_Medium_White_RGB.png) {.separator}

Intro to Web Development With Python

--- ## Learning Objectives: *After this lesson, you will be able to:* - Describe how the web works. - Explain what we mean by front-end and back-end. - List the types of web developers. --- ## Discussion: What's the Web? How do you think the web works? Before we go about making a web app, let's start with how the web works at all. --- ## Finding a Florist - How does a browser know what page to display? *Also known as:* - How do I call my florist? I can just call "Joe's Florist" in my phone contacts. ![](http://fewd.nyc/notes/img/class02/florist.png) --- ## IP Addresses - Website URLs — "Joe's Florist" - Just names to make our lives easier. - `https://google.com` - `https://reddit.com` - IP addresses — "515-115-5156" - The actual address to which your browser goes. - `Google.com` is at `172.217.12.142`. - `reddit.com` is at `151.101.129.140`. --- ## Client-Server Relationship Review ![](https://s3.amazonaws.com/ga-instruction/assets/python-fundamentals/client-server.png) --- ## In Real Terms - Websites are just files your browser can read. ![](http://fewd.nyc/notes/img/class02/dns.png) --- ## What Types of Files? HTML (`.html`) - Provides website structure. CSS (`.css`) - Adds colors and fonts. JavaScript (`.js`) - Makes the website interactive. Images, text files, etc. - Displays additional info on the webpage. --- ## Quick Review Where do websites exist? - IP address: The actual location of a website on the internet. - `Google.com` is a friendly name for the IP address `172.217.12.142`, just like "Joe's Florist" is a friendly name for the phone number "(515) 115-5156." How does a website work? - Websites are actually just a bunch of files — images, text, and website-specific code. - They're hosted on servers — all the files for Google.com live on Google's servers. - Your browser is the client: It asks Google for the Google.com files so it can show them to you. --- ## Discussion: What Is Web Development? Does anyone want to guess (or know) what web development comprises? --- ## Web The work involved with building and maintaining a live website is split into two sides: **Front-End** - In a restaurant: - The dining room. - In web development: - What the user sees. **Back-End** - In a restaurant: - The kitchen, loading dock, and offices. - In web development: - What makes the website work (e.g., connects to servers). - Behind-the-scenes code. --- ## Front-End vs. Back-End: A Visual ![](https://vironit-bevc00m.netdna-ssl.com/wp-content/uploads/2016/08/front-end-vs-back-end-750x375.jpg) --- ## Front-End vs. Back-End: A Better Visual ![](https://images-cdn.9gag.com/photo/a8pzYPp_700b.jpg) --- ## We Do: Front-End vs. Back-End Head to the [New York Public Library](https://www.nypl.org/)'s website: `https://www.nypl.org/`. - What is the happening on the front-end? - What is happening on the back-end? --- ## Types of Web Developers: Front-End Developer - Languages used: HTML/CSS/JavaScript. - Works on what the user sees. Back-End Developer - Languages used: Python, PHP, Ruby, or many others. - Works on making the website work. Full-Stack Developer - Does both as well as database work! --- ## Quick Recap Front-end development: - The visuals. - How a website looks and how a user interacts with it. Back-end development: - The underlying code. - How the website actually works. Full-stack development: - Includes both! --- ## Discussion: What Is a Web Framework? Does anyone want to guess (or know) what defines a web framework? --- ## Web Framework Web frameworks are used by both front- and back-end developers to make it easier to develop a website or web app. - Programming libraries: - Are free for your use. - They make development far easier because they: - Provide the client-server relationship piece. - Add features to make it easier to write a large web app. - Frameworks are usually language-specific. Popular examples include: - Flask, Django, React.js, Angular.js --- ## Discussion: Web App vs. Website Does anyone want to guess (or know) the difference? --- ## Web App vs. Website A website: - Is typically informational. - Has little-to-no interactive capabilities. - e.g., The New York Times or a small company's website. A web app: - Is an app hosted on the internet. - Uses the client-server relationship to render a website. - Offers the user more features than a static website. - E.g., a bank's webpage or an auction site. You can have a hybrid! - For example, a website can be static until the user logs in. - Then, it's a full-fledged web app.

**Teaching Tip:** - Be clear about the terms "web app," "website," and "webpage." **Talking Points**: - *Note: This was taken liberally from https://modeeffect.com/key-differences-between-website-web-app/*. - Websites are typically informational in nature. Think about your favorite blog or news-based site. Its primary purpose is to convey information to the end user, whether it in the form of news, like CNN, or recipes, like you’ll find on Martha Stewart. - As a general rule, there is little-to-no interaction on the part of the visitor, other than possibly submitting an email address to receive a monthly newsletter or performing a search. So the real question is, how does this apply to you? - Well, if you’re a local charity that wants to convey information only — e.g., a home page, an About page, contact information, upcoming events, and maybe a description of how you’ve helped your cause — then a website might be all you need. - You also need to consider that many websites are actually website/web application hybrids. Your startup might provide all kinds of information to visitors, but once they register they could have access to an integrated web application that performs a specific function.

--- ## Web Development Is Hard - Don't worry! - GA has several classes dedicated to it (e.g., part-time Front-End Web Development or JavaScript Development, or the full-time Web Development Immersive). - There's a lot of information out there! Right now, we're going to be building web apps with Python! --- ## Summary What'd we do? - DNS - The actual address of a website. - The Client-Server Relationship - Server sends website files to the client (your browser). - Front-End vs. Back-End - What the user sees versus what makes the website work. --- ## Additional Resources - [Fundamentals of Web Programming](http://interactivepython.org/runestone/static/webfundamentals/WWW/history.html) - [Understanding the Difference Between Client-Server and Peer-to-Peer Networks](https://www.techrepublic.com/article/understanding-the-differences-between-client-server-and-peer-to-peer-networks/) - [Web Applications and the HTTP Protocol](https://www.youtube.com/watch?v=RsQ1tFLwldY) - [Client-Server](https://www.youtube.com/watch?v=7_LPdttKXPc)