Book Image

Practical Web Design

By : Philippe Hong
Book Image

Practical Web Design

By: Philippe Hong

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Practical Web Design
Philippe Hong
Apr, 2018 | 368 pages
Small book image
Learning Bootstrap 4 by Building Projects
Eduonix Learning Solutions
Aug, 2018 | 218 pages
Small book image
Mastering Bootstrap 4.
Benjamin Jakobus
Feb, 2018 | 354 pages
Small book image
Bootstrap 4 Cookbook
Ajdin Imsirovic
Jun, 2017 | 338 pages
Table of Contents (20 chapters)
Title Page
Title Page
PacktPub.com
PacktPub.com
Contributers
Contributers
Preface
Preface
Free Chapter
1
Evolution of Web Design
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
2
Web Design and its Components
Web Design and its Components
Grids
Call to Action
Breadcrumb
The search bar
Icons
Modal
Typography
Colors
Usability
Consistency
Summary
3
Website-Designing Workflow
Website-Designing Workflow
Our situation
Goal identification
Defining the scope
Creating wireframes
Designing
Implementing, testing, and launching
Summary
4
Responsive Versus Adaptive Design
Responsive Versus Adaptive Design
Responsive design
Adaptive design
So which one is the best?
The takeaway
Summary
5
Learning HTML5
Learning HTML5
Our main tool
What is HTML?
HTML structure
HTML elements
Summary
6
Learning CSS3
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
7
Building Your Own Website
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
8
Making Our Website Responsive
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
9
Adding Interaction and Dynamic Content
Adding Interaction and Dynamic Content
CSS pseudo-classes
Sticky navigation 
Adding a dynamic Instagram feed
Summary
10
Optimizing and Launching Our Website
Optimizing and Launching Our Website
Creating a favicon
Site performance optimization
Basic SEO improvement
Launching our website
Google analytics
Summary
11
What is Bootstrap?
What is Bootstrap?
What is Bootstrap?
Summary
12
Building a Website with Bootstrap
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
13
Introduction to Client-Side Rendering
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
14
Tools to Help Your Workflow
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
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think
Index
Index

Web 2.0

The early 2000s saw the rise of JavaScript. This is when things really started to move towards the web we know today. JavaScript was the first means of adding intelligence to the web. Designers were able to add interaction, complex navigation, and multimedia applications to their design.

While the very beginning of the web seemed to focus mainly on design and aesthetics, it soon, however, became user-centered with usability as the main focus. Designers were also more aware of color distribution, placements, attention to typography, and the usage of icons instead of text links. At last, the evolution of Web 2.0 also saw the growth of SEO, as content driving. These techniques, such as keyword optimization, tagging, and inbound and outbound links, are still being used now. The web industry really saw the importance of SEO, and this became the main focus of web design during this time.

Here are some examples of websites:

We can see the difference in terms of the design. The layout and content are more structured. With MySpace website, developers started to create applications for people to interact with:

Previous Section
End of Section 6
Next Section