Practical Web Design

A step by step guide for beginners to create interactive and dynamic websites from scratch.
Preview in Mapt

Practical Web Design

Philippe Hong
New Release!

A step by step guide for beginners to create interactive and dynamic websites from scratch.
Mapt Subscription
FREE
$29.99/m after trial
eBook
$22.40
RRP $31.99
Save 29%
Print + eBook
$39.99
RRP $39.99
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$22.40
$39.99
$29.99 p/m after trial
RRP $31.99
RRP $39.99
Subscription
eBook
Print + eBook
Start 14 Day Trial

Frequently bought together


Practical Web Design Book Cover
Practical Web Design
$ 31.99
$ 22.40
101 UX Principles Book Cover
101 UX Principles
$ 31.99
$ 22.40
Buy 2 for $35.00
Save $28.98
Add to Cart

Book Details

ISBN 139781788395038
Paperback368 pages

Book Description

Web design is the process of creating websites. It encompasses several different aspects, including webpage layout, content production, and graphic design. This book offers you everything you need to know to build your websites.

The book starts off by explaining the importance of web design and the basic design components used in website development. It'll show you insider tips to work quickly and efficiently with web technologies such as HTML5, CSS3, and JavaScript, concluding with a project on creating a static site with good layout. Once you've got that locked down, we'll get our hands dirty by diving straight into learning JavaScript and JQuery, ending with a project on creating dynamic content for your website. After getting our basic website up and running with the dynamic functionalities you'll move on to building your own responsive websites using more advanced techniques such as Bootstrap. Later you will learn smart ways to add dynamic content, and modern UI techniques such as Adaptive UI and Material Design. This will help you understand important concepts such as server-side rendering and UI components. Finally we take a look at various developer tools to ease your web development process.

Table of Contents

Chapter 1: Evolution of Web Design
The first ever website
Table-based layouts
Introduction of Flash
CSS – the savior
Web 2.0
The rise of the mobile
Responsive web design
Flat design
What's next?
Summary
Chapter 2: Web Design and its Components
Grids
Call to Action
Breadcrumb
The search bar
Icons
Modal
Typography
Colors
Usability
Consistency
Summary
Chapter 3: Website-Designing Workflow
Our situation
Goal identification
Defining the scope
Creating wireframes
Designing
Implementing, testing, and launching
Summary
Chapter 4: Responsive Versus Adaptive Design
Responsive design
Adaptive design
So which one is the best?
The takeaway
Summary
Chapter 5: Learning HTML5
Our main tool
What is HTML?
HTML structure
HTML elements
Summary
Chapter 6: Learning CSS3
The different ways to use CSS
CSS formatting
Parent and child elements
Classes and IDs
CSS box model  
CSS layout and dividers
Summary
Chapter 7: Building Your Own Website
Our design
Installing HTML Boilerplate
Creating our web page
The header
Adding the hero section
Blog section
Creating the ABOUT US section
Adding the Partner section
Adding the footer section
Summary
Chapter 8: Making Our Website Responsive
What are media queries? 
Designing the menu
What is jQuery? 
Making the hero section responsive
Making the Blog section responsive
Making the ABOUT US section responsive
Making the footer section responsive
Summary
Chapter 9: Adding Interaction and Dynamic Content
CSS pseudo-classes
Sticky navigation 
Adding a dynamic Instagram feed
Summary
Chapter 10: Optimizing and Launching Our Website
Creating a favicon
Site performance optimization
Basic SEO improvement
Launching our website
Google analytics
Summary
Chapter 11: What is Bootstrap?
What is Bootstrap?
Summary
Chapter 12: Building a Website with Bootstrap
Installing Bootstrap 
Bootstrap navbar 
Styling the Blog section
Styling the about section 
Styling the partner section
Styling the footer
Summary
Chapter 13: Introduction to Client-Side Rendering
What is server-side rendering?
What is client-side rendering?
Pros and cons of server and client-side rendering
Introducing to VueJS
Creating a weather application in VueJS
Summary
Chapter 14: Tools to Help Your Workflow
HTML Boilerplate
Lorem Ipsum
CSS preprocessor – LESS
CSS preprocessor – SCSS
ColorZilla
Foundation
Fontastic
webflow
Modernizr
CSS3 Generator
git
CodeKit
Animate.css
TinyPNG
Unsplash
Summary

What You Will Learn

  • Understand the importance of web design and the basic design components
  • Learn HTML5 and CSS3
  • Difference between adaptive and responsive web design
  • Learn how to create your first website
  • Add interaction and dynamic content to your website with JavaScript and JQuery
  • Implement Bootstrap Framework in your project 
  • Get familiar with server-side rendering

Authors

Table of Contents

Chapter 1: Evolution of Web Design
The first ever website
Table-based layouts
Introduction of Flash
CSS – the savior
Web 2.0
The rise of the mobile
Responsive web design
Flat design
What's next?
Summary
Chapter 2: Web Design and its Components
Grids
Call to Action
Breadcrumb
The search bar
Icons
Modal
Typography
Colors
Usability
Consistency
Summary
Chapter 3: Website-Designing Workflow
Our situation
Goal identification
Defining the scope
Creating wireframes
Designing
Implementing, testing, and launching
Summary
Chapter 4: Responsive Versus Adaptive Design
Responsive design
Adaptive design
So which one is the best?
The takeaway
Summary
Chapter 5: Learning HTML5
Our main tool
What is HTML?
HTML structure
HTML elements
Summary
Chapter 6: Learning CSS3
The different ways to use CSS
CSS formatting
Parent and child elements
Classes and IDs
CSS box model  
CSS layout and dividers
Summary
Chapter 7: Building Your Own Website
Our design
Installing HTML Boilerplate
Creating our web page
The header
Adding the hero section
Blog section
Creating the ABOUT US section
Adding the Partner section
Adding the footer section
Summary
Chapter 8: Making Our Website Responsive
What are media queries? 
Designing the menu
What is jQuery? 
Making the hero section responsive
Making the Blog section responsive
Making the ABOUT US section responsive
Making the footer section responsive
Summary
Chapter 9: Adding Interaction and Dynamic Content
CSS pseudo-classes
Sticky navigation 
Adding a dynamic Instagram feed
Summary
Chapter 10: Optimizing and Launching Our Website
Creating a favicon
Site performance optimization
Basic SEO improvement
Launching our website
Google analytics
Summary
Chapter 11: What is Bootstrap?
What is Bootstrap?
Summary
Chapter 12: Building a Website with Bootstrap
Installing Bootstrap 
Bootstrap navbar 
Styling the Blog section
Styling the about section 
Styling the partner section
Styling the footer
Summary
Chapter 13: Introduction to Client-Side Rendering
What is server-side rendering?
What is client-side rendering?
Pros and cons of server and client-side rendering
Introducing to VueJS
Creating a weather application in VueJS
Summary
Chapter 14: Tools to Help Your Workflow
HTML Boilerplate
Lorem Ipsum
CSS preprocessor – LESS
CSS preprocessor – SCSS
ColorZilla
Foundation
Fontastic
webflow
Modernizr
CSS3 Generator
git
CodeKit
Animate.css
TinyPNG
Unsplash
Summary

Book Details

ISBN 139781788395038
Paperback368 pages
Read More

Read More Reviews

Recommended for You

101 UX Principles Book Cover
101 UX Principles
$ 31.99
$ 22.40
Node.js Web Development - Fourth Edition Book Cover
Node.js Web Development - Fourth Edition
$ 35.99
$ 25.20
Node.js Microservices - Second Edition Book Cover
Node.js Microservices - Second Edition
$ 35.99
$ 25.20
RESTful Web API Design with Node.js 10 - Third Edition Book Cover
RESTful Web API Design with Node.js 10 - Third Edition
$ 23.99
$ 16.80
Spring Design Patterns and Best Practices [Video] Book Cover
Spring Design Patterns and Best Practices [Video]
$ 124.99
$ 106.25
Hands-On Web Development with Vue.js [Video] Book Cover
Hands-On Web Development with Vue.js [Video]
$ 124.99
$ 106.25