Web Design Blueprints
Build websites and applications using the latest techniques in modern web development
1. Auflage
Erschienen am 13. Januar 2025
290 Seiten
978-1-78355-212-2 (ISBN)
Beschreibung
Build websites and applications using the latest techniques in modern web developmentKey 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 DescriptionThe 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
Who this book is forThis 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.
- [*] Implement multiple methodologies by creating different apps with dynamic features
- [*] This unique project-based guide will help you build your own websites efficiently
Book DescriptionThe 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
Who this book is forThis 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.
Alle Preise
Weitere Details
Weitere Ausgaben
Andere Ausgaben
Inhalt
- Cover
- Copyright
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Table of Contents
- Preface
- Chapter 1: Responsive Web Design
- Introduction to responsive web design
- Getting familiar with the basics
- Using the inspector
- Understanding the viewport meta tag
- Learning about the viewport meta tag by example
- Viewing your work on the tag
- Fixing the problem by adding the proper meta tag
- Further explanation of the viewport meta tag
- Understanding and changing the user agent string
- Using the user agent string for testing
- How to change the user agent string in Chrome
- What next?
- Using media queries for responsive design
- Some background information
- A small example
- A better example
- Adding style
- Viewing your example
- Adding complexity to your stylesheet
- Adding more media queries
- More complicated examples
- Working with responsive media
- Creating responsive images with srcset
- How things have changed
- A brand-new solution
- Enough theory, let's do something
- Layout basics
- Making the img element responsive
- Viewing your responsive image
- Creating responsive images with CSS
- Getting started coding
- Responsive style
- Above and beyond
- Calculating the responsive image size
- Adding responsive video to your site
- Working with two use cases
- Use case #1 - self-hosted video
- Use case #2 - embedded through the iframe element
- Responsive video CSS
- Modifying the layout
- Viewing the example
- Communicating with responsive typography
- A good solution for responsive typography
- Working with an example
- Create the typography's CSS
- Finished!
- Building responsive layouts
- Creating responsive padding with the box model property
- A real-world example
- Applying the box model property
- Finished!
- Going further
- Viewing your example
- Adding more complexity
- Finished! Now view your work
- Creating responsive navigation with CSS and JavaScript
- Jump into an example
- Creating the responsive CSS with media queries
- Your first version is complete
- Going further
- Adding interaction
- Finally, the interaction function
- Viewing your interactive responsive navigation
- Summary
- Chapter 2: Flat UI
- A brief history of flat design
- Flat UI color
- Sample color swatches for flat UI
- The vivid color swatch
- The retro color swatch
- The monotone color swatch
- Creating a color swatch for your project
- Creating a flat UI layout
- Adding content
- Creating a working JavaScript clock
- Adding textual content
- Let's talk about the weather, travel, and the stock market
- Flat UI typography
- Adding webfonts
- Adding flat UI elements
- Flat UI CSS cleanup
- Creating universal classes
- Fixing time
- Fixing the news and tasks elements CSS
- Adding CSS for the weather section
- Creating more universal classes
- Final cleanup of the landscape orientation
- Final cleanup of the portrait orientation
- Summary
- Chapter 3: Parallax Scrolling
- Starting off
- The HTML markup
- Color classes
- Using SVG font icons
- Getting the fonts
- That's no moon!
- OMG, it's full of stars!
- Clouds, birds, and airplanes
- The rocket
- Terra firma
- Next up, the CSS
- Styling the objects with CSS
- Styling the ground objects
- Writing the JavaScript effects
- Setting the row height
- Spreading the objects
- Spreading the clouds
- Loading the page functions
- Smoothening the scroll
- Updating elements on the scroller
- Collecting the moving elements
- Creating functions for the element types
- Setting the left positions
- Creating the rocket's movement function
- Finally, moving the earth
- Summary
- Chapter 4: Single Page Applications
- What is an SPA?
- The SPA's relevance
- Getting to work
- Getting the old files
- Getting the 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 registry tables
- Using routing registry tables to load home content
- Loading all sections in the structure
- Making #hashes
- Using #hash for routing
- Performing housekeeping
- Creating a callBack function for the API
- Using the callBack function
- Using the callBack function
- Adding links that use hashes
- Using APIs
- Summary
- Chapter 5: The Death Star Chapter
- Where to begin?
- Deleting unnecessary features
- Adding new routes
- Adding the directories
- Adding levels to JavaScript
- Editing home.html
- Dropping in the parallax game
- Fixing the broken level
- Moving the load functions to levels.js
- Fixing the namespacing in Level1.js
- Loading elements from JSON
- Using the data requests
- Parsing the AJAX
- Moving the spreadObjects function to a general pattern
- What can be done in the shared levels service
- Updating elements on the scroll
- Modifying the CSS
- Adding message objects
- Creating a clickable object
- Creating a moving object
- Editing the home JavaScript
- Adding more to make the home interesting
- Creating the other pages - credits and leaderboard
- Replicating credits for the leaderboard
- Creating the second level
- Getting SVG objects
- Creating the directory structure and routes
- Creating the new JSON for each level
- Creating the level 2 HTML
- Creating the level2 JS
- Parsing the AJAX
- Updating the elements
- Moving the elements
- Adding some CSS
- Creating the home page version
- Adding final touches
- Creating explosive final touches
- Summary
- Index
