diploma in web development part i - amazon s3 · lesson 1 introduction to web development –...

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

http://www.shawacademy.com/

Members Area

Let’s look at the Members Area

Social Media

https://www.facebook.com/shawacademy https://twitter.com/shawacademy

https://www.facebook.com/shawacademy

https://twitter.com/shawacademy

Let’s Begin


Web Development refers to building, creating, and maintaining web content

It includes web design, web publishing, web programming, and database management


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 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


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



Why Should You Learn Web Development?

• The Internet is everywhere• Jobs!• Work Anywhere• Create Anything

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



What elements of a web application are contained inside a web server?

• Web Server

• Web Pages

• Backend code

• Databases


Web Server

• A computer with software for delivering web pages installed

• Contains content for a website

• You use them all the time!


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


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


• CSS - Cascading Style Sheets

• Used to style and position web page content

Web Pages


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


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


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


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


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


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!


Looking at Everything TogetherWeb Server Software

Database Engine

Web Pages

Backend Code



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



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



What is the difference between a HTML element, and a HTML tag?

HTML Example

HTML Code Result in Browser


CSS Example

No CSS With CSS


Shaw Academy Website with CSS Shaw Academy Website without CSS

The Power of 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




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

http://www.shawacademy.com/

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

[email protected]

www.facebook.com/shawacademy

www.twitter.com/shawacademywww.twitter.com/shawwebdev

www.shawacademy.com

Creating Web Pages

See local numbers on website

diploma in web development part i - amazon s3 · lesson 1 introduction to web development –...

Documents