↑Top

Modern Webpage Tutorial

HTML Basics

HTML (HyperText Markup Language) is the standard markup language for creating webpages. It describes the structure of a web page.

Elements

Elements are the building blocks of a webpage. They consist of: a start tag, the content, end tag. These contain text, elements or both.

Secure coding practice in Forms

Only alphanumeric characters are allowed. Enter a valid email address. Must contain at least one number, one uppercase and one lowercase letter, and at least 8 to 20 characters. Avoid entering sensitive information here.

CSS Basics

CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the color, font, and spacing of your content.

Color Schemes

This section demonstrates different ways to set colors in CSS.

Example Color Box

Layout Techniques

This section shows different layout techniques using Flexbox and Grid.

Flex Item 1
Flex Item 2
Flex Item 3
Grid Item 1
Grid Item 2
Grid Item 3

JavaScript Basics

JavaScript is a programming language that adds interactivity to your website. It can update and change both HTML and CSS.

Working with the DOM

The DOM (Document Object Model) allows JavaScript to interact with HTML Elements.

Hi!

Event Listeners

Events are used to handle interactions in JavaSCript.

Toggle Event

JavaScript Libraries

JavaScript libraries are collections of pre-written JavaScript code that provide developers with reusable functions, methods, and components. These libraries simplify the development process by offering tools to handle common programming tasks, such as manipulating the DOM (Document Object Model), making HTTP requests, creating visualizations, and managing application state. Instead of writing code from scratch, developers can leverage these libraries to build complex functionalities more efficiently.

List of some popular libraries:

  • React
  • jQuery
  • Lodash
  • D3
  • Axios
  • Moment
  • Three
  • Redux
  • Chart
  • Vue

How Can I Install Libraries?

We will be using Vite to install our packages. Using the command npm create vite@latest

This command prompts us to enter a project name, select a framework (React, Vue, Svelte, etc)

Once completed you navigate to and run your application:

  1. npm create vite@latest
  2. cd your-project-name
  3. npm install
  4. npm run dev

React JS

React JS is an open-source JavaScript library for building user interfaces, especially single-page applications. Developed by Facebook, it helps create dynamic web apps with a component-based architecture, using a virtual DOM for efficient updates and JSX for writing HTML-like code in JavaScript.

  • Component-Based Architecture: Reusable UI components.

  • Virtual DOM: Efficient updates to the actual DOM.

  • JSX Syntax: HTML-like code in JavaScript.

  • State Management: Dynamic response to changes.

  • Unidirectional Data Flow: Data flows from parent to child components.

  • Ecosystem: Tools and libraries like React Router and Redux.

  • Community Support: Extensive resources and active community.