HTML, CSS and JavaScript: The Complete Web Developer Course

Name: HTML, CSS and JavaScript: The Complete Web Developer Course
Rating: 4.0 (723 reviews)

A Comprehensive Guide for Beginners interested in learning HTML, CSS, & JavaScript to Build Interactive Web Pages.

Created byOnline Training Plus, John Bura, Mammoth Interactive

Last updated 10/2022

English

English [Auto],

What you'll learn

Master front-end development using HTML, CSS, & JavaScript
Add Client-Side interactivity to Web Pages using JavaScript
Create stunning, responsive layouts using CSS

Course content

3 sections • 31 lectures • 2h 3m total length

Course requirements and format2:38
Learn the building blocks of the web with html in this online course, based on a one-hour Udemy module, accessible on Mac, PC, or mobile, with short 2–5 minute tutorials.
What is JSBIn3:11
Learn the basics of HTML, CSS, and JavaScript with real-time editing in the J.S. Bean editor, and understand how structure, styling, and functionality come together.
Setting up the HTML Document2:36
Declare the doctype in capitals and add the html opening and closing tags to define a valid html document, and include a body tag for content.
Setting up a link1:32
Add a hyperlink by using the a tag with href to the target website, insert link text, and click to open the site.
More than one style3:27
Learn to style HTML elements with inline CSS using the style attribute, setting color, background-color, and font-family, and chaining multiple styles with semicolons for techniques like negative space.
Adding an image2:58
Learn to add an image by copying its address, using the self-closing img tag with a src attribute, and adjust width or height to resize, with line breaks via br.
Adding a link to the image1:50
Learn to turn an image into a clickable link by using the a tag, preview the hand, and clean up extra text to finalize a linked image.
Submit buttons2:56
The lecture shows how to add a submit button in HTML, replace a date input, assign a name and an id, and prepare the element for JavaScript interaction.
Script tags and javascript3:22
Script tags and JavaScript evolved from embedding in HTML to using separate JS files for functionality, while CSS moves to separate CSS files.

01. Course Requirements3:57
Learn live, code-first web development in an hour, using real-time edits of HTML, CSS, and JavaScript on JS Been for efficient, hands-on learning.
HTML and style points4:45
Learn how HTML provides page structure and how CSS styles it with inline properties like color, background color, font family, and font size.
Adding the CSS4:44
Explore how CSS styles HTML elements using curly brackets, selectors like h1 and p, and properties such as color, background-color, font-family, and font-size to create clean, efficient layouts.
IDs5:14
Define and apply ids to HTML paragraphs to style individual elements, demonstrating id naming, case sensitivity, and the rule that an id overrides general styles, with one id per tag.
Classes2:38
Apply CSS classes to multiple tags to style paragraphs consistently, reuse formatting across a site, and update properties like font size, color, or italics with a single rule.
Font Families5:02
Explore font families in CSS, distinguish serif from sans serif, and try cursive, mono space, and fantasy fonts with Verdana, Georgia, Impact, and Arial.
07. Colors in CSS5:43
Learn how to apply css colors using rgb values and hex codes, including off blacks and off whites, with tips on hue-saturation-brightness and alpha for transparency.
08. Padding in CSS3:04
Explore how padding in CSS shapes layout by adjusting top, right, bottom, and left padding to create space around content. Learn practical examples and why padding matters for web design.
09. Text Align and Transforms3:04
Explore how padding adds space around content using padding-top, padding-right, padding-bottom, and padding-left in CSS. See how changing these values affects spacing and element movement.
10. Margins and width5:32
Explore how margins, width, padding, and text alignment to center a responsive layout that adapts from small mobile screens to large displays.
11. Changing the body4:10
Set the body's width to 70% and center it with auto margins using css. Explore orange and rgb colors to illustrate negative space and theming in HTML, CSS, and JavaScript.
12. Latin Text Generator1:55
13. Build a Horizontal Menu7:51
Build a horizontal navigation menu by turning an unordered list into links, highlight the active item, and style with css using hover, padding, margin, float left, and uppercase Verdana typography.
14. Adding a background Image4:02
Learn to add a background image using CSS, choose from public domain pictures, set no-repeat, fix the background attachment, and adjust the background position for a center-aligned mountain scene.
15. Playing around with margins in CSS2:19
Experiment with css margins and padding, trying values like 10px, 30px, and negative numbers to see how layout shifts and alignment change, with orange against blue for contrast.

Adding in a button and function4:31
Add a button with on click to call a JavaScript function, declare the function, and use an alert to run code, noting case sensitivity and proper semicolon usage.
Scaling functions4:23
Scale your code by creating multiple separate functions, each handling a distinct task, and name them clearly to reflect their purpose. Prepare for real apps that may contain many functions.
Changing the text in JavaScript4:45
Change the text on a web page with a JavaScript function triggered by a button. Use getElementById to select a paragraph and set its innerHTML to update the content.
Variables5:36
Explore variables in JavaScript by declaring and initializing numbers and strings, concatenating them, and observing how JavaScript allows mixing data types and handling spaces in output.
Adding Variables5:25
Explore how to work with variables and arrays in JavaScript, including number and string arrays, indexing, undefined values, and keeping data types consistent.
Adding User input5:00
Learn how to add user input with a text input, give it an id, and retrieve its value using document.getElementById to update the display.
Variable Scope4:59
Explore variable scope in JavaScript by comparing global variables across the page with variables inside curly brackets, and see how functions, if statements, and for loops use them.

Requirements

No coding experience necessary
We will use a free online editor
Basic computer skills

Description

Do you need to master the art of front-end development?

Look no further. This course is your complete beginners guide to developing cutting-edge web pages that are fully mobile responsive.

The course branches into three sections.

1. Explore HTML5

Learn the composition of a web page and how a web browser interprets html code to display the visual elements of a page. Learn the core fundamental aspects of HTML syntax, to ensure you are well prepared for the remaining sections ahead.

2. Explore CSS3

Learn to add stunning design elements to really make web pages visually aesthetic. Learn a broad range of CSS attributes to make web pages completely mobile responsive, even on the trickiest of devices such as phones and tablets.

3. Explore JavaScript

Dive into adding interactive client-side functionality using JavaScript. JavaScript is an extremely powerful front-end programming language that can really help take web pages to another level. Learn how to add client-side validation to forms, animate images and objects, and manipulate both HTML and CSS.

Who this course is for:

Anyone who needs to learn to code
Anyone who needs to build a website

HTML, CSS and JavaScript: The Complete Web Developer Course

What you'll learn

Explore related topics

Course content

HTML Crash Course9 lectures • 25min

CSS Crash Course15 lectures • 1hr 4min

JavaScript Crash Course7 lectures • 35min

Requirements

Description

Who this course is for: