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 Lesson 1 About us Course Agenda Member Area & Community Course Engagement What is Web Development? Types of Content & Components of Web Apps Introduction to HTML & CSS Summary Q & A

3 About Us 4+ Years / 2012 Largest LIVE Educator on the Planet 350+ full time employees Teach in multiple languages EGBET

4 The Truth is Achieving Results Takes Hard Work And Most Are Not Willing To Do It Foundation = What is Attend LIVE = Learn

5 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

6 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

7 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

8 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

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

10 Member Area Let s look at the Member Area

11 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

12 Final Assignment 100 multiple choice questions 2 hours Pass-mark: 55%+ 19 examination fee Includes softcopy diploma

13 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

14 Social Media

15 Social Media Question of the Day! Name 3 Components of a Web Application Share your answer on Twitter using #shawwebdev

16 Social Media Share your answer on Twitter

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

18 Let s Begin Go!

19 What is Web Development? Web Development

20 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

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

22 What is Web Development? What is a Web Page / Website? Web Page document written in HTML Web Site Collection of web pages Access through the internet via web browser

23 What is Web Development? Design vs. Development 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

24 What is Web Development? Website vs. Web Application Website Static Informational, brochure style content Web Application Dynamic Dependant on User Interaction Generally the same across users Changes based on User s Data

25 What is Web Development? Why Should You Learn Web Development? The Internet is everywhere Jobs! Work Anywhere Create Anything

26 Components of a Web Application Components of a Web Application

27 Components of a Web Application Components of a Web Application are modules that join together to make up the whole. Includes a web server, web pages, backend code, and databases

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

29 Components of a Web Application Web Server Software Web Pages

30 Components of a Web Application Back End Code Database Software

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

32 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

33 Components of a Web Application

34 Components of a Web Application

35 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

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

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

38 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

39 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

40

41 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

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

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

44 Introduction to HTML & CSS Introduction to HTML & CSS

45 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

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

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

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

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

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

51 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

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

53 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

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