Modern Web Design with HTML5, CSS3, and JavaScript

Modern Web Design with HTML5, CSS3, and JavaScript

by Laurence Svekis
Released December 2020
Publisher(s): Packt Publishing
ISBN: 9781800563179

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

Video description

Responsive websites are the future. They allow your site to adapt to different screen sizes, which means that regardless of the device your web visitors are using, they get the best possible glimpse into your business or service.

By exploring this course, you will be able to pursue a career as a web designer and front-end web developer with your newly acquired knowledge of HTML5, CSS3, JavaScript, and responsive design. In this hands-on course that covers the core aspects of front-end web design, you will discover how to design and create amazing websites that are mobile-ready, interactive, and modern.

The course will guide you on how to create custom websites with amazing HTML pages, add styling with Cascading Style Sheets (CSS), and make them dynamic and interactive with JavaScript to bring them to life. In case you do not have any prior coding experience, this course will help you understand the basics. It goes on to cover essential tools and top resources to help you build on your website development skills. As you progress, you will gradually encounter 25 coding challenges that will ensure you get hands-on experience in front-end web design and web development.

By the end of this course, you will have gained the skills you need to create professional websites.

What You Will Learn

  • Debug HTML and comments within the code
  • Practice important HTML tags, such as meta, audio, and video tags
  • Create Cascading Style Sheets (CSS) linear/radial gradients, 2D/3D transforms, and CSS animations
  • Understand how to use Chrome DevTools
  • Explore the CSS Box Model and understand the significance of its parts - Margin, Border, Padding, and Content
  • Get to grips with CSS pseudo-classes and elements
  • Make use of advanced CSS selectors and understand the significance of CSS specificity applied to selectors
  • Create a NavBar using Flexbox
  • Get familiar with the CSS Grid Layout to use rows and columns
  • Explore how to add JavaScript to your HTML pages
  • Understand JavaScript type conversion (typecasting) and type coercion
  • Get to grips with JavaScript’s truthy and falsy object types
  • Work with JavaScript operators, switch statements, arrays, and loops
  • Explore the Immediately Invoked Function Expression (IIFE) JavaScript function
  • Get to grips with the JavaScript Document Object Model (DOM) and practice challenging coding exercises

Audience

This course is for anyone who wants to add HTML, Cascading Style Sheets (CSS), and JavaScript to their skillset. No prior coding experience is required to get started with this course. Anyone looking to pursue a career in front-end web designing and web development or even experienced web developers looking to refresh their knowledge of web design and web development with HTML5, CSS3, and JavaScript will find this course useful.

About The Author

Laurence Lars Svekis: Laurence Svekis is an experienced web application developer. He has worked on multiple enterprise-level applications, hundreds of websites, business solutions, and many unique and innovative web applications. He has expertise in HTML, CSS, JavaScript, jQuery, Bootstrap, PHP, and MySQL and is also passionate about web technologies, web application development, programming, and online marketing with a strong focus on social media and SEO. He is always willing to help his students experience what technology has to offer and looks forward to sharing his knowledge and experiences with the world.

Table of contents

  1. Chapter 1 : Introduction to Getting Started with Web Design
    1. Introduction to Front-end Web Design and Development
    2. Learning to Code in HTML
    3. Writing HTML Code
  2. Chapter 2 : Creating Web Pages with HTML5
    1. Creating Websites Using Modern HTML and HTML5 Coding
    2. Designing your First HTML Page and Resources for HTML
    3. Creating an HTML Template
    4. What are HTML Elements?
    5. Setting Four Headings and Making Text Bold
    6. Applying HTML Tags - Coding Challenge
    7. Text Formats in HTML
    8. Adding Comments in HTML
    9. Making Links with the HTML Anchor Tag
    10. Applying HTML Tags – HTML Exercise
    11. Adding a MailTo Link in HTML.
    12. Adding Images in HTML
    13. Social Profile Linking Exercise
    14. Creating Lists in HTML and Understanding HTML List Options – Unordered List (UL), Ordered List (OL), Definition List (DL)
    15. Adding HTML Tables to your Web Pages Using the Table Tag
    16. Go Back In Time – Coding Challenge
    17. Creating HTML Block and Inline Elements
    18. What are HTML5 Semantic Elements?
    19. Creating a Free Website through GitHub Pages
    20. Creating and Uploading a Resume with HTML
    21. New Form Elements in HTML5 - Explained with Examples
    22. Creating Forms with HTML tags
    23. Learning about Form Field Options with HTML5 Tags
    24. Using the tag
      1. Tag in HTML
        1. Adding and Tags in HTML
          1. Chapter 3 : HTML Challenges
            1. Section Introduction
            2. Setting up a Page for a Website
            3. Meta Tag in HTML
              1. Basic Page Structure in HTML
              2. Creating More Page Template
              3. HTML Tables
              4. Adding a Dummy Text and Placeholder Images
              5. Finding Editable Content Using Contenteditable
              6. Dynamic Form Values in HTML5
              7. HTML5 Canvas Drawing with JavaScript
            4. Chapter 4 : Mobile-first Responsive Design in Cascading Style Sheets (CSS) and Web Design
              1. Introduction to Cascading Style Sheets (CSS) and Applying CSS to Web Pages
              2. What is Cascading Style Sheets (CSS) and How It Works?
              3. Adding Cascading Style Sheets (CSS) to Web Pages and Understanding CSS Syntax
              4. Writing Cascading Style Sheets (CSS) for Designing Modern Web Pages
              5. Adding Comments on Cascading Style Sheets (CSS) Codes
              6. What are Cascading Style Sheets (CSS) Selectors and How to Use them to Get Page Elements?
              7. Cascading Style Sheets (CSS) Color Units
              8. Setting the Background Color in Cascading Style Sheets (CSS) – Coding Challenge
              9. Adding Cascading Style Sheets (CSS) Background Images and Setting Background Properties and Values
              10. Adjusting the Background Image Size and Understanding the Position Options in Cascading Style Sheets (CSS)
              11. Setting Element Height and Width with Cascading Style Sheets (CSS)
              12. Using Chrome DevTools for Web Designing and Web Development
              13. Setting Cascading Style Sheets (CSS) Units and Highlighting Values and Options for CSS Units
              14. Adding and Creating Cascading Style Sheets (CSS) Borders
              15. Applying Margins to Elements on the Web Page with Cascading Style Sheets (CSS)
              16. What is Cascading Style Sheets (CSS) Padding and How to Set Element Padding Values?
              17. What is the Box Model and How it Works in Cascading Style Sheets (CSS)?
              18. Creating Outlines for HTML elements Using Cascading Style Sheets (CSS) Outline Properties
              19. What are Cascading Style Sheets (CSS) Pseudo-classes?
              20. What are Cascading Style Sheets (CSS) Pseudo-elements and How to Write CSS Code for Pseudo-elements?
              21. Adding Font Styles, Selecting Web Fonts, and Updating a Font Family
              22. Adding Google Fonts to Your Website Using Cascading Style Sheets (CSS)
              23. Adding FontAwesome Icons to a Page
              24. Exploring Text and More Font Property Options and Values in Cascading Style Sheets (CSS)
              25. Setting the Value of the Cascading Style Sheets (CSS) Display Property
              26. Making a Navigation Bar Turn the HTML List Items into a Navbar - Coding Challenge
              27. Setting the Value of the Cascading Style Sheets (CSS) Position Property
              28. What is the z-index Cascading Style Sheets (CSS) property and How to Set it in CSS?
              29. Handling the Overflow of the Element Content
              30. Sidebar Nav Website Project
              31. Setting the Cascading Style Sheets (CSS) Float Property
              32. Creating a Website Using the Cascading Style Sheets (CSS) Float Property - Coding Challenge
              33. Creating a Website Image Gallery Using the Cascading Style Sheets (CSS) Float Property - Coding Challenge
              34. Updating the Mouse Cursor Pointer with Cascading Style Sheets (CSS)
              35. Using Cascading Style Sheets (CSS) Advanced Selectors and Understanding More Selection Options
              36. Making a Website Responsive Using Media Queries with Cascading Style Sheets (CSS)
              37. Working of Cascading Style Sheets (CSS) Selector Specificity
            5. Chapter 5 : Exploring More with Cascading Style Sheet (CSS3) and Creating Webpages Easily
              1. Exploring More Cascading Style Sheet (CSS) and CSS3 to Design Your Website with Styling
              2. Creating the Cascading Style Sheet (CSS) Linear Gradients
              3. Creating the Cascading Style Sheet (CSS) Radial Gradients
              4. Creating Cascading Style Sheet (CSS) 2D Transforms
              5. Learning about Cascading Style Sheet (CSS) 3D Transforms and Applying CSS 3D Transforms
              6. Making Animations with Cascading Style Sheet (CSS)
            6. Chapter 6 : Cascading Style Sheet (CSS) Layouts FlexBox and CSS Grid
              1. Creating Modern Website Layouts Using the CSS3 Responsive Web Design
              2. CSS FlexBox Layout and Creating a Layout with Flexbox
              3. Creating a Navbar Using Flexbox - Coding Challenge
              4. Applying Element Sizing with Flexbox
              5. Using Flexbox to Size Items on the Page
              6. Creating an Image Gallery Website - Coding Challenge
              7. Creating Websites with a Grid Layout
              8. Using the Cascading Style Sheets (CSS) Grid to Make Rows and Columns
              9. Making the Cascading Style Sheets (CSS) Grid Rows and Columns and Setting the Width
              10. What are Grid Items?
              11. Setting the Cascading Style Sheets (CSS) Grid Area Names
              12. Creating Websites and Setting up and Designing Web Pages Using the CSS Grid - Coding Challenge
            7. Chapter 7 : Common Cascading Style Sheets (CSS) Questions and Answers for Interview Preparation
              1. Introduction – Common Questions
              2. Exploring More about Cascading Style Sheets (CSS) Questions
              3. Box Model and its Workings
              4. Cascading Style Sheets (CSS) z-index and its Usage
              5. Pseudo-elements in Cascading Style Sheets (CSS) with Examples
              6. Pseudo-classes in Cascading Style Sheets (CSS) with Examples
              7. Box Sizing and Cascading Style Sheets (CSS) Box Model
              8. Cascading Style Sheets (CSS) Font Sizes
            8. Chapter 8 : Cascading Style Sheets (CSS) Challenges
              1. Cascading Style Sheets (CSS) Challenges – Introduction
              2. Adding Google Font
              3. Changing First Letter in Pseudo-classes
              4. 2 Designing Columns Using Cascading Style Sheets (CSS)
              5. Centering Content Using Margin
              6. Hovering Elements in Pseudo-class
              7. Using Hover Anchor in Pseudo-class
              8. Creating Responsive Media Size
              9. Box Model – Exercise
              10. Floating Images to the Left of the Text
            9. Chapter 9 : JavaScript Introduction
              1. Introduction to JavaScript for Web Design to Make the Pages Interactive
              2. Writing Code with JavaScript
              3. Running JavaScript in a Browser
              4. JavaScript and HTML
              5. Adding Comments in JavaScript
              6. Output Options in JavaScript
              7. JavaScript Code Challenge – Output Action Challenge
              8. Introduction to JavaScript Variables
              9. JavaScript – Let and Const Variables
              10. Exploring Different Types of Data
              11. Creating User Input with a Prompt Code in JavaScript - Coding Challenge
              12. Template Literals in JavaScript using Backticks
              13. JavaScript Code Challenge – Prompt Challenge
              14. Exploring JavaScript Type Conversion and Coercion
              15. Getting the Data Type Using the JavaScript Code - Coding Challenge
              16. What are JavaScript Operators and How to Use Them?
              17. JavaScript Assignment Operators
              18. JavaScript Comparison Operators
              19. JavaScript Truthy and Falsy – Explained
              20. JavaScript If-Else and Else-If Conditional Statements
              21. Learning and Exploring the Code - Coding Challenge
              22. JavaScript Conditional (Ternary) Operator
              23. JavaScript Logical Operators – Example
              24. JavaScript Switch Statement
              25. Creating a Simple Game 'Switch Friends' with JavaScript - Coding Challenge
              26. JavaScript Functions
              27. JavaScript Function Parameters
              28. JavaScript Function Return
              29. JavaScript Function - Expression versus Function Declaration with Examples
              30. Function Scope in JavaScript
              31. JavaScript Function Closures with Examples
              32. JavaScript Function Recursion with Recursion Examples
              33. Using JavaScript Code to Create a Fun Game - Coding Challenge
              34. Immediately Invoked Function Expression (IIFE) JavaScript Function
              35. New Arrow Functions in JavaScript
              36. Creating Objects with JavaScript
              37. Learning More about JavaScript Objects – Part 1
              38. Creating a Car Object Challenge - Coding Challenge
              39. Learning More about JavaScript Objects – Part 2
              40. Creating JavaScript Objects
              41. Creating Arrays to Hold Data with JavaScript
              42. Adding Values within the JavaScript Array
              43. Using the Array Methods in JavaScript – Part 1
              44. Using the Array Methods in JavaScript – Part 2
              45. JavaScript Array Methods – Advanced
              46. Creating JavaScript Loop iterations with JavaScript Code
              47. Getting Contents of an Array with a Loop
              48. Getting the Object Properties and Values with JavaScript to Loop Object Contents
              49. JavaScript Array Map Method - Example Code
              50. Creating Random Values Using JavaScript Math Object
              51. Getting the Current Date Object
            10. Chapter 10 : JavaScript Document Object Model (DOM)
              1. JavaScript Document Object Model (DOM) Introduction
              2. Introduction to the Dynamic and Interactive Webpage Content
              3. Selecting the Elements of JavaScript Document Object Model (DOM)
              4. Selecting Web Page Elements using JavaScript Element Selectors
              5. JavaScript Document Object Model (DOM) Element Selection Methods - Using Element QuerySelectorAll
              6. Learn about JavaScript Manipulation InnerContent
              7. Updating the Element Attributes Using JavaScript DOM
              8. Setting the Element Attribute Updates Using JavaScript Code
              9. Manipulating Page Elements - JavaScript and Classes
              10. Element Children and Traversing Web Page Elements Using JavaScript
              11. JavaScript Document Object Model (DOM0 - More Traversing of Elements from the Web Page
              12. Updating and Applying the Element Manipulation Styles Using JavaScript
              13. Creating the Page Elements Using JavaScript Code
              14. Page Element Append-Prepend using JavaScript Code - Coding Challenge
              15. Removing an Element from a Webpage Using JavaScript Code
              16. Duplicating the Page Elements Using JavaScript Code
              17. Adding Event Listeners
              18. JavaScript Element Events Bubble and Capturing Event Listeners
              19. Doing Even More with JavaScript Event Listeners
              20. JavaScript Event Listeners for Keyboard Events
              21. Creating Dynamic Shopping List Using the JavaScript List Challenge Events - Coding Challenge
            11. Chapter 11 : Advanced Coding in JavaScript
              1. Exploring More Advanced Options with JavaScript and Focusing on Dynamic and Interactive Websites
              2. Learning about JavaScript Number Methods
              3. Learning about JavaScript String – Part 1
              4. Learning about JavaScript String Methods - Part 2.
              5. What is JavaScript Math Object?
              6. Getting Random Items from Arrays
              7. Creating a Random Page Background - Coding Challenge
              8. Loading JavaScript once a Page is Loaded
              9. Moving Webpage Elements with JavaScript - Coding Challenge
              10. Writing the Date in JavaScript and Updating the Date Object
              11. Turning Objects into Strings and Strings into Objects using JSON.parse and JSON.stringify.
              12. File Protocol versus HTTP Protocol
              13. What is Local Storage and How to Store Values in the Browser with JavaScript?
              14. Setting up the Code to Run after a Timeout and Interval in JavaScript
              15. Creating JavaScript Prototypes
              16. Making an AJAX Request with JavaScript and Using the JavaScript Fetch() Method
            12. Chapter 12 : Common JavaScript Questions and Answers for Interview Preparation and Practice
              1. Understanding the window.cancelAnimationFrame() Method and window.requestAnimationFrame() Method
              2. parseInt versus Number Methods
              3. JavaScript Switch Statement
              4. Using Continue and Break-in for loop and While Loop
              5. Keyboard Event Listeners
              6. Creating Page Elements and Adding them Dynamically on the Page
              7. Creating Elements and Building HTML for a Dice Game
              8. Creating a JavaScript Pop-up Modal
              9. Using requestAnimationFrame() Method for Simple Counter
              10. Removing a Child node from JavaScript
              11. Quirks Mode in JavaScript
              12. Before and After Insert Triggers
              13. append() and prepend() Methods
            13. Chapter 13 : Exploring Rapid Web Design with the Bootstrap 4 Frontend Framework
              1. Introduction to Bootstrap
              2. Getting to Know Bootstrap
              3. Setting up Webpage Using Cascading Style Sheets (CSS) and JS files
              4. Finding out about Bootstrap Versions
              5. What is Grid Bootstrap 4?
              6. Adding Bootstrap Classes and Styling to Your Webpage
              7. Setting up Images within Bootstrap.
              8. Creating an Alert in Bootstrap
              9. Discovering Component Badges in Bootstrap.
              10. Setting up Breadcrumbs Using Bootstrap Components
              11. Colorful Buttons with Bootstrap
              12. Using Cards within Bootstrap
              13. Creating a slideshow with Bootstrap Carousel
              14. Adding and Collapsing Elements Using Bootstrap
              15. Adding a Dropdown Fluxionality in Bootstrap
              16. Setting up Forms in Bootstrap and Field Style
              17. Standing out with the Bootstrap Components JumboTron
              18. Styling HTML Lists with Bootstrap
              19. Creating a Modal Pop-up using Bootstrap
              20. Creating a Responsive Bootstrap Nav Code
              21. Creating Mobile Responsive Navbar Using Bootstrap
              22. Creating Single Page Nav Scroll using Bootstrap Scrollspy
              23. Adding Pagination in Bootstrap
              24. Adding ToolTips and Pop-over in Bootstrap
              25. Adding Spinners and Progress Bars with Bootstrap 4 Styles
              26. Exploring Bootstrap Components
              27. Setting up a Single-page Website from Scratch
              28. Adding a Responsive Bootstrap Navbar
              29. Getting Social Icons with FontAwesome for the Website
              30. Cascading Style Sheets (CSS) Styles for Sections Responsive Website with Bootstrap Styling
              31. Creating a Responsive Website Using Bootstrap Cards
              32. Creating Webpages Columns and Rows Using the Bootstrap Grid
              33. Adding a Slideshow with the Bootstrap Carousel Component
              34. Creating a Custom Bootstrap Contact Form Using Bootstrap Form Styling Classes
              35. Creating Responsive Website Using Bootstrap
              36. Creating a Single-page Website with Scrollspy
              37. Complete Overview of Responsive Website from Scratch
            14. Chapter 14 : Applying jQuery to Your Web Pages
              1. What is jQuery and How to Write jQuery Code?
              2. Why Use jQuery?
              3. JavaScript Versus jQuery and How to Use jQuery to Write Codes?
              4. What is Document Ready and When to Use it?
              5. Common jQuery Methods and How to Code in jQuery?
              6. jQuery Arrows Methods
              7. Creating New Elements for the Page with jQuery Prepend() and Append() Methods
              8. Inserting Elements in jQuery
              9. Updating and Adding jQuery Attributes
              10. Creating an Element jQuery
              11. Returning Field Values
              12. Removing Elements from the Page with the jQuery Remove() and Empty() Methods
              13. Creating a jQuery Dynamic List - Coding Challenge
              14. Learning More about Code in jQuery.
              15. Setting Images Attributes with jQuery
              16. Checkbox - Coding Challenge
              17. Setting Mouse Events with jQuery
              18. Setting Keyboard Events with jQuery and Adding Event Listeners with jQuery
              19. Adding Event Listeners in jQuery
              20. Setting jQuery Effects – Hide, Show, and Fade
              21. Setting up the jQuery Slide Effect
              22. Using the jQuery Animate Method to Move Elements
              23. Creating Animations - Coding Challenge
              24. What is jQuery AJAX and Making AJAX Request Using jQuery Load() and Get() Methods
              25. Trying AJAX with jQuery - Coding Challenge
              26. Looping through jQuery Objects
              27. Traversing the Document Object Model (DOM) Tree with jQuery
              28. Using Filters to Find Elements with jQuery
              29. Learning more about jQuery with Code Snippets and Examples
            15. Chapter 15 : Creating a Simple Website from Scratch
              1. Creating a Simple Website from Scratch
              2. Tools and Resources
              3. Creating a Simple Cascading Style Sheets (CSS) Website
              4. Creating a Three-column Website
              5. Creating a Three-column Website Using Flexbox
              6. Creating a Three-column Website Using Cascading Style Sheets (CSS) Grid
              7. Creating an HTML Form Using Cascading Style Sheets (CSS) Grid
              8. Website Review and Conclusion
            16. Chapter 16 : Creating a Three-column Website from Scratch
              1. Creating a Three-column Design Website from Scratch
              2. Website Planning
              3. Setting up the HTML Structure
              4. Applying Cascading Style Sheets (CSS) to HTML
              5. Setting up Page Content Columns
              6. Creating a Page Footer Using Cascading Style Sheets (CSS)
              7. Creating Responsive Columns Using Cascading Style Sheets (CSS)
              8. Creating a Navbar Maker using Cascading Style Sheets (CSS)
              9. Creating a Responsive Navbar using Cascading Style Sheets (CSS)
              10. Final Code Review Updates.
            17. Chapter 17 : Creating a Website from Scratch with a Fat Footer Design using the Flex Property
              1. Fat Footer Website Design
              2. Setting up the HTML Code
              3. Website Wireframe
              4. Adding HTML Pages from a Wireframe.
              5. Setting up Cascading Style Sheets (CSS) for a Page
              6. Setting up the Header and Footer Style
              7. Setting Up the Logo and Nav in the Header
              8. Creating Footer Styling using Cascading Style Sheets (CSS)
              9. Adding FontAwesome Social Icons
              10. Adding Copyright to the Footer
              11. Conclusion – Fat Footer Website with the Flex Property
            18. Chapter 18 : Creating a Cascading Style Sheets (CSS) Grid Website with Flex Navbar
              1. Modern Website Design with Cascading Style Sheets (CSS) Grid Site
              2. Website Planning and Wireframe
              3. Creating an HTML Page Structure
              4. Adding Dummy Content using HTML
              5. Adding a Cascading Style Sheets (CSS) Grid
              6. Mobile-first Responsive Design
              7. Creating a Responsive Navbar
              8. Applying Styling Using Cascading Style Sheets (CSS)
              9. Creating a Header and Footer Using Cascading Style Sheets (CSS)
              10. Adding Color and Font Style
              11. Conclusion – Cascading Style Sheets (CSS) Grid
            19. Chapter 19 : Creating a Single-page Website with a Sticky Bottom Navbar
              1. Single-page Site with a Sticky Navbar
              2. Setting up HTML for Webpage
              3. HTML Page Structure
              4. Creating a Page Header Using Cascading Style Sheets (CSS)
              5. Creating a Home Section Using Cascading Style Sheets (CSS)
              6. Styling Sections Using Cascading Style Sheets (CSS)
              7. Creating a Web Form
              8. Setting a Page Footer
              9. Creating Sticky Navbar
              10. Making the Website Responsive using Cascading Style Sheets (CSS)

Product information

  • Title: Modern Web Design with HTML5, CSS3, and JavaScript
  • Author(s): Laurence Svekis
  • Release date: December 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781800563179