You are previewing Web Design Blueprints.
O'Reilly logo
Web Design Blueprints

Book Description

Build websites and applications using the latest techniques in modern web development

About This Book

  • Create amazing modern day applications that run seamlessly across multiple platforms

  • Implement multiple methodologies by creating different apps with dynamic features

  • This unique project-based guide will help you build your own websites efficiently

  • Who This Book Is For

    This book is a must-have for web developers who want to stay on top of the latest trends in web app and site development. If you are a web developer who is already familiar with HTML, CSS, and functional JavaScript, and you want to learn the latest trends in web development, this is the book for you.

    What You Will Learn

  • Find out how to create responsive websites

  • Create websites using the principals of Flat design

  • Create deep-dive sites using parallax scrolling

  • Discover how to use Ajax in single-page applications

  • Create responsive navigation with CSS and JavaScript

  • Create responsive padding with the box model property

  • In Detail

    The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all.

    Each chapter features actual lines of code that you can apply right away.

    Style and Approach

    Using real-world examples, Web Design Blueprints presents practical how-to projects for site enhancements, with a light-hearted, easy-to-understand tone. This book has individual projects that cumulate until you finally build a super-project at the end, using all the skills learned

    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 code file.

    Table of Contents

    1. Web Design Blueprints
      1. Table of Contents
      2. Web Design Blueprints
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. 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. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Responsive Web Design
        1. Introduction to responsive web design
        2. Getting familiar with the basics
          1. Using the inspector
          2. Understanding the viewport meta tag
            1. Learning about the viewport meta tag by example
            2. Viewing your work on the tag
            3. Fixing the problem by adding the proper meta tag
            4. Further explanation of the viewport meta tag
          3. Understanding and changing the user agent string
            1. Using the user agent string for testing
            2. How to change the user agent string in Chrome
            3. What next?
        3. Using media queries for responsive design
          1. Some background information
          2. A small example
          3. A better example
            1. Adding style
            2. Viewing your example
            3. Adding complexity to your stylesheet
            4. Adding more media queries
            5. More complicated examples
        4. Working with responsive media
          1. Creating responsive images with srcset
            1. How things have changed
            2. A brand-new solution
            3. Enough theory, let's do something
            4. Layout basics
            5. Making the img element responsive
            6. Viewing your responsive image
          2. Creating responsive images with CSS
            1. Getting started coding
            2. Responsive style
            3. Above and beyond
          3. Calculating the responsive image size
          4. Adding responsive video to your site
            1. Working with two use cases
            2. Use case #1 – self-hosted video
            3. Use case #2 – embedded through the iframe element
            4. Responsive video CSS
            5. Modifying the layout
            6. Viewing the example
          5. Communicating with responsive typography
            1. A good solution for responsive typography
            2. Working with an example
            3. Create the typography's CSS
            4. Finished!
        5. Building responsive layouts
          1. Creating responsive padding with the box model property
            1. A real-world example
            2. Applying the box model property
            3. Finished!
            4. Going further
            5. Viewing your example
            6. Adding more complexity
            7. Finished! Now view your work
          2. Creating responsive navigation with CSS and JavaScript
            1. Jump into an example
            2. Creating the responsive CSS with media queries
            3. Your first version is complete
            4. Going further
            5. Adding interaction
            6. Finally, the interaction function
            7. Viewing your interactive responsive navigation
        6. Summary
      9. 2. Flat UI
        1. A brief history of flat design
        2. Flat UI color
          1. Sample color swatches for flat UI
            1. The vivid color swatch
            2. The retro color swatch
            3. The monotone color swatch
          2. Creating a color swatch for your project
        3. Creating a flat UI layout
          1. Adding content
          2. Creating a working JavaScript clock
          3. Adding textual content
          4. Let's talk about the weather, travel, and the stock market
          5. Flat UI typography
          6. Adding webfonts
          7. Adding flat UI elements
          8. Flat UI CSS cleanup
          9. Creating universal classes
          10. Fixing time
          11. Fixing the news and tasks elements CSS
          12. Adding CSS for the weather section
          13. Creating more universal classes
          14. Final cleanup of the landscape orientation
          15. Final cleanup of the portrait orientation
        4. Summary
      10. 3. Parallax Scrolling
        1. Starting off
          1. The HTML markup
        2. Color classes
        3. Using SVG font icons
        4. Getting the fonts
        5. That's no moon!
        6. OMG, it's full of stars!
        7. Clouds, birds, and airplanes
        8. The rocket
        9. Terra firma
        10. Next up, the CSS
        11. Styling the objects with CSS
        12. Styling the ground objects
        13. Writing the JavaScript effects
        14. Setting the row height
        15. Spreading the objects
        16. Spreading the clouds
        17. Loading the page functions
        18. Smoothening the scroll
        19. Updating elements on the scroller
        20. Collecting the moving elements
        21. Creating functions for the element types
        22. Setting the left positions
        23. Creating the rocket's movement function
        24. Finally, moving the earth
        25. Summary
      11. 4. Single Page Applications
        1. What is an SPA?
          1. The SPA's relevance
        2. Getting to work
        3. Getting the old files
          1. Getting the project set up
        4. Object and function conventions
        5. Creating utility functions
          1. Creating a services layer for AJAX
          2. Creating and using the file structure
        6. Working with the home structure
          1. Putting the content in the new file structure for the home
          2. Modifying index.html and CSS
          3. Modifying the JavaScript to use the structure
          4. Finish the home to make it work
        7. Setting up other sections
          1. Breaking out the content into directories
          2. Separating concerns and making objects
          3. Making the routing registry tables
          4. Using routing registry tables to load home content
          5. Loading all sections in the structure
          6. Making #hashes
          7. Using #hash for routing
        8. Performing housekeeping
        9. Creating a callBack function for the API
          1. Using the callBack function
          2. Using the callBack function
          3. Adding links that use hashes
          4. Using APIs
        10. Summary
      12. 5. The Death Star Chapter
        1. Where to begin?
          1. Deleting unnecessary features
          2. Adding new routes
          3. Adding the directories
          4. Adding levels to JavaScript
          5. Editing home.html
        2. Dropping in the parallax game
          1. Fixing the broken level
          2. Moving the load functions to levels.js
          3. Fixing the namespacing in Level1.js
        3. Loading elements from JSON
          1. Using the data requests
          2. Parsing the AJAX
          3. Moving the spreadObjects function to a general pattern
        4. What can be done in the shared levels service
          1. Updating elements on the scroll
          2. Modifying the CSS
          3. Adding message objects
          4. Creating a clickable object
          5. Creating a moving object
        5. Editing the home JavaScript
          1. Adding more to make the home interesting
        6. Creating the other pages – credits and leaderboard
          1. Replicating credits for the leaderboard
        7. Creating the second level
          1. Getting SVG objects
          2. Creating the directory structure and routes
          3. Creating the new JSON for each level
          4. Creating the level 2 HTML
          5. Creating the level2 JS
          6. Parsing the AJAX
          7. Updating the elements
          8. Moving the elements
          9. Adding some CSS
          10. Creating the home page version
          11. Adding final touches
          12. Creating explosive final touches
        8. Summary
      13. Index