Web Development

Web Design Blueprints

Web Design Blueprints

Language: English

Pages: 290

ISBN: 1783552115

Format: PDF / Kindle (mobi) / ePub


Key Features

  • 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

Book Description

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.

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

About the Author

Benjamin LaGrone is a web developer who lives and works in Texas. He got his start in programming at the age of 6 when he took his first computer class at the Houston Museum of Natural Science. His first program was "choose your own adventure book", written in BASIC; he has fond memories of the days when software needed you to write line numbers. Fast forward to about thirty years later: after deciding that computers are here to stay, Ben has made a career combining two of his favorite things, art and coding―creating art from code. One of his favorite projects was using the GMaps API to map pathologies to chromosomes for cancer research. Fascinated with mobile devices for a long time, Ben thinks that the responsive Web is one of the most exciting, yet long time coming, new aspects of web development. He now works in a SaaS development shop and is the mobile and responsive Web evangelist of the team. When he's not working on some Internet project, Ben spends his time building robots, tinkering with machines, drinking coffee, surfing, and teaching Kuk Sool martial arts.

Table of Contents

  1. Responsive Web Design
  2. Flat UI
  3. Parallax Scrolling
  4. Single Page Applications
  5. The Death Star Chapter

Don't Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)

Perl Graphics Programming: Creating SVG, SWF (Flash), JPEG, and PNG Files with Perl

Web Workers: Multithreaded Programs in JavaScript

Web Penetration Testing with Kali Linux (2nd Edition)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

wrapping div element to the video. Give it a video-outer-wrap class, as I have in this sample code:

Then add to the CSS attributes for video-outer-wrap, like the following code demonstrates: .video-outer-wrap { width: 50%; } Viewing the example Now, launch the file in your browser. This is a big improvement: we can control the size

document.getElementsByClassName("row")[i].offsetTop && (window.pageYOffset) < (document.getElementsByClassName("row")[i].offsetTop + (window.innerHeight/2*3))) { for (j = 0; j < document.getElementsByClassName("row")[i].getElementsByTagName("i").length; j++) { for (k = 0; k < document.getElementsByClassName("row")[i].getElementsByTagName("i")[j].classList.length; k++) { //Do some thing here } } } } } Inside the nested loop, we will use a conditional set of tests in a switch block to determine

.5 + '%'; The last operation on the orb element is to set its style bottom position. Start again with the number of rows, multiplied by the window's inner height attribute, subtracted from 100, and subtract from that the window's page Y offset, and divide by the window's inner height, and subtract 15 from it, then add the % sign as a string. See the following example: orb.style.bottom = (100 - (window.innerHeight * (document.getElementsByClassName("row").length) - window.pageYOffset) /

project set up Object and function conventions Creating utility functions Creating a services layer for AJAX Creating and using the file structure Working with the home structure Putting the content in the new file structure for the home Modifying index.html and CSS Modifying the JavaScript to use the structure Finish the home to make it work Setting up other sections Breaking out the content into directories Separating concerns and making objects Making the routing

To prevent the image from exploding all over your viewport, you can add some more complexity to the CSS. Try limiting the width of the img element to the width of the actual image. To do so, you will need to change the width attribute to a max-width value of 100%. This small change allows the image to be responsive with the viewport changes limited to the maximum size of the image. This means that if the image is really only 300px, then that's as big as it will get. This starts to make sense if

Download sample

Download