Applying jQuery to Your Web Pages | Modern Web Design with HTML5, CSS3, and JavaScript

Book Overview & Buying
Table Of Contents

Modern Web Design with HTML5, CSS3, and JavaScript

By : Laurence Svekis

Buy this Video

Modern Web Design with HTML5, CSS3, and JavaScript

By: Laurence Svekis

Buy this Video

Overview of this book

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. All the resources and supportive files for this course are available at https://github.com/PacktPublishing/Modern-Web-Design-with-HTML5-CSS3-and-JavaScript

Introduction to Getting Started with Web Design

Introduction to Front-end Web Design and Development

Learning to Code in HTML

Writing HTML Code

Creating Web Pages with HTML5

Creating Websites Using Modern HTML and HTML5 Coding

Designing your First HTML Page and Resources for HTML

Creating an HTML Template

What are HTML Elements?

Setting Four Headings and Making Text Bold

Applying HTML Tags - Coding Challenge

Text Formats in HTML

Adding Comments in HTML

Making Links with the HTML Anchor Tag

Applying HTML Tags – HTML Exercise

Adding a MailTo Link in HTML.

Adding Images in HTML

Social Profile Linking Exercise

Creating Lists in HTML and Understanding HTML List Options – Unordered List (UL), Ordered List (OL), Definition List (DL)

Adding HTML Tables to your Web Pages Using the Table Tag

Go Back In Time – Coding Challenge

Creating HTML Block and Inline Elements

What are HTML5 Semantic Elements?

Creating a Free Website through GitHub Pages

Creating and Uploading a Resume with HTML

New Form Elements in HTML5 - Explained with Examples

Creating Forms with HTML tags

Learning about Form Field Options with HTML5 Tags

Using the <fieldset> tag

Adding <audio> and <video> Tags in HTML

HTML Meta Tags and Their Functions

Common Tags with Source Files and Understanding Web Design Tags

Debugging and Commenting on the Code

HTML Challenges

Section Introduction

Setting up a Page for a Website

<viewport> Meta Tag in HTML

Basic Page Structure in HTML

Creating More Page Template

HTML Tables

Adding a Dummy Text and Placeholder Images

Finding Editable Content Using Contenteditable

Dynamic Form Values in HTML5

HTML5 Canvas Drawing with JavaScript

Mobile-first Responsive Design in Cascading Style Sheets (CSS) and Web Design

Introduction to Cascading Style Sheets (CSS) and Applying CSS to Web Pages

What is Cascading Style Sheets (CSS) and How It Works?

Adding Cascading Style Sheets (CSS) to Web Pages and Understanding CSS Syntax

Writing Cascading Style Sheets (CSS) for Designing Modern Web Pages

Adding Comments on Cascading Style Sheets (CSS) Codes

What are Cascading Style Sheets (CSS) Selectors and How to Use them to Get Page Elements?

Cascading Style Sheets (CSS) Color Units

Setting the Background Color in Cascading Style Sheets (CSS) – Coding Challenge

Adding Cascading Style Sheets (CSS) Background Images and Setting Background Properties and Values

Adjusting the Background Image Size and Understanding the Position Options in Cascading Style Sheets (CSS)

Setting Element Height and Width with Cascading Style Sheets (CSS)

Using Chrome DevTools for Web Designing and Web Development

Setting Cascading Style Sheets (CSS) Units and Highlighting Values and Options for CSS Units

Adding and Creating Cascading Style Sheets (CSS) Borders

Applying Margins to Elements on the Web Page with Cascading Style Sheets (CSS)

What is Cascading Style Sheets (CSS) Padding and How to Set Element Padding Values?

What is the Box Model and How it Works in Cascading Style Sheets (CSS)?

Creating Outlines for HTML elements Using Cascading Style Sheets (CSS) Outline Properties

What are Cascading Style Sheets (CSS) Pseudo-classes?

What are Cascading Style Sheets (CSS) Pseudo-elements and How to Write CSS Code for Pseudo-elements?

Adding Font Styles, Selecting Web Fonts, and Updating a Font Family

Adding Google Fonts to Your Website Using Cascading Style Sheets (CSS)

Adding FontAwesome Icons to a Page

Exploring Text and More Font Property Options and Values in Cascading Style Sheets (CSS)

Setting the Value of the Cascading Style Sheets (CSS) Display Property

Making a Navigation Bar Turn the HTML List Items into a Navbar - Coding Challenge

Setting the Value of the Cascading Style Sheets (CSS) Position Property

What is the z-index Cascading Style Sheets (CSS) property and How to Set it in CSS?

Handling the Overflow of the Element Content

Sidebar Nav Website Project

Setting the Cascading Style Sheets (CSS) Float Property

Creating a Website Using the Cascading Style Sheets (CSS) Float Property - Coding Challenge

Creating a Website Image Gallery Using the Cascading Style Sheets (CSS) Float Property - Coding Challenge

Updating the Mouse Cursor Pointer with Cascading Style Sheets (CSS)

Using Cascading Style Sheets (CSS) Advanced Selectors and Understanding More Selection Options

Making a Website Responsive Using Media Queries with Cascading Style Sheets (CSS)

Working of Cascading Style Sheets (CSS) Selector Specificity

Exploring More with Cascading Style Sheet (CSS3) and Creating Webpages Easily

Exploring More Cascading Style Sheet (CSS) and CSS3 to Design Your Website with Styling

Creating the Cascading Style Sheet (CSS) Linear Gradients

Creating the Cascading Style Sheet (CSS) Radial Gradients

Creating Cascading Style Sheet (CSS) 2D Transforms

Learning about Cascading Style Sheet (CSS) 3D Transforms and Applying CSS 3D Transforms

Making Animations with Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) Layouts FlexBox and CSS Grid

Creating Modern Website Layouts Using the CSS3 Responsive Web Design

CSS FlexBox Layout and Creating a Layout with Flexbox

Creating a Navbar Using Flexbox - Coding Challenge

Applying Element Sizing with Flexbox

Using Flexbox to Size Items on the Page

Creating an Image Gallery Website - Coding Challenge

Creating Websites with a Grid Layout

Using the Cascading Style Sheets (CSS) Grid to Make Rows and Columns

Making the Cascading Style Sheets (CSS) Grid Rows and Columns and Setting the Width

What are Grid Items?

Setting the Cascading Style Sheets (CSS) Grid Area Names

Creating Websites and Setting up and Designing Web Pages Using the CSS Grid - Coding Challenge

Common Cascading Style Sheets (CSS) Questions and Answers for Interview Preparation

Introduction – Common Questions

Exploring More about Cascading Style Sheets (CSS) Questions

Box Model and its Workings

Cascading Style Sheets (CSS) z-index and its Usage

Pseudo-elements in Cascading Style Sheets (CSS) with Examples

Pseudo-classes in Cascading Style Sheets (CSS) with Examples

Box Sizing and Cascading Style Sheets (CSS) Box Model

Cascading Style Sheets (CSS) Font Sizes

Cascading Style Sheets (CSS) Challenges

Cascading Style Sheets (CSS) Challenges – Introduction

Adding Google Font

Changing First Letter in Pseudo-classes

2 Designing Columns Using Cascading Style Sheets (CSS)

Centering Content Using Margin

Hovering Elements in Pseudo-class

Using Hover Anchor in Pseudo-class

Creating Responsive Media Size

Box Model – Exercise

Floating Images to the Left of the Text

JavaScript Introduction

Introduction to JavaScript for Web Design to Make the Pages Interactive

Writing Code with JavaScript

Running JavaScript in a Browser

JavaScript and HTML

Adding Comments in JavaScript

Output Options in JavaScript

JavaScript Code Challenge – Output Action Challenge

Introduction to JavaScript Variables

JavaScript – Let and Const Variables

Exploring Different Types of Data

Creating User Input with a Prompt Code in JavaScript - Coding Challenge

Template Literals in JavaScript using Backticks

JavaScript Code Challenge – Prompt Challenge

Exploring JavaScript Type Conversion and Coercion

Getting the Data Type Using the JavaScript Code - Coding Challenge

What are JavaScript Operators and How to Use Them?

JavaScript Assignment Operators

JavaScript Comparison Operators

JavaScript Truthy and Falsy – Explained

JavaScript If-Else and Else-If Conditional Statements

Learning and Exploring the Code - Coding Challenge

JavaScript Conditional (Ternary) Operator

JavaScript Logical Operators – Example

JavaScript Switch Statement

Creating a Simple Game 'Switch Friends' with JavaScript - Coding Challenge

JavaScript Functions

JavaScript Function Parameters

JavaScript Function Return

JavaScript Function - Expression versus Function Declaration with Examples

Function Scope in JavaScript

JavaScript Function Closures with Examples

JavaScript Function Recursion with Recursion Examples

Using JavaScript Code to Create a Fun Game - Coding Challenge

Immediately Invoked Function Expression (IIFE) JavaScript Function

New Arrow Functions in JavaScript

Creating Objects with JavaScript

Learning More about JavaScript Objects – Part 1

Creating a Car Object Challenge - Coding Challenge

Learning More about JavaScript Objects – Part 2

Creating JavaScript Objects

Creating Arrays to Hold Data with JavaScript

Adding Values within the JavaScript Array

Using the Array Methods in JavaScript – Part 1

Using the Array Methods in JavaScript – Part 2

JavaScript Array Methods – Advanced

Creating JavaScript Loop iterations with JavaScript Code

Getting Contents of an Array with a Loop

Getting the Object Properties and Values with JavaScript to Loop Object Contents

JavaScript Array Map Method - Example Code

Creating Random Values Using JavaScript Math Object

Getting the Current Date Object

JavaScript Document Object Model (DOM)

JavaScript Document Object Model (DOM) Introduction

Introduction to the Dynamic and Interactive Webpage Content

Selecting the Elements of JavaScript Document Object Model (DOM)

Selecting Web Page Elements using JavaScript Element Selectors

JavaScript Document Object Model (DOM) Element Selection Methods - Using Element QuerySelectorAll

Learn about JavaScript Manipulation InnerContent

Updating the Element Attributes Using JavaScript DOM

Setting the Element Attribute Updates Using JavaScript Code

Manipulating Page Elements - JavaScript and Classes

Element Children and Traversing Web Page Elements Using JavaScript

JavaScript Document Object Model (DOM0 - More Traversing of Elements from the Web Page

Updating and Applying the Element Manipulation Styles Using JavaScript

Creating the Page Elements Using JavaScript Code

Page Element Append-Prepend using JavaScript Code - Coding Challenge

Removing an Element from a Webpage Using JavaScript Code

Duplicating the Page Elements Using JavaScript Code

Adding Event Listeners

JavaScript Element Events Bubble and Capturing Event Listeners

Doing Even More with JavaScript Event Listeners

JavaScript Event Listeners for Keyboard Events

Creating Dynamic Shopping List Using the JavaScript List Challenge Events - Coding Challenge

Advanced Coding in JavaScript

Exploring More Advanced Options with JavaScript and Focusing on Dynamic and Interactive Websites

Learning about JavaScript Number Methods

Learning about JavaScript String – Part 1

Learning about JavaScript String Methods - Part 2.

What is JavaScript Math Object?

Getting Random Items from Arrays

Creating a Random Page Background - Coding Challenge

Loading JavaScript once a Page is Loaded

Moving Webpage Elements with JavaScript - Coding Challenge

Writing the Date in JavaScript and Updating the Date Object

Turning Objects into Strings and Strings into Objects using JSON.parse and JSON.stringify.

File Protocol versus HTTP Protocol

What is Local Storage and How to Store Values in the Browser with JavaScript?

Setting up the Code to Run after a Timeout and Interval in JavaScript

Creating JavaScript Prototypes

Making an AJAX Request with JavaScript and Using the JavaScript Fetch() Method

Common JavaScript Questions and Answers for Interview Preparation and Practice

Understanding the window.cancelAnimationFrame() Method and window.requestAnimationFrame() Method

parseInt versus Number Methods

JavaScript Switch Statement

Using Continue and Break-in for loop and While Loop

Keyboard Event Listeners

Creating Page Elements and Adding them Dynamically on the Page

Creating Elements and Building HTML for a Dice Game

Creating a JavaScript Pop-up Modal

Using requestAnimationFrame() Method for Simple Counter

Removing a Child node from JavaScript

Quirks Mode in JavaScript

Before and After Insert Triggers

append() and prepend() Methods

Exploring Rapid Web Design with the Bootstrap 4 Frontend Framework

Introduction to Bootstrap

Getting to Know Bootstrap

Setting up Webpage Using Cascading Style Sheets (CSS) and JS files

Finding out about Bootstrap Versions

What is Grid Bootstrap 4?

Adding Bootstrap Classes and Styling to Your Webpage

Setting up Images within Bootstrap.

Creating an Alert in Bootstrap

Discovering Component Badges in Bootstrap.

Setting up Breadcrumbs Using Bootstrap Components

Colorful Buttons with Bootstrap

Using Cards within Bootstrap

Creating a slideshow with Bootstrap Carousel

Adding and Collapsing Elements Using Bootstrap

Adding a Dropdown Fluxionality in Bootstrap

Setting up Forms in Bootstrap and Field Style

Standing out with the Bootstrap Components JumboTron

Styling HTML Lists with Bootstrap

Creating a Modal Pop-up using Bootstrap

Creating a Responsive Bootstrap Nav Code

Creating Mobile Responsive Navbar Using Bootstrap

Creating Single Page Nav Scroll using Bootstrap Scrollspy

Adding Pagination in Bootstrap

Adding ToolTips and Pop-over in Bootstrap

Adding Spinners and Progress Bars with Bootstrap 4 Styles

Exploring Bootstrap Components

Setting up a Single-page Website from Scratch

Adding a Responsive Bootstrap Navbar

Getting Social Icons with FontAwesome for the Website

Cascading Style Sheets (CSS) Styles for Sections Responsive Website with Bootstrap Styling

Creating a Responsive Website Using Bootstrap Cards

Creating Webpages Columns and Rows Using the Bootstrap Grid

Adding a Slideshow with the Bootstrap Carousel Component

Creating a Custom Bootstrap Contact Form Using Bootstrap Form Styling Classes

Creating Responsive Website Using Bootstrap

Creating a Single-page Website with Scrollspy

Complete Overview of Responsive Website from Scratch

Applying jQuery to Your Web Pages

What is jQuery and How to Write jQuery Code?

Why Use jQuery?

JavaScript Versus jQuery and How to Use jQuery to Write Codes?

What is Document Ready and When to Use it?

Common jQuery Methods and How to Code in jQuery?

jQuery Arrows Methods

Creating New Elements for the Page with jQuery Prepend() and Append() Methods

Inserting Elements in jQuery

Updating and Adding jQuery Attributes

Creating an Element jQuery

Returning Field Values

Removing Elements from the Page with the jQuery Remove() and Empty() Methods

Creating a jQuery Dynamic List - Coding Challenge

Learning More about Code in jQuery.

Setting Images Attributes with jQuery

Checkbox - Coding Challenge

Setting Mouse Events with jQuery

Setting Keyboard Events with jQuery and Adding Event Listeners with jQuery

Adding Event Listeners in jQuery

Setting jQuery Effects – Hide, Show, and Fade

Setting up the jQuery Slide Effect

Using the jQuery Animate Method to Move Elements

Creating Animations - Coding Challenge

What is jQuery AJAX and Making AJAX Request Using jQuery Load() and Get() Methods

Trying AJAX with jQuery - Coding Challenge

Looping through jQuery Objects

Traversing the Document Object Model (DOM) Tree with jQuery

Using Filters to Find Elements with jQuery

Learning more about jQuery with Code Snippets and Examples

Creating a Simple Website from Scratch

Tools and Resources

Creating a Simple Cascading Style Sheets (CSS) Website

Creating a Three-column Website

Creating a Three-column Website Using Flexbox

Creating a Three-column Website Using Cascading Style Sheets (CSS) Grid

Creating an HTML Form Using Cascading Style Sheets (CSS) Grid

Website Review and Conclusion

Creating a Three-column Website from Scratch

Creating a Three-column Design Website from Scratch

Website Planning

Setting up the HTML Structure

Applying Cascading Style Sheets (CSS) to HTML

Setting up Page Content Columns

Creating a Page Footer Using Cascading Style Sheets (CSS)

Creating Responsive Columns Using Cascading Style Sheets (CSS)

Creating a Navbar Maker using Cascading Style Sheets (CSS)

Creating a Responsive Navbar using Cascading Style Sheets (CSS)

Final Code Review Updates.

Creating a Website from Scratch with a Fat Footer Design using the Flex Property

Fat Footer Website Design

Setting up the HTML Code

Website Wireframe

Adding HTML Pages from a Wireframe.

Setting up Cascading Style Sheets (CSS) for a Page

Setting up the Header and Footer Style

Setting Up the Logo and Nav in the Header

Creating Footer Styling using Cascading Style Sheets (CSS)

Adding FontAwesome Social Icons

Adding Copyright to the Footer

Conclusion – Fat Footer Website with the Flex Property

Creating a Cascading Style Sheets (CSS) Grid Website with Flex Navbar

Modern Website Design with Cascading Style Sheets (CSS) Grid Site

Website Planning and Wireframe

Creating an HTML Page Structure

Adding Dummy Content using HTML

Adding a Cascading Style Sheets (CSS) Grid

Mobile-first Responsive Design

Creating a Responsive Navbar

Applying Styling Using Cascading Style Sheets (CSS)

Creating a Header and Footer Using Cascading Style Sheets (CSS)

Adding Color and Font Style

Conclusion – Cascading Style Sheets (CSS) Grid

Creating a Single-page Website with a Sticky Bottom Navbar

Single-page Site with a Sticky Navbar

Setting up HTML for Webpage

HTML Page Structure

Creating a Page Header Using Cascading Style Sheets (CSS)

Creating a Home Section Using Cascading Style Sheets (CSS)

Styling Sections Using Cascading Style Sheets (CSS)

Creating a Web Form

Setting a Page Footer

Creating Sticky Navbar

Making the Website Responsive using Cascading Style Sheets (CSS)

Modern Web Design with HTML5, CSS3, and JavaScript

By : Laurence Svekis

Modern Web Design with HTML5, CSS3, and JavaScript

By: Laurence Svekis

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access