SlideShare a Scribd company logo
1 of 13
Web Dev
 101
By Andrew Pottenger
  Web Developer for LinkedIn
   http://www.linkedin.com/in/apotts15
Introduction
• Web developers create interfaces that
  organize information for users.
• Top 3 Technologies Used for UI
  o HTML / HTML5
  o CSS / CSS3
  o JavaScript
     • Frameworks Used
           jQuery
           YUI
           Prototype
           Moo tools
           Script.aculo.us
The Top 3
                         HTML
                        (Structure)




             CSS                 JavaScript
            (Styling)                 (Behavior)
HTML
               Hyper-Text Markup Language
• A markup language that
  formats the structure of a web
  page using tags.
• HTML is the basic building
  blocks of the web.
• Described with open and
  closed tags to define elements
  (e.g. Image, paragraphs,
  headers, etc.)
• Not a programming language
• Correct and incorrect way to
  format a web page based on
  web standards
• HTML5 is going to be
  considered the new standard if
  not already
CSS
                      Cascading Style Sheets
• CSS defines the appearance
  and layout of a webpage (look
  and feel)
• It tells the browser how to
  display the HTML elements
• Features include:
      Font type and size
      Text Color
      Background images
      Formatting with floats
      Padding, margins, and borders
• CSS renders differently
  depending on the browser
  (e.g. IE, Firefox, Chrome)
• Requires browser
  compatibility techniques
JavaScript
• A scripting language used to control the
  behavior of a web page
• NOT the same as JAVA;
     JAVA is to JavaScript as CAR is to Carpet
• Enhances the user experience with added
  interactivity and dynamic web pages
• Client-side language, no server
• Functions with math operators, basic
  computing, and OOP
• Frameworks and Libraries
     jQuery, YUI, Prototype, Moo tools, Script.aculo.us
• Examples include:
       Dropdowns
       Image scrollers
       Popups, lightboxes
       Form validation
       Toggling, hide / show elements
       Animations and effects
Other Technologies
• Browsers Compatibility
• Web Standards
• Programming Languages
   PHP, JSP, ASP, ASP.Net, Java
   Object Oriented Programming
• Database Knowledge
  – MySQL, SQL, Oracle
• AJAX, XML, JSON
• Design knowledge
   Photoshop
   Fireworks
   Illustrator
Questions
• Differences between HTML5 and HTML, and
  CSS and CSS3?
• What is Flash and where is it going?
• Drupal vs Wordpress vs Joomla?
• What classifies Backend coding vs Frontend?
• What is the deal with this mobile movement?
Differences between HTML5 and
       HTML, and CSS and CSS3?
• HTML5 is a new version of HTML with more
  specific tags to define elements on a page.
• There is much more in the HTML5 bucket but
  this is generally what devs may know.
• CSS3 offers new features like animations,
  transitions, rounded corners and other
  common UI features you are used to seeing.
• Before we used images, now we can use CSS3
What is Flash and where is it going?

• It’s not. Flash is dying with the new movement
  of HTML5 and CSS3.
• It will be a slow death. Flash is still the best
  way to show video and audio cross browser
  along with ads and some animation. It will be
  lingering around for some time
Drupal vs Wordpress vs Joomla?

• These are different types of open source
  projects that give you a type of website out of
  the box
• Wordpress is a (almost) complete blogging
  software anyone can use
• Joomla and Drupal are general website
  projects that provide basic, standard
  functionality of common websites
What classifies Backend coding vs
              Frontend?
• Backend or software engineers generally
  program in technologies such as Java, J2EE,
  and databases. Usually not involved with the
  user interface.
• Frontend developers are usually developing
  with the 3 main technologies, HTML, CSS, and
  JavaScript.
• Grey areas that mix both can include PHP,
  ASP.NET, Ruby, Python, C++, etc…
What is the deal with this mobile
             movement?
• With the popularity of smart phones and
  tablets, everything is moving toward mobile
• Few people are reading emails on their
  desktop anymore
• Mobilizing websites are becoming the future
  or the present and it will only continue to
  grow.

More Related Content

What's hot

Web Design & Development Courses in Pune| 3DOT Technologies
Web Design & Development Courses  in Pune| 3DOT TechnologiesWeb Design & Development Courses  in Pune| 3DOT Technologies
Web Design & Development Courses in Pune| 3DOT Technologiesabeda786
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Web Design & Development Courses in Pune |Web Development Classes in Pune | ...
Web Design & Development Courses  in Pune |Web Development Classes in Pune | ...Web Design & Development Courses  in Pune |Web Development Classes in Pune | ...
Web Design & Development Courses in Pune |Web Development Classes in Pune | ...abeda786
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Jeremy Likness
 
What Is joomla - landau Design Reviews
What Is joomla - landau Design ReviewsWhat Is joomla - landau Design Reviews
What Is joomla - landau Design Reviewsdavisporter
 
The Adobe CS4 Web Suite: From Beginning to Bedazzling!
The Adobe CS4 Web Suite: From Beginning to Bedazzling!The Adobe CS4 Web Suite: From Beginning to Bedazzling!
The Adobe CS4 Web Suite: From Beginning to Bedazzling!Staci Trekles
 
Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataW3webschool
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignSteve Guinan
 
jQuery Mobile Introduction
jQuery Mobile IntroductionjQuery Mobile Introduction
jQuery Mobile IntroductionJoris Graaumans
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and developmentgherryta
 
UVA MDST 3703 JavaScript (ii) 2012-10-04
UVA MDST 3703 JavaScript (ii) 2012-10-04UVA MDST 3703 JavaScript (ii) 2012-10-04
UVA MDST 3703 JavaScript (ii) 2012-10-04Rafael Alvarado
 
UX Edmonton - Pattern Libraries
UX Edmonton - Pattern LibrariesUX Edmonton - Pattern Libraries
UX Edmonton - Pattern LibrariesRobert Evans
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3Darren Wood
 
Green Hectares Rural Tech Factsheet – Website Design
Green Hectares Rural Tech Factsheet – Website DesignGreen Hectares Rural Tech Factsheet – Website Design
Green Hectares Rural Tech Factsheet – Website DesignGreen Hectares
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web DesignVictor M. Ortiz
 
WordPress as a CMS
WordPress as a CMSWordPress as a CMS
WordPress as a CMSColin Loretz
 
Mahara UK 13 : Let's talk about themes and usability
Mahara UK 13 : Let's talk about themes and usabilityMahara UK 13 : Let's talk about themes and usability
Mahara UK 13 : Let's talk about themes and usabilityrogeremery
 

What's hot (20)

Web Design & Development Courses in Pune| 3DOT Technologies
Web Design & Development Courses  in Pune| 3DOT TechnologiesWeb Design & Development Courses  in Pune| 3DOT Technologies
Web Design & Development Courses in Pune| 3DOT Technologies
 
Web Designing Online Training
Web Designing Online TrainingWeb Designing Online Training
Web Designing Online Training
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Web Design & Development Courses in Pune |Web Development Classes in Pune | ...
Web Design & Development Courses  in Pune |Web Development Classes in Pune | ...Web Design & Development Courses  in Pune |Web Development Classes in Pune | ...
Web Design & Development Courses in Pune |Web Development Classes in Pune | ...
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
What Is joomla - landau Design Reviews
What Is joomla - landau Design ReviewsWhat Is joomla - landau Design Reviews
What Is joomla - landau Design Reviews
 
What is Joomla?
What is Joomla?What is Joomla?
What is Joomla?
 
The Adobe CS4 Web Suite: From Beginning to Bedazzling!
The Adobe CS4 Web Suite: From Beginning to Bedazzling!The Adobe CS4 Web Suite: From Beginning to Bedazzling!
The Adobe CS4 Web Suite: From Beginning to Bedazzling!
 
Web design training , Web Design Training In Kolkata
Web design training , Web Design Training In KolkataWeb design training , Web Design Training In Kolkata
Web design training , Web Design Training In Kolkata
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
 
jQuery Mobile Introduction
jQuery Mobile IntroductionjQuery Mobile Introduction
jQuery Mobile Introduction
 
Web designing and development
Web designing and developmentWeb designing and development
Web designing and development
 
UVA MDST 3703 JavaScript (ii) 2012-10-04
UVA MDST 3703 JavaScript (ii) 2012-10-04UVA MDST 3703 JavaScript (ii) 2012-10-04
UVA MDST 3703 JavaScript (ii) 2012-10-04
 
UX Edmonton - Pattern Libraries
UX Edmonton - Pattern LibrariesUX Edmonton - Pattern Libraries
UX Edmonton - Pattern Libraries
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Green Hectares Rural Tech Factsheet – Website Design
Green Hectares Rural Tech Factsheet – Website DesignGreen Hectares Rural Tech Factsheet – Website Design
Green Hectares Rural Tech Factsheet – Website Design
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
WordPress as a CMS
WordPress as a CMSWordPress as a CMS
WordPress as a CMS
 
Mahara UK 13 : Let's talk about themes and usability
Mahara UK 13 : Let's talk about themes and usabilityMahara UK 13 : Let's talk about themes and usability
Mahara UK 13 : Let's talk about themes and usability
 

Viewers also liked (9)

กฎแห่งความมั่งคั่ง 9 ประการ
กฎแห่งความมั่งคั่ง 9 ประการกฎแห่งความมั่งคั่ง 9 ประการ
กฎแห่งความมั่งคั่ง 9 ประการ
 
Kpi
KpiKpi
Kpi
 
The ants and the grasshopper
The ants and the grasshopperThe ants and the grasshopper
The ants and the grasshopper
 
Kpi zaverecny ukol
Kpi zaverecny ukolKpi zaverecny ukol
Kpi zaverecny ukol
 
body language
body languagebody language
body language
 
โครงงาน อนุรักษ์หนองน้ำสร้าง (จริง)
โครงงาน อนุรักษ์หนองน้ำสร้าง  (จริง)โครงงาน อนุรักษ์หนองน้ำสร้าง  (จริง)
โครงงาน อนุรักษ์หนองน้ำสร้าง (จริง)
 
โครงงานเปรียบเทียบการใช้ปุ๋ยน้ำ
โครงงานเปรียบเทียบการใช้ปุ๋ยน้ำโครงงานเปรียบเทียบการใช้ปุ๋ยน้ำ
โครงงานเปรียบเทียบการใช้ปุ๋ยน้ำ
 
Дизайн в хаосе
Дизайн в хаосеДизайн в хаосе
Дизайн в хаосе
 
Final demo
Final demoFinal demo
Final demo
 

Similar to Web dev-101

Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptxNishchaiyaBayla1
 
Partha_Sr._PHP_Drupal_UI_Developer
Partha_Sr._PHP_Drupal_UI_DeveloperPartha_Sr._PHP_Drupal_UI_Developer
Partha_Sr._PHP_Drupal_UI_DeveloperPartha Sarkar
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentpuneetbatra24
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of WebSabir Haque
 
Sr front end web developer Ln11
Sr front end web developer Ln11Sr front end web developer Ln11
Sr front end web developer Ln11Aakash Desai
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--devaltsav
 
Web Development for Beginners: A Step-by-Step Guide
Web Development for Beginners: A Step-by-Step GuideWeb Development for Beginners: A Step-by-Step Guide
Web Development for Beginners: A Step-by-Step GuideBrand Diaries
 
Gettings started with Web development
Gettings started with Web developmentGettings started with Web development
Gettings started with Web developmentUjjwal Ojha
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_phpJeanho Chu
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentQurinom Solutions
 
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Les Basiques - Web  Développement HTML5, CSS3, JS et PHPLes Basiques - Web  Développement HTML5, CSS3, JS et PHP
Les Basiques - Web Développement HTML5, CSS3, JS et PHPHamdi Hmidi
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleIT Arena
 

Similar to Web dev-101 (20)

Web Development
Web DevelopmentWeb Development
Web Development
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online Training
 
Partha_Sr._PHP_Drupal_UI_Developer
Partha_Sr._PHP_Drupal_UI_DeveloperPartha_Sr._PHP_Drupal_UI_Developer
Partha_Sr._PHP_Drupal_UI_Developer
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end development
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of Web
 
Sr front end web developer Ln11
Sr front end web developer Ln11Sr front end web developer Ln11
Sr front end web developer Ln11
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--dev
 
Web Development for Beginners: A Step-by-Step Guide
Web Development for Beginners: A Step-by-Step GuideWeb Development for Beginners: A Step-by-Step Guide
Web Development for Beginners: A Step-by-Step Guide
 
Gettings started with Web development
Gettings started with Web developmentGettings started with Web development
Gettings started with Web development
 
Sai Sharan_UI_Resume
Sai Sharan_UI_ResumeSai Sharan_UI_Resume
Sai Sharan_UI_Resume
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
 
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Les Basiques - Web  Développement HTML5, CSS3, JS et PHPLes Basiques - Web  Développement HTML5, CSS3, JS et PHP
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
 
web development process WT
web development process WTweb development process WT
web development process WT
 
Wt unit 1 ppts web development process
Wt unit 1 ppts web development processWt unit 1 ppts web development process
Wt unit 1 ppts web development process
 
Web Desing.pptx
Web Desing.pptxWeb Desing.pptx
Web Desing.pptx
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 

Web dev-101

  • 1. Web Dev 101 By Andrew Pottenger Web Developer for LinkedIn http://www.linkedin.com/in/apotts15
  • 2. Introduction • Web developers create interfaces that organize information for users. • Top 3 Technologies Used for UI o HTML / HTML5 o CSS / CSS3 o JavaScript • Frameworks Used  jQuery  YUI  Prototype  Moo tools  Script.aculo.us
  • 3. The Top 3 HTML (Structure) CSS JavaScript (Styling) (Behavior)
  • 4. HTML Hyper-Text Markup Language • A markup language that formats the structure of a web page using tags. • HTML is the basic building blocks of the web. • Described with open and closed tags to define elements (e.g. Image, paragraphs, headers, etc.) • Not a programming language • Correct and incorrect way to format a web page based on web standards • HTML5 is going to be considered the new standard if not already
  • 5. CSS Cascading Style Sheets • CSS defines the appearance and layout of a webpage (look and feel) • It tells the browser how to display the HTML elements • Features include:  Font type and size  Text Color  Background images  Formatting with floats  Padding, margins, and borders • CSS renders differently depending on the browser (e.g. IE, Firefox, Chrome) • Requires browser compatibility techniques
  • 6. JavaScript • A scripting language used to control the behavior of a web page • NOT the same as JAVA;  JAVA is to JavaScript as CAR is to Carpet • Enhances the user experience with added interactivity and dynamic web pages • Client-side language, no server • Functions with math operators, basic computing, and OOP • Frameworks and Libraries  jQuery, YUI, Prototype, Moo tools, Script.aculo.us • Examples include:  Dropdowns  Image scrollers  Popups, lightboxes  Form validation  Toggling, hide / show elements  Animations and effects
  • 7. Other Technologies • Browsers Compatibility • Web Standards • Programming Languages  PHP, JSP, ASP, ASP.Net, Java  Object Oriented Programming • Database Knowledge – MySQL, SQL, Oracle • AJAX, XML, JSON • Design knowledge  Photoshop  Fireworks  Illustrator
  • 8. Questions • Differences between HTML5 and HTML, and CSS and CSS3? • What is Flash and where is it going? • Drupal vs Wordpress vs Joomla? • What classifies Backend coding vs Frontend? • What is the deal with this mobile movement?
  • 9. Differences between HTML5 and HTML, and CSS and CSS3? • HTML5 is a new version of HTML with more specific tags to define elements on a page. • There is much more in the HTML5 bucket but this is generally what devs may know. • CSS3 offers new features like animations, transitions, rounded corners and other common UI features you are used to seeing. • Before we used images, now we can use CSS3
  • 10. What is Flash and where is it going? • It’s not. Flash is dying with the new movement of HTML5 and CSS3. • It will be a slow death. Flash is still the best way to show video and audio cross browser along with ads and some animation. It will be lingering around for some time
  • 11. Drupal vs Wordpress vs Joomla? • These are different types of open source projects that give you a type of website out of the box • Wordpress is a (almost) complete blogging software anyone can use • Joomla and Drupal are general website projects that provide basic, standard functionality of common websites
  • 12. What classifies Backend coding vs Frontend? • Backend or software engineers generally program in technologies such as Java, J2EE, and databases. Usually not involved with the user interface. • Frontend developers are usually developing with the 3 main technologies, HTML, CSS, and JavaScript. • Grey areas that mix both can include PHP, ASP.NET, Ruby, Python, C++, etc…
  • 13. What is the deal with this mobile movement? • With the popularity of smart phones and tablets, everything is moving toward mobile • Few people are reading emails on their desktop anymore • Mobilizing websites are becoming the future or the present and it will only continue to grow.