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
₹800 per month
Video Dec 2020 35hrs 10mins 1st Edition
Video
₹14896.99
Subscription
Free Trial
Renews at ₹800p/m
Arrow left icon
Profile Icon Laurence Svekis
Arrow right icon
₹800 per month
Video Dec 2020 35hrs 10mins 1st Edition
Video
₹14896.99
Subscription
Free Trial
Renews at ₹800p/m
Video
₹14896.99
Subscription
Free Trial
Renews at ₹800p/m

What do you get with a Packt Subscription?

Free for first 7 days. ₹800 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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 Packt Subscription?

Free for first 7 days. ₹800 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

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
₹800 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
₹4500 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 ₹400 each
Feature tick icon Exclusive print discounts
₹5000 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 ₹400 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 23,685.97
Modern Web Design with HTML5, CSS3, and JavaScript
₹14896.99
Responsive Web Design with HTML5 and CSS
₹5883.99
The HTML and CSS Workshop
₹2904.99
Total 23,685.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

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.