Practical Web Design

Practical Web Design

by Philippe Hong
Released April 2018
Publisher(s): Packt Publishing
ISBN: 9781788395038

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

About This Book
  • A fun-filled book with incrementing projects that would help you learn and adapt the fundamentals of web development
  • Bring your web design to life with the help of HTML, CSS, JQuery, and learn to kick-start your future projects with Bootstrap
  • Explore popular web development techniques such as responsive, adaptive, and material design and initiate yourself with Vue.js
Who This Book Is For

This book is for anyone who wants to learn about web development regardless of previous experience. It's perfect for complete beginners with zero experience; it's also great for anyone who does have some experience in a few technologies (such as HTML and CSS) but not all of them.

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
In Detail

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.

Style and approach

This is a fun-filled book with conversational and engaging content ; with each incrementing project, you'll would easily learn and adapt the fundamentals of web development. Each project showcases a different use case and incrementally teaches the web development basics.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Practical Web Design
  3. PacktPub.com
    1. Why subscribe?
    2. PacktPub.com
  4. Contributers
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. Evolution of Web Design
    1. The first ever website
    2. Table-based layouts
    3. Introduction of Flash
    4. CSS – the savior
    5. Web 2.0
    6. The rise of the mobile
    7. Responsive web design
    8. Flat design
    9. What's next?
    10. Summary
  7. Web Design and its Components
    1. Grids
      1. The cons
    2. Call to Action
      1. Making it obvious
      2. Using contrasting color
      3. Compelling copy
      4. Placement
    3. Breadcrumb
    4. The search bar
      1. The submit button
      2. Making it noticeable
      3. Placing the search bar correctly
    5. Icons
      1. Describing in a nutshell  
      2. Drawing attention of the users
      3. Directional
    6. Modal
    7. Typography
      1. Choosing a font that connects your brand
        1. Serif fonts
        2. Sans-serif
        3. Casual scripts
      2. Don't use too much typeface
    8. Colors
      1. What colors mean
    9. Usability
      1. Simplicity
      2. Navigability
      3. Accessibility
    10. Consistency
      1. So, how can we be consistent?
        1. Design
        2. Content
        3. Interactions
    11. Summary
  8. Website-Designing Workflow
    1. Our situation
    2. Goal identification
      1. What is the purpose of the website?
      2. Who is the website for?
      3. Is this useful for our audience?
      4. What do they expect to find or do there?
      5. Does the website need to follow a brand or have its own brand identity?
      6. Are there any competitors? If there are, how is the website different than others?
    3. Defining the scope
    4. Creating wireframes
    5. Designing
      1. Get inspiration
      2. Improve
      3. Invent
    6. Implementing, testing, and launching
    7. Summary
  9. Responsive Versus Adaptive Design
    1. Responsive design
    2. Adaptive design
    3. So which one is the best?
    4. The takeaway
    5. Summary
  10. Learning HTML5
    1. Our main tool
    2. What is HTML?
      1. HTML tags
      2. HTML attributes
    3. HTML structure
      1. Creating our first page
    4. HTML elements
      1. Titles and paragraphs
      2. Links and images
    5. Summary
  11. Learning CSS3
    1. The different ways to use CSS
    2. CSS formatting
    3. Parent and child elements
    4. Classes and IDs
    5. CSS box model  
      1. The boxes
      2. Block and inline
    6. CSS layout and dividers
      1. The basic layout
      2. Formatting and indenting your HTML
      3. Styling our class
    7. Summary
  12. Building Your Own Website
    1. Our design
    2. Installing HTML Boilerplate
      1. Editing index.html
    3. Creating our web page
      1. Images folder
      2. Installing our font
      3. Importing Google Font
      4. Adding normalize.css
    4. The header
      1. Creating a menu
      2. Inserting links
      3. Adding a logo
      4. Right-hand side menu
      5. Adding a Facebook like button
      6. Styling our header
    5. Adding the hero section
      1. CSS flexbox
      2. Positioning in CSS
        1. Position static
        2. Position relative
        3. Position absolute
        4. Position fixed
        5. Position sticky
    6. Blog section
    7. Creating the ABOUT US section
    8. Adding the Partner section
    9. Adding the footer section
    10. Summary
  13. Making Our Website Responsive
    1. What are media queries? 
      1. Opening the inspector
      2. Desktop first
    2. Designing the menu
    3. What is jQuery? 
      1. jQuery syntax
    4. Making the hero section responsive
    5. Making the Blog section responsive
    6. Making the ABOUT US section responsive
    7. Making the footer section responsive
    8. Summary
  14. Adding Interaction and Dynamic Content
    1. CSS pseudo-classes
    2. Sticky navigation 
      1. JS Plugin: Waypoints
      2. CSS animation
    3. Adding a dynamic Instagram feed
      1. Installing Instafeed.js
      2. Getting images from your user account
      3. Finding our userID and TokenAccess
      4. Getting our access token
      5. Displaying the feed
    4. Summary
  15. Optimizing and Launching Our Website
    1. Creating a favicon
    2. Site performance optimization
      1. Optimizing images
      2. Optimizing our code
    3. Basic SEO improvement
      1. What is search engine optimization?
      2. Meta description
      3. Valid HTML
      4. Keywords
      5. Links
    4. Launching our website
      1. Buying a domain name
    5. Google analytics
      1. Google Search Console
    6. Summary
  16. What is Bootstrap?
    1. What is Bootstrap?
      1. Components
      2. Bootstrap Grid system
      3. Media queries
    2. Summary
  17. Building a Website with Bootstrap
    1. Installing Bootstrap 
      1. Setting up our project 
    2. Bootstrap navbar 
      1. Coding the Bootstrap navigation
      2. Styling our navigation bar 
      3. Styling the hero section
    3. Styling the Blog section
    4. Styling the about section 
    5. Styling the partner section
    6. Styling the footer
    7. Summary
  18. Introduction to Client-Side Rendering
    1. What is server-side rendering?
    2. What is client-side rendering?
    3. Pros and cons of server and client-side rendering
      1. Server-side rendering
      2. Client-side rendering
    4. Introducing to VueJS
      1. Setting up VueJS
    5. Creating a weather application in VueJS
      1. Vue Material
      2. Components
      3. OpenWeather API
      4. The API call
    6. Summary
  19. Tools to Help Your Workflow
    1. HTML Boilerplate
    2. Lorem Ipsum
    3. CSS preprocessor – LESS
    4. CSS preprocessor – SCSS
    5. ColorZilla
    6. Foundation
    7. Fontastic
    8. webflow
    9. Modernizr
    10. CSS3 Generator
    11. git
    12. CodeKit
    13. Animate.css
    14. TinyPNG
    15. Unsplash
    16. Summary
  20. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Practical Web Design
  • Author(s): Philippe Hong
  • Release date: April 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788395038