Web Development on AWS

Web Development on AWS Oh! The Possibilities. @jennapederson

How will this work I’m going to talk. A lot. Use the chat! I have questions for you, too. Next week, we will build. @jennapederson

Question CHECK THE CHAT @jennapederson

1989 BIRTH OF THE WORLD WIDE WEB @jennapederson

Invented the web Sir Tim Berners-Lee by Paul Clarke licensed under CC BY-SA 4.0

The World Wide Web made the Internet more accessible. @jennapederson

Patrice Loïez CERN licensed under CC BY-SA 4.0

This machine is a server. DO NOT POWER IT DOWN!!

http://info.cern.ch/hypertext/WWW/TheProject.html @jennapederson

1991 WEB SOFTWARE WAS RELEASED PUBLICLY @jennapederson

EARLY 1993 BROWSERS RELEASED FOR X-WINDOW SYSTEM, PC, AND MAC @jennapederson

APRIL 30TH 1993 SOURCE CODE PUT INTO THE PUBLIC DOMAIN @jennapederson

LATE 1993 500+ WEB SERVERS + THE WEB ACCOUNTED FOR 1% OF THE INTERNET @jennapederson

END 1994 10K WEB SERVERS + 10M USERS @jennapederson

Design Principles Web for All Ensuring long-term growth of the Web W3C PRINCIPLES + VISION Web on Everything Vision Web for Rich Interaction Web of Data and Services Web of Trust @jennapederson

Today https://www.internetlivestats.com/

Connects us

Enables telehealth

Allows us to feel like we ate out

Empowers makers + small businesses

Enables volunteer efforts

Makes us laugh

Building quickly has the power to impact people’s lives. @jennapederson

Question CHECK THE CHAT @jennapederson

How Do Websites Work? @jennapederson

Files are hosted on a server and sent over the internet to your browser @jennapederson

Your browser looks up the server address using the URL and DNS @jennapederson

A copy of the files is downloaded to your computer @jennapederson

Frontend EVERYTHING THE USER EXPERIENCES DIRECTLY @jennapederson

HTML HyperText Markup Language. Defines the structure of your web page. @jennapederson

HTML Element PARAGRAPH ELEMENT

HTML Element PARAGRAPH ELEMENT

HTML Element PARAGRAPH ELEMENT

HTML Element PARAGRAPH ELEMENT

HTML Element PARAGRAPH ELEMENT

Nesting <p>Hello, <strong>World</strong>! </p> A NESTED ELEMENT @jennapederson

Attributes EXTRA INFORMATION <a href=”/index.html”>Home</a> THE ATTRIBUTE @jennapederson

Empty IMAGE ELEMENT <img src=”images/puppy.jpg”> NO CONTENT OR CLOSING TAG @jennapederson

CSS Cascading Style Sheets. Code to style your content. @jennapederson

CSS Rule <p>Hello, World!</p> THE SELECTOR p { color: red; } @jennapederson

CSS Rule <p id=”hello-world”>Hello, World!</p> THE SELECTOR #hello-world { color: red; } @jennapederson

CSS Rule <p class=”text-red”>Hello, World!</p> THE SELECTOR .text-red { color: red; } @jennapederson

CSS Rule p { color: red; } THE RULE @jennapederson

CSS Rule p { color: red; } THE PROPERTY TO INFLUENCE @jennapederson

CSS Rule p { color: red; } THE VALUE @jennapederson

Browser Differences @jennapederson

JS JavaScript. Makes your website more interactive. @jennapederson

JS REFERS TO THE HTML OF THE PAGE document.querySelector(‘button’).onclick = function() { alert(‘Hello, world!’); } @jennapederson

JS SELECTS BUTTON ELEMENTS FROM THE DOCUMENT document.querySelector(‘button’).onclick = function() { alert(‘Hello, world!’); } @jennapederson

JS ADDS A CLICK ACTION OR HANDLER TO ALL ELEMENTS SELECTED document.querySelector(‘button’).onclick = function() { alert(‘Hello, world!’); } @jennapederson

JS document.querySelector(‘button’).onclick = function() { THE CLICK HANDLER alert(‘Hello, world!’); } @jennapederson

JS document.querySelector(‘button’).onclick = function() { alert(‘Hello, world!’); } SHOWS AN ALERT WITH “HELLO, WORLD!” TEXT @jennapederson

Let’s See This In Action! @jennapederson

Backend EVERYTHING BEHIND THE SCENES, ENABLES THE FRONTEND TO BE MORE DYNAMIC @jennapederson

Backend servers contain frontend files @jennapederson

Backend servers contain frontend files, run our backend code @jennapederson

Backend servers contain frontend files, run our backend code, + store data in databases @jennapederson

Datacenters Buy physical hardware Pay for heating and cooling costs Maintain a building Over-provision resources Took months to build Had to physically go there @jennapederson

Not a big company? YOU, ME, A NEW BUSINESS, OR SMALL BUSINESS @jennapederson

What if… WE COULD DEPLOY OUR WEBSITE OR APP TO SOMEONE ELSE’S SERVERS IN DATACENTERS STRATEGICALLY PLACED AROUND THE GLOBE? @jennapederson

What if… IT WAS MANAGED BY SOMEONE ELSE? @jennapederson

What if… WE ONLY PAID FOR WHAT WE USED, AS WE USED IT? @jennapederson

What if… WE COULD DO THIS IN MINUTES, NOT WEEKS OR MONTHS? @jennapederson

What if… WE COULD DO THIS WITH THE CLICK OF A BUTTON? @jennapederson

That is the cloud. @jennapederson

The cloud empowers us Innovate and experiment faster Deploy globally in minutes Grow and shrink resources as our business needs change Pay for what we use @jennapederson

Amazon Web Services SINCE 2006 Secure, extensive, and reliable cloud platform Offers over 175 fully featured services from data centers globally 24 regions covering 245 countries and territories @jennapederson

AWS Developer Community THEY SUPPORT YOU AND CHEER YOU ON @jennapederson

Question CHECK THE CHAT @jennapederson

Let’s build a blog! WHY A BLOG? Show off what you learn Build an audience Make you more attractive to employers Hone your writing skills @jennapederson

Next week FOR THOSE WHO’VE NEVER PROGRAMMED BEFORE (OR ANYONE, REALLY) Workshop-style. Learn more about web development with HTML, CSS, and JS and build a static website on AWS Amplify. @jennapederson

Week 3 FOR THOSE FAMILIAR WITH WEB DEVELOPMENT Workshop-style. Build on first two sessions and build a web app deployed to AWS Amplify. Learn about more Amplify features. @jennapederson

Before you join MAKE SURE YOU ARE PREPARED

1. Install a text editor - VS Code is preferred (not Notepad or TextEdit) 2. Have access to Chrome or Firefox browser (not IE, Edge, or Safari) @jennapederson

Last questions CHECK THE CHAT @jennapederson

Thank you! Slides and resources can be found at: https://jenna.link/csa @jennapederson