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

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

by Laurence Svekis
Released June 2022
Publisher(s): Packt Publishing
ISBN: 9781804618172

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

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.

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.

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 Modern Web Design and Development with HTML, CSS, and JavaScript
    1. Promotional Video
    2. Introduction to Getting Started with the Course and HTML Code
    3. Getting Started with Web Design: Create Your Web Environment and Start Coding
    4. How to Create Your First HTML Page HTML Coding Beginners
    5. What is an HTML Element; How HTML Works with HTML Samples
    6. Start with HTML Headings Common Tags HTML
    7. Create HTML Self-Closing Tags and How They Work
    8. Setting Element Attributes in HTML Code
    9. How to Create Links HTML Hyperlinks HTML Links Anchor Tag
    10. Adding Images to HTML Pages
    11. HTML Lists Adding Content Lists with HTML Lists
    12. What Are HTML Tables and How to Use Tables to Present Readable Content
    13. HTML5 New Semantic Elements Meaning in the Element Tag Name
    14. How to Create a Simple HTML Webpage
    15. HTML Online Create a GitHub Page Create Your First Webpage on GitPages
  2. Chapter 2 : Style Your Webpages with Cascading Style Sheets
    1. Introduction to Getting Started with CSS
    2. Adding Styling to Your HTML with CSS Code for Beginners
    3. Styling Overview Get Styling with CSS
    4. Colors Background and Font Color with CSS Update HTML Element Colors
    5. What Is the CSS Box Model - Box Model Border Padding Margin
    6. Text Options with CSS Code Setting Properties and Value to Transform Text
    7. Adding Fonts and Font Styles to Your Webpage Elements with CSS
    8. Link States Pseudo-Classes Setting Different States with CSS
    9. How to Set Display Properties for Page Elements CSS Styling Code Examples Inline
    10. CSS Position Static Relative Fixed Absolute Sticky Examples
    11. CSS Float Setting Floats in CSS Setting Left Right and None Clearing Floats
    12. More Useful CSS Properties such as z-index, outline, overflow, max-width, and More
    13. CSS Combinators to Select Elements from Your HTML Page Options and Examples
    14. Examples of Common CSS Pseudo Elements firstLetter firstLine After Adding Content
    15. 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
    17. How to Create a Fully Responsive Website with CSS Grid Modern Web Design CSS
  3. Chapter 3 : Getting Started with JavaScript
    1. Introduction to Coding JavaScript Making Pages Interactive
    2. Getting Started with JavaScript Introduction to JavaScript Code with Examples
    3. How to Set 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
    5. What Are 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
    7. Examples of Operators in JavaScript Code and How Operators Work
    8. What JavaScript Functions Are and How to Pass Arguments into a Function and Return
    9. JavaScript Conditions Applying Logic in Code in JavaScript Example
    10. Adding Loops to Your JavaScript Code with Examples of Loop Methods
  4. Chapter 4 : JavaScript and the DOM Document Object Model (DOM)
    1. Introduction to JavaScript DOM with Coding Examples
    2. Introduction to the DOM and the DOM Tree with JavaScript
    3. Element Selection from Webpages with JavaScript Code Examples
    4. JavaScript Element Manipulation DOM Select and Update Your Page Elements with Code
    5. How to Set Styling Attributes with JavaScript Code - Update Webpage Elements
    6. DOM and Form Elements Getting Values from Input Fields with JavaScript Code
    7. DOM Element Event Listeners Create Interactive Webpages with JavaScript
    8. 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
    10. How to Create Page Elements with JavaScript Code
    11. Update Element Position and Move Page Elements with JavaScript Code
    12. How to Add Animation to Your Webpage Elements Using JavaScript requestAnimation
  5. Chapter 5 : How to Create a Modern Website from Scratch – Responsive Web Design
    1. Promotional Video – Creating a Website from Scratch
    2. Website from Scratch with Floats
    3. Editor Setup and Code
    4. HTML Structure Tags
    5. Create an HTML Page
    6. Use CSS to Design a Responsive NavBar for the Website
    7. Add Google Fonts Select from Web Fonts CSS Web Design
    8. How to Style Main Webpage Content Create Columns
    9. How to Add Columns to Webpage Footer CSS Web Design Lesson
    10. Add JavaScript for Navbar Functions

Product information

  • Title: Front-End Web Development with Modern HTML, CSS, and JavaScript
  • Author(s): Laurence Svekis
  • Release date: June 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781804618172