You are previewing Practical Web Development.
O'Reilly logo
Practical Web Development

Book Description

Learn CSS, JavaScript, PHP, and more with this vital guide to modern web development

In Detail

Web development has grown to become vital in shaping how humans interact, work, learn, and consume. Practical Web Development provides you with a roadmap of web development today, giving you the tools you need and the guidance to keep you creative and productive in a world of disruption and innovation.

Beginning with the structure of the Web and the principles of building basic websites with HTML, you will learn about CSS, JavaScript, and PHP, before taking a closer look at some of the leading technologies used to build the modern Web. You will integrate jQuery, Ajax, and JSON into your projects before moving on to the latest tools and techniques in responsive web design, including Zurb Foundation or Bootstrap, to help you meet the challenges of developing for multiple devices, and explore how Node.js offers a powerful solution to server-side application development. This book is for anyone that wants to get to grips with the broader picture of web development today.

What You Will Learn

  • Find out how HTML lays the foundation of web development

  • Learn the fundamentals of web design using CSS

  • Harness JavaScript to bring websites to life

  • Use PHP and MySQL to dynamically generate HTML on the server

  • Learn how to write compact code with jQuery

  • Create efficient single page applications with Ajax

  • Discover JSON for a powerful data exchange between client and server

  • Design Mobile first, responsive pages that look great on mobiles, tablets, and desktops

  • Create and migrate powerful and scalable web applications with Node.js

  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Practical Web Development
      1. Table of Contents
      2. Practical Web Development
      3. Credits
      4. About the Author
      5. Acknowledgments
      6. About the Reviewers
      7. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. The World Wide Web
        1. World Wide Web
        2. The Internet
        3. HTTP and HTML
          1. HTML
          2. HTTP
          3. The World Wide Web Consortium (W3C)
        4. Mosaic
          1. The first browser
          2. Netscape
          3. Internet Explorer
        5. The explosion of the Web
          1. Amazon.com and e-commerce
          2. Google and Yahoo!
          3. Social networking
        6. Web development
          1. HTML
          2. HTML editors and other tools
          3. Browsers and web servers
          4. CSS
          5. JavaScript
          6. PHP
            1. Data
        7. Summary
      10. 2. HTML
        1. HTML versions
        2. Semantic and presentational HTML
        3. The structure and syntax of an HTML document
          1. Doctype
            1. <html>
              1. <head>
              2. <body>
          2. Syntax for tags or elements inside the document
          3. HTML comments
        4. Links
          1. The <a> tag and attributes
          2. The href attribute
          3. The <a> name attribute
          4. The <a> target attribute
        5. Classic document elements
          1. <h1>, <h2>, <h3>, … <h6> – headings
          2. <p> – paragraph
          3. <span> – span
        6. Lists
        7. Images
          1. <img> element and attributes
          2. Image width and height
        8. Input forms
          1. Form elements
            1. Form attributes
            2. The label attribute
            3. Input attributes
            4. The name attribute
          2. The value attribute
            1. The checked attribute
            2. The readonly attribute
        9. Textarea
        10. Drop-down lists
          1. The disabled attribute
          2. The selected attribute
        11. Tables
          1. Table elements
            1. <table>
            2. <thead> <tbody>
            3. <tr>
            4. <th> <td>
          2. Table attributes
            1. colspan (td)
            2. rowspan (td)
        12. <div>, the "uebertag"
        13. HTML entities
        14. HTML5-specific tags
        15. Summary
      11. 3. CSS
        1. Adding styles to our documents
          1. External style sheets
          2. Internal CSS
          3. Inline styles
        2. The Document Object Model (DOM)
        3. Selectors
          1. Multiple classes
          2. Descendants
          3. Selecting children or siblings
        4. Specificity
        5. Block elements and inline elements
        6. Colors
        7. Fonts
          1. So what are fonts?
          2. Font families
            1. Serif fonts
            2. Sans-serif fonts
            3. Monospace fonts
          3. The font-family property
          4. Font-weight and font-style
          5. Font-size
          6. Line-height
        8. The box model
          1. Padding
          2. Border
          3. Margin
          4. Collapsing margins
        9. Positioning
          1. Float
          2. position:relative
          3. position:absolute
        10. Styling lists
          1. list-style-type
          2. list-style-image
          3. list-style-position
        11. Styling anchors – pseudo-classes
          1. Firebug
        12. Summary
      12. 4. JavaScript
        1. Programming 101
          1. Compiled and interpreted languages compared
          2. JavaScript is not the same as Java
            1. Java
            2. JavaScript
        2. Our first JavaScript program
          1. Variables
            1. Variable declarations
              1. Values of variables
              2. Numbers
              3. Strings
              4. Converting strings to numbers
          2. Expressions and operators
            1. Arithmetic operators
              1. Addition(+)
              2. Subtraction (-)
              3. Multiplication (*)
              4. Division (/)
              5. Modulo (%)
              6. Relational operators
          3. Control flow
            1. if
            2. while
            3. switch
          4. Functions
            1. Scope of variables
            2. Objects
              1. JSON
        3. DOM objects, properties, methods, and events
          1. The Window object
          2. The Document object
          3. write and writeln methods
          4. Nodes and DOM traversing
          5. Events
        4. Summary
      13. 5. PHP
        1. Introduction to PHP
          1. Our first real PHP program
        2. PHP and web hosting
          1. Web hosting 101
          2. Domain name
          3. Web hosting companies
          4. Server-side setup
          5. Additional server-side services
          6. PHP development environment
        3. PHP as a web development language
          1. Variables, values, operators, and expressions
            1. Scope of variables
              1. Local variables
              2. Global variables
              3. Static variables
              4. String operators
              5. To double quote or to single quote, that is the question
          2. Control flow
          3. Functions
          4. String functions
            1. strpos()
            2. strlen()
            3. substr()
          5. Date functions
            1. time()
            2. date()
            3. strtotime()
          6. Arrays
            1. Numeric arrays or indexed arrays
            2. Associative arrays
            3. Cool control statements for associative arrays
          7. Sending data back to the server – forms
            1. POST or GET, what should we get?
              1. $_POST and $_GET arrays
          8. Files
            1. include, require, and require_once
            2. Regular files
          9. File functions or f-functions
            1. fopen
            2. file_exists(), is_file(), and is_dir()
            3. fread and fwrite
            4. One line at a time – fgets()
            5. The printf family
            6. Syntax of printf family of functions
        4. Summary
      14. 6. PHP and MySQL
        1. Databases
          1. Relational databases
        2. SQL
        3. MySQL
        4. phpMyAdmin
          1. Creating databases
          2. Creating and managing users
          3. Creating and managing database tables
        5. MySQLi in PHP
          1. Connecting to the database
          2. Our first SQL query, really!
          3. Writing a MySQL query in PHP
          4. Fetching the result
          5. Obtaining data from more than one table
        6. Adding data
          1. Updating data
        7. Summary
      15. 7. jQuery
        1. Obtaining the jQuery library
        2. Where to place the jQuery library on your page?
        3. jQuery UI and jQuery Mobile
        4. Using jQuery selectors and methods
          1. html()
          2. text()
          3. attr()
          4. .val()
          5. show() and hide()
          6. .find()
          7. .parent()
          8. .next()
          9. .css()
        5. jQuery documentation
        6. Event handlers and jQuery
          1. preventDefault()
          2. $(this)
          3. updateNewsContent()
        7. Summary
      16. 8. Ajax
        1. XMLHttpRequest
        2. Ajax and jQuery
          1. jQuery Ajax methods
            1. $.load() method
            2. $.post()
            3. $.ajax()
        3. Summary
      17. 9. The History API – Not Forgetting Where We Are
        1. The problem we are trying to solve
        2. The self-service restaurant
        3. HTML5 History API and the history object
          1. pushState()
            1. popstate event
            2. popstate and different browsers
        4. The History plugin
        5. Bookmarking
        6. Summary
      18. 10. XML and JSON
        1. XML
          1. XML format
          2. Displaying XML files
          3. XML editors
          4. XML Schema
          5. SimpleXML
            1. The XML file
            2. The XML Schema file
            3. The CSS file
            4. The PHP file
            5. Creating XML files with SimpleXML
            6. Generating our HTML on the client side
          6. XSLT
        2. JSON
          1. JSON syntax
            1. JSON values
            2. JSON objects
            3. JSON strings
            4. JSON arrays
            5. JSON numbers
          2. JSON and PHP
          3. JSON with Ajax and jQuery
          4. Two useful JSON methods
        3. Summary
      19. 11. MongoDB
        1. Relational database management systems
        2. NoSQL databases
        3. MongoDB
          1. Installing MongoDB
          2. The MongoDB shell
            1. Creating databases, collections, and documents
              1. _id and ObjectIds
              2. Loading scripts
              3. Removing documents
              4. Updating documents
              5. MongoDB data types
              6. Basic data types
              7. Dates
              8. Embedded documents
            2. One more example
          3. MongoDB and PHP
            1. Getting our gallery data
            2. CRUD operations with MongoDB and PHP
              1. Insert documents
              2. Update documents
              3. Queries with conditions
              4. MongoDB cursor object
        4. Summary
      20. 12. Mobile First, Responsive Design with Progressive Enhancement
        1. Responsive design
          1. Déjà vu
          2. Media queries
            1. Using the media attribute
          3. Do more with less
          4. Mobile first
            1. Why mobile first?
              1. We have come a long way
              2. Mobile devices have newer capabilities
              3. Mobile devices are not only used while on the road
              4. Content first, navigation next
              5. Small means big
              6. Mobile input
            2. Mobile first recap
        2. Progressive enhancement
          1. EnhanceJS
            1. enhance.js
            2. loadStyles and loadScripts
            3. enhanced and FOUC
          2. Modernizr
            1. The Modernizr object
            2. Polyfills and Modernizr
            3. yepnope.js or Modernizr.load
        3. Summary
      21. 13. Foundation – A Responsive CSS/JavaScript Framework
        1. Our responsive toolkit – Foundation
        2. Foundation components
        3. The grid system
          1. Class end
          2. Visibility classes
          3. The block grid system
          4. Useful UI elements
            1. Thumbnails – for simple galleries
            2. Reveal modals – your better pop-up
            3. Dropdowns
            4. Example – a simple photo gallery
            5. Accordions
            6. Awesome Font awesome
            7. Equalizer – the hardest thing to do with two <div>s made easy
        4. Navigation
          1. Top bar – not just your regular menu bar
            1. Adding more magic
            2. Yet more magic – off-canvas, the coolest thing
        5. Summary
      22. 14. Node.js
        1. Node.js
        2. Installing node.js
          1. npm
          2. node
            1. Adding HTML
            2. Serving up static content
            3. A tale of two (JavaScript) cities
          3. node.js and MongoDB
            1. Déjà vu … once more
        3. Express
          1. Installing Express
          2. Our first Express app
          3. An example with middleware
        4. Templating and handlebars.js
          1. Creating a layout
        5. Our last Hello, World example
        6. Summary
      23. A. Bootstrap – An Alternative to Foundation
        1. Bootstrap components
        2. The Bootstrap grid system
          1. Visibility classes
          2. Buttons
          3. Other UI elements
            1. Thumbnails
            2. Dropdowns
            3. Modal – the Bootstrap popup
          4. Combining dropdowns and modals
            1. Collapse – an accordion for Bootstrap
        3. Navigation
        4. Summary
      24. Index