diploma in web development part i - amazon s3 · lesson 1 introduction to web development –...
Post on 24-Sep-2019
10 Views
Preview:
TRANSCRIPT
Lesson 1
Introduction to Web Development –Course Overview
Presented by:
Julian Quirke Web Development Educator
Diploma in Web Development – Part I
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
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
The Truth is…
Achieving Results Takes Hard Work
• Foundation = “What is” ……
And Most Are Not Willing To Do It!
• Attend LIVE = Learn
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
Final Assignment
• 100 multiple choice questions
• 55% to pass
• €9 administrative fee
• Free for Shaw Academy Members
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
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
Members Area
Let’s look at the Members Area
Social Media
https://www.facebook.com/shawacademy https://twitter.com/shawacademy
Let’s Begin
What is Web Development?
What is Web Development?
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
What is Web Development?
To stimulate the brain we will continuously ask questions
Why should you learn Web Development?
• 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?
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?
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?
What is Web Development?
Why Should You Learn Web Development?
• The Internet is everywhere• Jobs!• Work Anywhere• Create Anything
Components of a Web Application
Components of a Web Application
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
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?
• Web Server
• Web Pages
• Backend code
• Databases
Components of a Web Application
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
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
Components of a Web Application
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
• CSS - Cascading Style Sheets
• Used to style and position web page content
Web Pages
Components of a Web Application
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
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
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
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
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
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
Looking at Everything TogetherWeb Server Software
Database Engine
Web Pages
Backend Code
Components of a Web Application
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!
Introduction to HTML & CSS
Introduction to HTML & CSS
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
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?
HTML Example
HTML Code Result in Browser
Introduction to HTML & CSS
CSS Example
No CSS With CSS
Introduction to HTML & CSS
Shaw Academy Website with CSS Shaw Academy Website without CSS
The Power of CSS
Introduction to HTML & CSS
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
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!
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!
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
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
support@shawacademy.com
www.facebook.com/shawacademy
www.twitter.com/shawacademywww.twitter.com/shawwebdev
www.shawacademy.com
Creating Web Pages
See local numbers on website
top related