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
No detailed description available for "Web Design Blueprints".
Alle Preise
Weitere Details
Weitere 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
