Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development –...
Transcript of Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development –...
![Page 1: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/1.jpg)
Lesson 1
Introduction to Web Development –Course Overview
Presented by:
Julian Quirke Web Development Educator
Diploma in Web Development – Part I
![Page 2: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/2.jpg)
Lesson 1
About us
Course Agenda
Member Area & Community
Course Engagement
What is Web Development?
Designers vs Developers
Types of Content & Components of
Web Apps
Summary
Course Interaction
Q & A
![Page 3: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/3.jpg)
About Us
• 4+ Years / 2012
• Largest LIVE Educator on the Planet
• 400,000+ new students per month
• Offices All Over the World
• 350+ full time employees (Shawsters)
• 10+ languages
• EGBET
![Page 4: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/4.jpg)
The Truth is…
Achieving Results Takes Hard Work
• Foundation = “What is” ……
And Most Are Not Willing To Do It!
• Attend LIVE = Learn
![Page 5: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/5.jpg)
Course Agenda
Week 1: Laying the Groundwork
Lesson 1 : Introduction to Web Development
Lesson 2 : Creating Web Pages
Lesson 3 : Javascript Fundamentals (Pre-recorded)
Week 2: Preparing the Systems
Lesson 4 : Creating Javascript Widgets
Lesson 5 : Setting Up a Web Server
Lesson 6 : Content Management Systems (Pre-recorded)
Week 3: The Powerhouse of Web Development
Lesson 7 : Programming Fundamentals
Lesson 8 : Introduction to PHP & Back-End Languages Important
Week 4: The Final Pieces of the Puzzle
Lesson 9 : PHP & Databases Important
Lesson 10 : Putting It All Together Important
![Page 6: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/6.jpg)
Final Assignment
• 100 multiple choice questions
• 55% to pass
• €9 administrative fee
• Free for Shaw Academy Members
![Page 7: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/7.jpg)
Competition Time
• Live = Best
• Libraries = Don’t Teach
• We reward our most diligent students
• Shaw Academy Lifetime Membership Prize
- draw during lesson 8
• Attend 80%+ of the lessons live
![Page 8: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/8.jpg)
Webinar Interaction
• Any questions?
Our support team are here to help
• Chat Box
Comment and ask us questions
• Bonus Q&A at the end of every lesson
• How do I access recordings?
• www.shawacademy.com – login top right
![Page 9: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/9.jpg)
Members Area
Let’s look at the Members Area
![Page 10: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/10.jpg)
Social Media
https://www.facebook.com/shawacademy https://twitter.com/shawacademy
![Page 11: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/11.jpg)
Let’s Begin
![Page 12: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/12.jpg)
What is Web Development?
What is Web Development?
![Page 13: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/13.jpg)
What is Web Development?
Web Development refers to building, creating, and maintaining web content
It includes web design, web publishing, web programming, and database management
![Page 14: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/14.jpg)
What is Web Development?
To stimulate the brain we will continuously ask questions
Why should you learn Web Development?
![Page 15: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/15.jpg)
• A web page is a document written in HTML (Hyper-Text Markup Language)
• A website is a collection of web pages
• Accessible through the internet using a web browser• Chrome, Safari, Firefox, Internet Explorer
etc.
What is Web Development?
What is a web page/website?
![Page 16: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/16.jpg)
Design vs. Development
Web Designer
• Look and feel of the website
• Colours, fonts, layout
• Menus and navigation
• Design background
Web Developer
• Functionality of the website
• Programming focused
• Create Databases
• Servers and Hosting
What is Web Development?
![Page 17: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/17.jpg)
Website vs. Web App
Website
• Static – Informational, brochure style content
• Generally the same content for every visitor
Web App
• Dynamic – Dependant on user interaction
• Changes based on user data
• Individual user content*Most websites will have some dynamic content
What is Web Development?
![Page 18: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/18.jpg)
What is Web Development?
Why Should You Learn Web Development?
• The Internet is everywhere• Jobs!• Work Anywhere• Create Anything
![Page 19: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/19.jpg)
Components of a Web Application
Components of a Web Application
![Page 20: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/20.jpg)
Components of a Web Application
Web Applications are build with modules that join together to make up the whole
The main elements include a web server, web pages, backend code, and databases
![Page 21: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/21.jpg)
Components of a Web Application
To stimulate the brain we will continuously ask questions
What elements of a web application are contained inside a web server?
![Page 22: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/22.jpg)
• Web Server
• Web Pages
• Backend code
• Databases
Components of a Web Application
![Page 23: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/23.jpg)
Web Server
• A computer with software for delivering web pages installed
• Contains content for a website
• You use them all the time!
Components of a Web Application
![Page 24: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/24.jpg)
Web Server
www.facebook.comA request for that website is sent to the
web server
The web server finds the content on its hard disk and sends it to the web browser
Web server at the Facebook data center
User enters the URL for a
website in their browser
Components of a Web Application
![Page 25: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/25.jpg)
Components of a Web Application
![Page 26: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/26.jpg)
Web Pages
• HTML (HyperText Markup Language) is a coding language used to create web pages
• Uses ‘tags’ to tell the browser how content should be formatted
• <html>
• HTML5 is the current version
Components of a Web Application
![Page 27: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/27.jpg)
• CSS - Cascading Style Sheets
• Used to style and position web page content
Web Pages
Components of a Web Application
![Page 28: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/28.jpg)
Some Terminology
• Front end – Refers to everything that is sent to the browser• Web Pages – HTML, CSS, and Javascript Code
• Back end – Refers to everything that happens on the web server• Backend Code, Databases, Data Processing
Components of a Web Application
![Page 29: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/29.jpg)
Backend Code
• Backend code is used to validate,process, and manipulate data coming and going from the web server
• Static websites will usually not use a back end as they do not need to process data
Components of a Web Application
![Page 30: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/30.jpg)
Backend Code - Example
Login FormPassword: 12345 Password is sent to the server
Code on the web server checks the list of users and passwords to find a match
User is either sent the page they wanted or an error if the password
is wrong
Components of a Web Application
![Page 31: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/31.jpg)
Backend Code – Why is it important?
• Security – The user can only see what the server sends to their browser
• Speed – All the processing is done on the server
Components of a Web Application
![Page 32: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/32.jpg)
Database
• Databases are behind most of the information systems we use everyday
• A database is a collection of information that is organized so that it can easily be accessed,managed, and updated
Components of a Web Application
![Page 33: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/33.jpg)
When should you use a database?
• Your webpage needs to be updated frequently with user content
• You need to allow users to log in using a password• Store passwords in a database and write code to automatically verify login
info!
• You want users to be able to purchase items on your site• Use the database to monitor transactions!
Components of a Web Application
![Page 34: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/34.jpg)
Looking at Everything TogetherWeb Server Software
Database Engine
Web Pages
Backend Code
Components of a Web Application
![Page 35: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/35.jpg)
Components of a Web Application
What elements of a web application are contained inside a web server?
• Server software• Web Pages• Backend Code• Database engine• i.e. Everything!
![Page 36: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/36.jpg)
Introduction to HTML & CSS
Introduction to HTML & CSS
![Page 37: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/37.jpg)
Introduction to HTML & CSS
HTML (hyper-text markup language) is a standardised system for tagging text files to allow
font, colour, graphic, and hyperlink effects on world wide web pages
CSS (cascading style sheets) describes how HTML elements are to be displayed on the screen
![Page 38: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/38.jpg)
Introduction to HTML & CSS
To stimulate the brain we will continuously ask questions
What is the difference between a HTML element, and a HTML tag?
![Page 39: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/39.jpg)
HTML Example
HTML Code Result in Browser
Introduction to HTML & CSS
![Page 40: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/40.jpg)
CSS Example
No CSS With CSS
Introduction to HTML & CSS
![Page 41: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/41.jpg)
Shaw Academy Website with CSS Shaw Academy Website without CSS
The Power of CSS
Introduction to HTML & CSS
![Page 42: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/42.jpg)
Introduction to HTML & CSS
What is the difference between a HTML element, and a HTML tag?
• An element is the full markup of a section e.g. a paragraph
• A tag is something to define what kind of element is being marked up
![Page 43: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/43.jpg)
Homework
• Build a static website using only HTML & CSS
• To be submitted by Lesson 5
• Email attachment to your Support Manager
• Best submission will be demonstrated live in
Lesson 5!
![Page 44: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/44.jpg)
Summary
What is Web Development?
Components of a Web Application
Introduction to HTML & CSS
Congratulations – you have just laid the foundations
Tús Maith Leath na hOibreo Now we can start building on our theoretical & technical knowledge
o Attend all of the lessons live to ask Questions in real time and
benefit the most
o We’re here to help, so contact us anytime!
![Page 45: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/45.jpg)
Next Lesson
• The next session is “Creating Web Pages”
• HTML
• CSS
• HTML Editor Software
• Useful Resources
• Attend all of the lessons LIVE and your knowledge will grow
• Shaw Academy Lifetime Membership Prize during Lesson 6
• Recordings are available within 24 hours
Go to www.shawacademy.com and then the Top Right Corner – Members Area
![Page 46: Diploma in Web Development Part I - Amazon S3 · Lesson 1 Introduction to Web Development – Course Overview Presented by: Julian Quirke Web Development Educator Diploma in Web Development](https://reader030.fdocuments.us/reader030/viewer/2022041301/5e1067ef23d8821083461be3/html5/thumbnails/46.jpg)
Q&A
• Practical look at building a static website
• You will learn HTML, CSS, and Text Editors
• Covering these topics will allow us to move
into more application focused areas
• You will gain knowledge and understanding
• We reveal the answer to today’s question
Next Lesson is
www.facebook.com/shawacademy
www.twitter.com/shawacademywww.twitter.com/shawwebdev
www.shawacademy.com
Creating Web Pages
See local numbers on website