Practical Web Design电子书

Title Page

Copyright and Credits

Practical Web Design

PacktPub.com

Why subscribe?

PacktPub.com

Contributers

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

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

Web Design and its Components

Grids

The cons

Call to Action

Making it obvious

Using contrasting color

Compelling copy

Placement

Breadcrumb

The search bar

The submit button

Making it noticeable

Placing the search bar correctly

Icons

Describing in a nutshell

Drawing attention of the users

Directional

Modal

Typography

Choosing a font that connects your brand

Serif fonts

Sans-serif

Casual scripts

Don't use too much typeface

Colors

What colors mean

Usability

Simplicity

Navigability

Accessibility

Consistency

So, how can we be consistent?

Design

Content

Interactions

Summary

Website-Designing Workflow

Our situation

Goal identification

What is the purpose of the website?

Who is the website for?

Is this useful for our audience?

What do they expect to find or do there?

Does the website need to follow a brand or have its own brand identity?

Are there any competitors? If there are, how is the website different than others?

Defining the scope

Creating wireframes

Designing

Get inspiration

Improve

Invent

Implementing, testing, and launching

Summary

Responsive Versus Adaptive Design

Responsive design

Adaptive design

So which one is the best?

The takeaway

Summary

Learning HTML5

Our main tool

What is HTML?

HTML tags

HTML attributes

HTML structure

Creating our first page

HTML elements

Titles and paragraphs

Links and images

Summary

Learning CSS3

The different ways to use CSS

CSS formatting

Parent and child elements

Classes and IDs

CSS box model

The boxes

Block and inline

CSS layout and dividers

The basic layout

Formatting and indenting your HTML

Styling our class

Summary

Building Your Own Website

Our design

Installing HTML Boilerplate

Editing index.html

Creating our web page

Images folder

Installing our font

Importing Google Font

Adding normalize.css

The header

Creating a menu

Inserting links

Adding a logo

Right-hand side menu

Adding a Facebook like button

Styling our header

Adding the hero section

CSS flexbox

Positioning in CSS

Position static

Position relative

Position absolute

Position fixed

Position sticky

Blog section

Creating the ABOUT US section

Adding the Partner section

Adding the footer section

Summary

Making Our Website Responsive

What are media queries?

Opening the inspector

Desktop first

Designing the menu

What is jQuery?

jQuery syntax

Making the hero section responsive

Making the Blog section responsive

Making the ABOUT US section responsive

Making the footer section responsive

Summary

Adding Interaction and Dynamic Content

CSS pseudo-classes

Sticky navigation

JS Plugin: Waypoints

CSS animation

Adding a dynamic Instagram feed

Installing Instafeed.js

Getting images from your user account

Finding our userID and TokenAccess

Getting our access token

Displaying the feed

Summary

Optimizing and Launching Our Website

Creating a favicon

Site performance optimization

Optimizing images

Optimizing our code

Basic SEO improvement

What is search engine optimization?

Meta description

Valid HTML

Keywords

Links

Launching our website

Buying a domain name

Google analytics

Google Search Console

Summary

What is Bootstrap?

What is Bootstrap?

Components

Bootstrap Grid system

Media queries

Summary

Building a Website with Bootstrap

Installing Bootstrap

Setting up our project

Bootstrap navbar

Coding the Bootstrap navigation

Styling our navigation bar

Styling the hero section

Styling the Blog section

Styling the about section

Styling the partner section

Styling the footer

Summary

Introduction to Client-Side Rendering

What is server-side rendering?

What is client-side rendering?

Pros and cons of server and client-side rendering

Server-side rendering

Client-side rendering

Introducing to VueJS

Setting up VueJS

Creating a weather application in VueJS

Vue Material

Components

OpenWeather API

The API call

Summary

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

Leave a review - let other readers know what you think