A presentation at Computer Science Association - AWS Bootcamp by Jenna Pederson
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
<p>Hello, World!</p> @jennapedersonHTML Element PARAGRAPH ELEMENT
<p>Hello, World!</p> THE OPENING TAG @jennapedersonHTML Element PARAGRAPH ELEMENT
<p>Hello, World!</p> THE CLOSING TAG @jennapedersonHTML Element PARAGRAPH ELEMENT
<p>Hello, World!</p> THE CLOSING TAG @jennapedersonHTML Element PARAGRAPH ELEMENT
<p>Hello, World!</p> THE CONTENT @jennapedersonNesting <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
Last questions CHECK THE CHAT @jennapederson
Thank you! Slides and resources can be found at: https://jenna.link/csa @jennapederson
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.