Diploma in Web Development Part I

Transcription

1 Diploma in Web Development Part I Lesson 1 The Web Development Full Stack Presented by: Julian Quirke Web Development Educator

2 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? login top right

3 About Us Julian Quirke BA Mathematics 4+ Years / 2012 Largest LIVE Educator on the Planet Offices Across the World

4 Lesson 1 Introducing Shaw Academy Systems What is Web Development? Types of Content & Components of Web Apps Course Agenda Introduction to HTML & CSS Summary Q & A

5 Competition Time Live is Best We reward our most diligent students Shaw Academy Lifetime Membership Prize - draw during lesson 6 Attend 80%+ of the lessons live

6 COURSE TOOL KIT INCLUDED: Exclusive Starter Pack Webinar Slides for every lesson Summary Notes for every lesson Bonus Videos Enhance your learning experience! ONLY 19.99

7 Final Assignment 100 multiple choice questions 2 hours Pass-mark: 55% examination fee Includes ediploma

8 Congratulations A journey of a thousand miles begins with a single step - Lao Tzu You have all taken your first step We are with you every step of the way

9

10 What is Web Development? Web Development

11 What is Web Development? Web Development refers to building, creating, and maintaining web content. This includes a wide array of professional fields which focus on individual components of the web development full stack Professions include web design, web publishing, web programming, and database management

12 What is Web Development?

13 What is Web Development?

14 What is Web Development? Web Page Document written in HTML Web Site Collection of web pages Access through the internet via web browser

15 What is Web Development? The Creators of a Website Web Designer Look and feel of the website Colours, fonts, layout Web Developer Functionality of the website Programming focused Menus and navigation Design background Create Databases Servers and Hosting

16 What is Web Development? Types of Content Website Static Informational, brochure style content Web Application Dynamic Dependant on User Interaction Generally the same across users Changes based on User s Data

17 What is Web Development? Why should you learn Web Development?

18 What is Web Development? Why should you learn Web Development? The Internet is everywhere Jobs! Work Anywhere Create Anything

19 Components of a Web Application Components of a Web Application

20 Components of a Web Application Components of a Web Application are modules that work together to produce a fully working dynamic web application Includes a web server, web pages, backend code, and databases

21 Components of a Web Application What elements of a web application are contained inside a web server?

22 Components of a Web Application Web Server & Server Software Web Pages

23 Components of a Web Application Back End Code Database Software

24 Components of a Web Application The Full Stack Web Server Software Web Pages Backend Code Database Engine

25 Components of a Web Application Some Terminology Front-End Everything sent to the client s browser HTML, CSS, & Javascript Back-End Full Stack End Everything that happens on the server Backend Code, Databases, Data Processing Everything on both the Front- and Back-

26 Components of a Web Application What is a Web Server? Computer with software installed to deliver web pages Contains content of a website You are already using them!

27 Components of a Web Application User enters the URL for a website in their browser A request for that website is sent to the web server Web server at the Facebook data center The web server finds the content on its hard disk and sends it to the web browser

28 Components of a Web Application

29 Components of a Web Application

30 Components of a Web Application Back-End Code Validate, process, & manipulate data coming and going from the web server Static Websites don t generally have back-end code

31 Components of a Web Application Login Form Password: Password is sent to the server User is either sent the page they wanted or an error if the password is wrong Code on the web server checks the list of users and passwords to find a match

32

33 Components of a Web Application Databases Behind most of the Information Systems we use Everyday Collection of information that is organized Easily accessed, managed, and updated

34 Components of a Web Application Web Pages: HTML HyperText Markup Language Coding language used to create web pages Tags define enclosed content <html> HTML5 is the current version

35 Components of a Web Application Web Pages: CSS Cascading Style Sheets Styles Website Content Position Website Content CSS3 is the current version

36 Course Agenda The Web Development Full Stack Course Overview Introduction to Web Application Technologies Introduction to HTML & CSS HTML & CSS: Creating Web Pages Text Editors HTML Fundamentals CSS Fundamentals

37 Course Agenda Javascript Fundamentals Getting Started with Javascript Variables & Datatypes Functions Setting Up a Web Server What is a Server Web Hosting Services Installing a Local Server

38 Course Agenda Programming Fundamentals Conditional Logic Arrays Loops PHP & Back-End Languages IMPORTANT Server-Side Languages: What is PHP? PHP Fundamentals Control Systems in PHP

39 Course Agenda SQL & Databases IMPORTANT Database Overview SQL Databases with phpmyadmin Putting It All Together IMPORTANT Build a Dynamic Web Application Using All Technologies Learned So Far

40 Introduction to HTML & CSS Introduction to HTML & CSS

41 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

42 Introduction to HTML & CSS CSS (Cascading Style Sheets) describes how HTML elements are to be displayed on the screen

43 Introduction to HTML & CSS What is the difference between a HTML element and a HTML tag?

44 Introduction to HTML & CSS HTML Example HTML Code Result in Browser

45 Introduction to HTML & CSS CSS Example No CSS With CSS

46 Introduction to HTML & CSS The Power of CSS Shaw Academy Website with CSS Shaw Academy Website without CSS

47 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

48 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 hoibre o 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!

49 As we strive for continuous improvement; after the lesson we will ask you to rate the lesson on a scale of 1 (terrible) to 5 (great). Student Feedback

50 Social Media

51 Our Web Development YouTube Channel

52 Next Lesson The next session is HTML & CSS: 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 and then the Top Right Corner Members Area

53 Members Area Let s look at the Member Area

54 Q&A Next Lesson is Creating Web Pages 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 support@shawacademy.com See local numbers on website