Description

Learn all the core fundamentals of modern web design, covering all the commonly used syntax for HTML, CSS, JavaScript, and JavaScript DOM with the help of this beginner-friendly course. Go from a static web page to an interactive one with JavaScript. This course is designed to get you started quickly and easily with creating web pages.

JavaScript code runs your browser as your HTML page loads. Adding JavaScript to your code can improve the user experience of the web page. This course will cover the basics of getting started with JavaScript, HTML, and CSS and the code syntax to write JavaScript code. JavaScript is a set of instructions you can add to your code to let the browser know what to do next. It covers the core concepts of JavaScript so that you can try the code and get familiar with what it does. Using JavaScript, you can access the HTML DOM in the browser, which allows you to interact and manipulate web page content. JavaScript creates the interactive and dynamic content seen today on all major modern web pages. Learn what CSS is and how you can style your web pages with Cascading Style Sheets (CSS). HTML provides a structure for your webpage; CSS allows you to style your page. Design the page with your style, set up page layouts, add colors, fonts, and more. Present your webpages as you want them to look, independent of the HTML; you can make your web content look and style as you imagine it should. You will also learn Document Object Model (DOM), which is a programming interface for HTML documents; that is, the logical structure of a page and how the page content can be accessed and manipulated. By the end of the course, you can start coding quickly and focus on designing your interactive and dynamic web pages. All resources and code files are placed here: https://github.com/PacktPublishing/Front-End-Web-Development-with-Modern-HTML-CSS-and-JavaScript

What You Will Learn

How to create webpages with HTML and CSS
Create interactive web content with JavaScript
Bring your web pages to life with code
Learn the basics of JavaScript
Learn how to build modern responsive websites
Create interactive and dynamic web pages

Audience

This course is for beginners in web design and for anyone who wants to learn more about coding or for anyone curious to learn HTML, CSS, and JavaScript. This course can also be taken by someone who wants to create interactive web pages and who wants a quick and effortless way to start coding.

Approach

In this practical hands-on course, you will have 9+ hours of premium content with source codes, tips, resources, and challenges to get the most out of this course.

Key Features

Understand how to create elements with code and add them to your web page * Learn to select elements from your web page with JavaScript * Learn to style your web pages with CSS

Github Repo

https://github.com/PacktPublishing/Front-End-Web-Development-with-Modern-HTML-CSS-and-JavaScript

About the Author

Laurence 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.

Course Outline

1. Introduction to Modern Web Design and Development with HTML, CSS, and JavaScript

1. Promotional Video

This video explains the course and the author.

2. Introduction to Getting Started with the Course and HTML Code

This video explains the guide to JavaScript code.

3. Getting Started with Web Design: Create Your Web Environment and Start Coding

This video explains how to create your first web environment and start coding.

4. How to Create Your First HTML Page HTML Coding Beginners

This video explains how to create your first HTML.

5. What is an HTML Element; How HTML Works with HTML Samples

This video explains HTML elements and how HTML works with HTML samples.

6. Start with HTML Headings Common Tags HTML

This video explains HTML headings common tags.

7. Create HTML Self-Closing Tags and How They Work

This video explains how to create HTML self-closing tags and how they work.

8. Setting Element Attributes in HTML Code

This video explains setting element attributes in HTML code.

9. How to Create Links HTML Hyperlinks HTML Links Anchor Tag

This video explains how to create links HTML hyperlinks HTML links anchor tag.

10. Adding Images to HTML Pages

This video explains adding images to HTML pages HTML images.

11. HTML Lists Adding Content Lists with HTML Lists

This video explains adding content lists with HTML lists.

12. What Are HTML Tables and How to Use Tables to Present Readable Content

This video explains HTML tables and how to use tables to present readable content.

13. HTML5 New Semantic Elements Meaning in the Element Tag Name

This video explains HTML 5 new semantic elements.

14. How to Create a Simple HTML Webpage

This video explains how to create a simple HTML webpage.

15. HTML Online Create a GitHub Page Create Your First Webpage on GitPages

This video explains how to create a GitHub page. Create your first webpage on GitPages.

2. Style Your Webpages with Cascading Style Sheets

1. Introduction to Getting Started with CSS

This video explains getting started with CSS.

2. Adding Styling to Your HTML with CSS Code for Beginners

This video explains adding styling to your HTML with CSS code for beginners.

3. Styling Overview Get Styling with CSS

This video explains styling overview get styling with CSS.

4. Colors Background and Font Color with CSS Update HTML Element Colors

This video explains colors background and font colors with CSS.

5. What Is the CSS Box Model - Box Model Border Padding Margin

This video explains box model border padding margin.

6. Text Options with CSS Code Setting Properties and Value to Transform Text

This video explains text options with CSS code setting properties and values to transform text.

7. Adding Fonts and Font Styles to Your Webpage Elements with CSS

This video explains adding fonts and font styles to your webpage elements with CSS.

8. Link States Pseudo-Classes Setting Different States with CSS

This video explains link states pseudo-classes setting different states with CSS.

9. How to Set Display Properties for Page Elements CSS Styling Code Examples Inline

This video explains how to set display properties for page elements CSS styling code examples inline.

10. CSS Position Static Relative Fixed Absolute Sticky Examples

This video explains CSS position static relative fixed absolute sticky examples.

11. CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats

This video explains CSS float setting floats in CSS setting left-right and no clearing floats.

12. More Useful CSS Properties such as z-index, outline, overflow, max-width, and More

This video explains properties such as z-index, outline, overflow, max-width, and more.

13. CSS Combinators to Select Elements from Your HTML Page Options and Examples

This video explains how CSS Combinators select elements from your HTML page options and examples.

14. Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content

This video explains examples of common CSS pseudo elements.

15. How to Create a Simple CSS Styled Website Responsive Website CSS Float

This video explains how to create a simple CSS styled website responsive website CSS float.

16. Creating a Responsive Website with CSS Flexbox Setup Three Column Design Site Example

This video explains creating a responsive website with CSS Flexbox setup three column design site example.

17. How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS

This video explains how to create a fully responsive website with CSS Grid modern web design CSS.

3. Getting Started with JavaScript

1. Introduction to Coding JavaScript Making Pages Interactive

This video explains an introduction to coding JavaScript and making pages interactive.

2. Getting Started with JavaScript Introduction to JavaScript Code with Examples

This video explains JavaScript code with examples.

3. How to Set Up Your Live Server Local Web Design Setup for HTTP Local Pages

This video explains setting up your live server local web design setup for HTTP local pages.

4. JavaScript Variables Let and Const and How to Assign Values to Declare Variables

This video explains how to assign values to declare variables.

5. What Are JavaScript Data Types and How to Set Datatypes Basic Data Types of Strings

This video explains JavaScript data types and how to set datatypes basic data types of strings.

6. JavaScript Objects and Arrays to Store Multiple Values in the Same Variable

This video explains JavaScript objects and arrays to store multiple values in the same variable.

7. Examples of Operators in JavaScript Code and How Operators Work

This video explains examples of operators in JavaScript code how operators work.

8. What JavaScript Functions Are and How to Pass Arguments into a Function and Return

This video explains JavaScript functions and how to pass arguments into a function and return them.

9. JavaScript Conditions Applying Logic in Code in JavaScript Example

This video explains JavaScript conditions by applying logic in code in JavaScript example.

10. Adding Loops to Your JavaScript Code with Examples of Loop Methods

This video explains adding loops to your JavaScript code with examples of loop methods.

4. JavaScript and the DOM Document Object Model (DOM)

1. Introduction to JavaScript DOM with Coding Examples

Document Object Model (DOM) is a programming interface for HTML documents; that is, the logical structure of a page and how the page content can be accessed and manipulated. In this video, you will learn how to create fully interactive content that responds to the user.

2. Introduction to the DOM and the DOM Tree with JavaScript

This video explains the DOM tree with JavaScript.

3. Element Selection from Webpages with JavaScript Code Examples

This video explains element selection from webpages with JavaScript code examples.

4. JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code

This video explains JavaScript element manipulation DOM select and update your page elements with code.

5. How to Set Styling Attributes with JavaScript Code - Update Webpage Elements

This video explains how to set styling attributes with JavaScript code - update webpage elements.

6. DOM and Form Elements Getting Values from Input Fields with JavaScript Code

This video explains DOM and form elements getting values from input fields with JavaScript code.

7. DOM Element Event Listeners Create Interactive Webpages with JavaScript

This video explains DOM element event listeners create interactive webpages with JavaScript.

8. How to Add Event Listeners to Your Webpage Elements with JavaScript Code

This video explains how to add event listeners to your webpage elements with JavaScript code.

9. Setting Page Event Listener for DOM Content Loaded and keyup and keydown Events

This video explains setting page events listener for DOM content loaded and keyup and keydown events.

10. How to Create Page Elements with JavaScript Code

This video explains how to create page elements with JavaScript code.

11. Update Element Position and Move Page Elements with JavaScript Code

This video explains how to update element position and move page elements with JavaScript code.

12. How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation

This video explains the process of adding animation to your webpage elements using JavaScript requestAnimation.

5. How to Create a Modern Website from Scratch - Responsive Web Design

1. Promotional Video - Creating a Website from Scratch

This video is an introduction about how you will learn to create a modern and dynamic website with a responsive navigation bar.

2. Website from Scratch with Floats

This video explains a website from scratch with floats.

3. Editor Setup and Code

This video explains editor setup and code.

4. HTML Structure Tags

This video explains HTML structure tags.

5. Create an HTML Page

This video explains how to create an HTML page.

6. Use CSS to Design a Responsive NavBar for the Website

This video explains how to use CSS to design a responsive NavBar for the website.

7. Add Google Fonts Select from Web Fonts CSS Web Design

This video explains adding Google Fonts select from web fonts CSS web design.

8. How to Style Main Webpage Content Create Columns

This video explains how to style main webpage content create columns.

9. How to Add Columns to Webpage Footer CSS Web Design Lesson

This video explains how to add columns to webpage footer CSS web design lesson.

10. Add JavaScript for Navbar Functions

This video explains how to add JavaScript for navbar functions.

Course Images

Front-End Web Development with Modern HTML, CSS, and JavaScript

By Packt

Booking options

Highlights