Packt+ | Advance your knowledge in tech

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

Practical Web Design

You're reading from Practical Web Design Learn the fundamentals of web design with HTML5, CSS3, Bootstrap, jQuery, and Vue.js

Product type Paperback

Published in Apr 2018

Publisher Packt

ISBN-13 9781788395038

Length 368 pages

Edition 1st Edition

Languages

JavaScript

Tools

Angular

Concepts

Design

Author (1):

Philippe Hong

View More author details

Table of Contents (20) Chapters

Title Page

PacktPub.com

Contributers

Preface

1. Evolution of Web Design FREE CHAPTER

2. Web Design and its Components

3. Website-Designing Workflow

4. Responsive Versus Adaptive Design

5. Learning HTML5

6. Learning CSS3

7. Building Your Own Website

8. Making Our Website Responsive

9. Adding Interaction and Dynamic Content

10. Optimizing and Launching Our Website

11. What is Bootstrap?

12. Building a Website with Bootstrap

13. Introduction to Client-Side Rendering

14. Tools to Help Your Workflow

1. Other Books You May Enjoy

Leave a review - let other readers know what you think

Index

Chapter 2. Web Design and its Components

InChapter 1, Evolution of Web Design we looked at how web design has evolved since the first web page of Sir Tim Berners-Lee in 1990. Throughout those years, we saw new elements and styles emerging in website design. Some elements will help the user navigate through the website, some will help tell a story, but most importantly, all of them have the potential to improve the visitor's experience. In this chapter, I will help you understand each component, its usage, and why it's useful. Let's dive into it!

The following is a list of the components we'll be covering:

Grids
Call to Action
Breadcrumb
Search bar
Icons
Modal
Typography
Colors
Usability
Consistency

The rest of the chapter is locked

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $19.99/month. Cancel anytime

Authors (1)

Philippe Hong

Philippe Hong

Philippe Hong is a French award-winning designer, UI/UX, and front-end developer. He's a creative person who's passionate about making the best possible experience for people. The judge at CSSDA, he won several awards, such as two Website of the day awards, Bemyapp Games WorldCup, Dailymotion Best Mobile application, and many others. He has had the privilege to work with well-known brands and is an actively engaged designer who takes pleasure in writing and talking about design on different occasions.

See other products by Philippe Hong

Other recommended products

Related to this chapter

Learning Bootstrap 4 by Building Projects

Learning Bootstrap 4 by Building Projects

Bootstrap is the world's most popular frontend framework to build web applications. You will be using a template that will help you in building different kinds of real world websites such as a social media website, a company landing page, a media hosting website, and a profile page with ease.

Aug 2018 7h 16m

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

This book will help you gain practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel back end. You will learn the most important technical facets of developing with Angular and Laravel, and demonstrates how to put those skills into practice.

Jul 2018 14h 0m

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

This book will help you gain practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel back end. You will learn the most important technical facets of developing with Angular and Laravel, and demonstrates how to put those skills into practice.

Jul 2018 14h 0m

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

Hands-On Full Stack Web Development with Angular 6 and Laravel 5

This book will help you gain practical knowledge of building modern full-stack web apps from scratch using Angular with a Laravel back end. You will learn the most important technical facets of developing with Angular and Laravel, and demonstrates how to put those skills into practice.

Jul 2018 14h 0m

Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

Bootstrap, one of the most complete frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.

Jun 2017 11h 16m

Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

Bootstrap, one of the most complete frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.

Jun 2017 11h 16m

Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

Bootstrap, one of the most complete frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.

Jun 2017 11h 16m

Bootstrap 4 Cookbook

Bootstrap 4 Cookbook

Bootstrap, one of the most complete frameworks, is perfectly built to design elegant, powerful, and responsive interfaces for professional-level web pages. It supports responsive design by dynamically adjusting your web page layout. Bootstrap 4 is a major update with many impressive changes that greatly enhance the end results produced by Bootstrap. This cookbook is a collection of great recipes that show you how to use all the latest features of Bootstrap to build compelling UIs.

Jun 2017 11h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Learn to Create WordPress Themes by Building 5 Projects

Learn to Create WordPress Themes by Building 5 Projects

This book will help you take your first steps in the WordPress theme development process, with 5 different projects centered around creating unique and responsive WordPress themes. By the end of this highly interactive book, you will have the required mastery to develop enterprise-grade WordPress themes from scratch.

Dec 2017 15h 16m

Personalised recommendations for you

Based on your interests and search pattern

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Modern Full-Stack React Projects

Modern Full-Stack React Projects

Full-Stack React Projects is a complete guide to learning full-stack web development, understanding the creation and integration of backend systems, and advancing your career as a frontend developer.

Jun 2024 16h 52m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m

Mastering Node.js Web Development

Mastering Node.js Web Development

Explore Node.js with practical examples that will teach you how to utilize open-source packages for real-world solutions. Gain the skills to develop and deploy server-side applications that enhance your client-side projects.

Jun 2024 25h 56m