Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Modern Web Design with HTML5, CSS3, and JavaScript
Modern Web Design with HTML5, CSS3, and JavaScript

Modern Web Design with HTML5, CSS3, and JavaScript: Learn all the latest web development skills

Arrow left icon
Profile Icon Laurence Svekis
Arrow right icon
$199.99
Video Dec 2020 35hrs 10mins 1st Edition
Video
$199.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Laurence Svekis
Arrow right icon
$199.99
Video Dec 2020 35hrs 10mins 1st Edition
Video
$199.99
Subscription
Free Trial
Renews at $19.99p/m
Video
$199.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Key benefits

  • Design robust and fully responsive custom websites
  • Apply modern web design techniques with HTML5 and CSS3 using the latest syntax
  • Discover fun fonts in Cascading Style Sheets (CSS) and learn how to add Google Fonts to your website using Google Fonts CSS
  • Code proficiently with HTML and CSS

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

Who is this book for?

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.

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 IIFE) JavaScript function
  • Get to grips with the JavaScript Document Object Model (DOM) and practice challenging coding exercises

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Dec 30, 2020
Length: 35hrs 10mins
Edition : 1st
Language : English
ISBN-13 : 9781800563179
Languages :
Concepts :

What do you get with a video?

Product feature icon Download this video in MP4 format
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Dec 30, 2020
Length: 35hrs 10mins
Edition : 1st
Language : English
ISBN-13 : 9781800563179
Languages :
Concepts :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 317.97
Modern Web Design with HTML5, CSS3, and JavaScript
$199.99
Responsive Web Design with HTML5 and CSS
$78.99
The HTML and CSS Workshop
$38.99
Total $ 317.97 Stars icon

Table of Contents

19 Chapters
Introduction to Getting Started with Web Design Chevron down icon Chevron up icon
Creating Web Pages with HTML5 Chevron down icon Chevron up icon
HTML Challenges Chevron down icon Chevron up icon
Mobile-first Responsive Design in Cascading Style Sheets (CSS) and Web Design Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Cascading Style Sheet (CSS) Layouts FlexBox and CSS Grid Chevron down icon Chevron up icon
Common Cascading Style Sheets (CSS) Questions and Answers for Interview Preparation Chevron down icon Chevron up icon
Cascading Style Sheets (CSS) Challenges Chevron down icon Chevron up icon
JavaScript Introduction Chevron down icon Chevron up icon
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) Chevron down icon Chevron up icon
Advanced Coding in JavaScript Chevron down icon Chevron up icon
Common JavaScript Questions and Answers for Interview Preparation and Practice Chevron down icon Chevron up icon
Exploring Rapid Web Design with the Bootstrap 4 Frontend Framework Chevron down icon Chevron up icon
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 Chevron down icon Chevron up icon
Creating a Simple Website from Scratch Chevron down icon Chevron up icon
Creating a Three-column Website from Scratch Chevron down icon Chevron up icon
Creating a Website from Scratch with a Fat Footer Design using the Flex Property Chevron down icon Chevron up icon
Creating a Cascading Style Sheets (CSS) Grid Website with Flex Navbar Chevron down icon Chevron up icon
Creating a Single-page Website with a Sticky Bottom Navbar Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How can I download a video package for offline viewing? Chevron down icon Chevron up icon
  1. Login to your account at Packtpub.com.
  2. Click on "My Account" and then click on the "My Videos" tab to access your videos.
  3. Click on the "Download Now" link to start your video download.
How can I extract my video file? Chevron down icon Chevron up icon

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package? Chevron down icon Chevron up icon

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

  1. Video
  2. Format watched (HTML, MP4, streaming)
  3. Chapter or section that issue relates to (if relevant)
  4. System being played on
  5. Browser used (if relevant)
  6. Details of support
Why can’t I download my video package? Chevron down icon Chevron up icon

In the even that you are having issues downloading your video package then please follow these instructions:

  1. Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
  2. Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.