Practical web design: learn the fundamentals of web design with HTML5, CSS3, Bootstrap, jQuery, and Vue.js

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?

Web design and its components

Grids

Call to action

Breadcrumb

The search bar

Icons

Modal

Typography

Colors

Usability

Consistency

Website-designing workflow

Our situation

Goal identification

Defining the scope

Creating wireframes

Designing

Implementing, testing, and launching

Repsonsive versus adaptive design

Responsive design

Adaptive design

So which one is best?

The takeaway

Learning HTML5

Our main tool

What is HTML?

HTML structure

HTML elements

Learning CSS3

The different ways to use CSS

CSS formatting

Parent and child elements

Classes and IDs

CSS box model

CSS layout and dividers

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

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

Adding interaction and dynamic content

CSS pseudo-classes

Sticky navigation

Adding a dynamic Instagram feed

Optimizing and launching our website

Creating a favicon

Site performance optimization

Basic SEO improvement

Launching our website

Google analytics

What is 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

Introduction to client-side rendering

What is server-side rendering?

What is client-side rendering?

Pros and cons of server and client-side rendering

Introduction to VueJS

Creating a weather applicaiton in VueJS

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.

Cover; Title Page; Copyright and Credits; PacktPub.com; Contributers; Table of Contents; Preface; 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; 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 usersDirectional; 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; Chapter 3: 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; 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 tags; HTML attributes; HTML structure; Creating our first page; HTML elements; Titles and paragraphs

Links and imagesSummary; Chapter 6: 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; Chapter 7: 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 buttonStyling 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; Chapter 8: 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