Frontend web developer Modern HTML CSS JavaScript

CSS

What CSS is and how you can style your web pages with Cascading Style Sheets. HTML provides structure for your webpage, CSS allows you to style your page. Design the page with your style, setup page layouts, add colors, fonts, and more. Present your web pages as you want them to look, independent of the HTML you can make your web content look and style as you imagine it should.

• Explore how to add CSS to your HTML page

• How to add colors to page element backgrounds and text

• What the box model is and how you can apply borders, margins, and padding to any page element.

• Style the text, update the font and customize your text output.

• Update you links, adding Pseudo classes to your page elements

• How to apply display properties, position and floats to set up your page layout.

• Really useful CSS properties explored

• CSS combinators for selection of elements.

• How to build a responsive webpage with CSS float, CSS grid and CSS flexbox.

Adding Styling to your HTML

• Google Chrome Dev Tools

• Adding Styling to HTML tags style <style> link to CSS file

• CSS rule CSS Syntax (Selector) (Declaration) {Property:value}

• Element Selection by tag name, id, class

Styling Overview Get Styling with CSS

• Comments in Code /* */

• find help with CSS

• Google Fonts

Colors Background and Font Color

• Colors - Color types named colors HEX RGB RGBA

• Background - color - image - repeat - attachment - position - background shorthand

Box Model Border Padding Margin

• Box Model - Borders - Margins - Padding - Height and Width

Text options with CSS code setting properties and value to transform text and text align

• Text - text-align text-decoration text-transform

• Adding Fonts and Font Styles to your web page elements with CSS

• Fonts - font-style Google Fonts

Link States Pseudo-Classes

Link States Pseudo-Classes setting different states with CSS

• Link states - a:link a:visited a:hover a:active

Display Properties

• Display Properties - inline - none - block

CSS Position static relative fixed absolute sticky examples

• Position : static relative fixed absolute sticky

CSS Float setting floats in CSS setting left right and none clearing floats

• Float and clear left right and none

More Useful CSS Properties zindex outline overflow maxwidth and more

• Max Width

• Overflow

• Z-index

• outline

CSS Combinators to select elements from your HTML page options and examples

• CSS combinators for selection - space child selector >

Examples of common CSS Pseudo Elements firstLetter firstLine after adding content

• Pseudo-Elements - ::first-line , ::first-letter, ::after

How to create a simple CSS styled website Responsive Website CSS Float

Creating a Responsive Website with CSS Flexbox setup 3 column design site example

How to create a fully responsive website with CSS Grid Modern web design CSS

JavaScript Code

JavaScript code runs your browser as your html page loads. Adding JavaScript to your code can improve the user experience of the web page. Go from a static webpage to an interactive one with JavaScript. This section will cover the basics of getting started with JavaScript and the code syntax to write JavaScript code. JavaScript is a set of instructions you can add in your code to let the browser know what to do next.

• Variables are at the heart of coding

• The different data types of JavaScript and how JavaScript can set the data type.

• The power of Objects and Arrays and how you can use them to store multiple values in one variable.

• Operators to provide calculations within your code

• Functions to run predefined blocks of code as needed.

• Conditions for logic within your code

• Loops to save time and iterate over blocks of code

Getting Started with JavaScript introduction to JavaScript code with examples

How to setup your LiveServer local web design setup for http local pages.

JavaScript Variables Let and Const and how to assign values to variables declare variables

• Variables Let and Const

Data types describe the different types or kinds of data that we're gonna be working with and storing in variables. In Javascript, there are five basic, or primitive, types of data. The five most basic types of data are strings, numbers, booleans, undefined, and null. We refer to these as primitive data types

what are JavaScript data types and how to set datatypes basic data types strings numbers booleans

JavaScript Objects and Arrays for storing multiple values in the same variable

• Arrays and Objects

An operator is capable of manipulating a certain value or operand. Operators are used to perform specific mathematical and logical computations on operands.

Examples of operators in JavaScript code how operators work

What JavaScript functions are how to pass arguments into a function and return results

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

JavaScript and the DOM

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. Bring your web pages to life with JavaScript and connect to the web page elements. Create fully interactive content that responds to the user. Create Dynamic web page content that can change without page refresh and present new elements and updated content to the user. Improve your web users experience with JavaScript and the DOM.

• What is the DOM Document Object Model

• How to select elements from your webpage with JavaScript

• Manipulate and change your page elements with JavaScript

• How to set styling attributes for elements

• Make them interactive with Event listeners

• DOM events and Page events with JavaScript

• How to create elements with code and add them to your webpage

• Moving elements and animation of elements.

Introduction to the DOM

Document Object Model (DOM)

• DOM tree

JavaScript and the DOM

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. Bring your web pages to life with JavaScript and connect to the web page elements. Create fully interactive content that responds to the user. Create Dynamic web page content that can change without page refresh and present new elements and updated content to the user. Improve your web users experience with JavaScript and the DOM.

• What is the DOM Document Object Model

• How to select elements from your webpage with JavaScript

• Manipulate and change your page elements with JavaScript

• How to set styling attributes for elements

• Make them interactive with Event listeners

• DOM events and Page events with JavaScript

• How to create elements with code and add them to your webpage

• Moving elements and animation of elements.

Introduction to the DOM

Document Object Model (DOM)

• DOM tree

Element Selection from webpages with JavaScript code  examples

• Element Selection

• Multiple Elements selection

JavaScript Element Manipulation DOM select and update your page elements with code

• Element Manipulation

How to set Styling attributes with JavaScript code - update web page elements

Element styling attributes

• Element Manipulation

DOM and Form Elements getting values from input fields with JavaScript code

• Input Values

DOM Element Event Listeners create interactive web pages with JavaScript

• Adding event listeners

• onclick vs addeventlistener

How to add event listeners to your web page elements with JavaScript code

JavaScript DOM Events

Setting page events listen for DOM content loaded and keyup and keydown events with JavaScript.

How to create page elements with JavaScript code

Create Elements JavaScript

Update element position and move page elements with JavaScript code

Move Page Elements.

How to add animation to your webpage elements using JavaScript requestAnimation Frame

Animation of Page Elements

Custom Map Function

Exercise: Implement a custom map function that works similarly to Array.prototype.map.

Code:

Array.prototype.myMap = function(callback) {

const result = [];

for (let i = 0; i < this.length; i++) {

result.push(callback(this[i], i, this));

}

return result;

};

// Test the custom map function

const numbers = [1, 2, 3, 4];

const doubled = numbers.myMap(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

Explanation:

• The myMap function is added to the Array.prototype, making it available to all arrays.

• It iterates through the array, applying the callback function to each element and storing the result in a new array.

• This custom implementation mirrors the behavior of the native map function.

Implementing a Simple Promise

Exercise: Create a simple implementation of a Promise that supports .then chaining.

Code:

class MyPromise {

constructor(executor) {

this.queue = [];

this.errorHandler = () => {};

this.finallyHandler = () => {};

executor(this.onResolve.bind(this), this.onReject.bind(this));

}

onResolve(data) {

this.queue.forEach(callback => {

data = callback(data);

});

this.finallyHandler();

}

onReject(error) {

this.errorHandler(error);

this.finallyHandler();

}

then(callback) {

this.queue.push(callback);

return this;

}

catch(callback) {

this.errorHandler = callback;

return this;

}

finally(callback) {

this.finallyHandler = callback;

return this;

}

}

// Test the MyPromise implementation

const promise = new MyPromise((resolve, reject) => {

setTimeout(() => {

resolve("Data received!");

}, 1000);

});

promise

.then(data => {

console.log(data); // "Data received!"

return "Processed Data";

})

.then(data => {

console.log(data); // "Processed Data"

})

.catch(error => {

console.log("Error:", error);

})

.finally(() => {

console.log("Promise completed.");

});

Explanation:

• MyPromise mimics the behavior of native JavaScript Promises.

• It stores then, catch, and finally callbacks in respective queues or variables.

• The executor function is immediately executed, and depending on its outcome, either onResolve or onReject is called.

• The .then method chains callbacks, allowing for sequential data processing.

• The .finally method runs after the promise settles, regardless of its outcome.

Deep Cloning an Object

Exercise: Write a function deepClone that creates a deep copy of a given object. The deep clone should not share references with the original object.

Code:

function deepClone(obj) {

if (obj === null || typeof obj !== 'object') {

return obj;

}

if (Array.isArray(obj)) {

return obj.map(item => deepClone(item));

}

const clone = {};

for (let key in obj) {

if (obj.hasOwnProperty(key)) {

clone[key] = deepClone(obj[key]);

}

}

return clone;

}

// Test the deepClone function

const original = {

name: "John",

age: 30,

details: {

hobbies: ["reading", "sports"],

address: {

city: "New York",

country: "USA"

}

}

};

const clone = deepClone(original);

clone.details.hobbies.push("coding");

console.log(original.details.hobbies); // ["reading", "sports"]

console.log(clone.details.hobbies); // ["reading", "sports", "coding"]

Explanation:

• The function deepClone checks if the passed value is an object or an array. If it's not, it simply returns the value.

• If the value is an array, it maps through the array and recursively calls deepClone on each item.

• For objects, it iterates over each key, and recursively clones each value.

• This approach avoids shallow copying and ensures that nested objects and arrays are fully cloned.

Debouncing Function

Exercise: Implement a debounce function that delays the execution of a function until after a specified wait time has elapsed since the last time it was invoked.

Code:

function debounce(fn, delay) {

let timeoutId;

return function(...args) {

if (timeoutId) {

clearTimeout(timeoutId);

}

timeoutId = setTimeout(() => {

fn(...args);

}, delay);

};

}

// Test the debounce function

function onResize() {

console.log('Resized:', new Date().toLocaleTimeString());

}

window.addEventListener('resize', debounce(onResize, 500));

Explanation:

• The debounce function returns a new function that, when invoked, delays the execution of the original function (fn) by the specified delay in milliseconds.

• If the returned function is called again before the delay period ends, the previous timeout is cleared, effectively resetting the timer.

• This technique is useful for limiting the rate at which a function is executed, such as during window resizing or input events.