Welcome to the Web Programming Principles Repository!

This resource is designed for students to explore core programming principles and modern web development using JavaScript ES6, HTML, CSS, DOM, AJAX, and JSON. It includes practical examples of ES6 features and essential web technologies to build dynamic web applications.

Description

This repository contains several examples that cover JavaScript ES6 features and essential web development topics such as:

• Introduction to JavaScript syntax
• Arrow functions
• Object-Oriented Programming (OOP) with classes
• Promises for asynchronous code
• Destructuring assignment
• JavaScript modules
• HTML fundamentals, forms, and media
• DOM manipulation
• And more!

Each example is labeled as example<number>.html (e.g., example1.html for Introduction to JavaScript), corresponding to different lessons. This structure allows you to easily follow along with the course and build a solid understanding of JavaScript and web programming concepts.

How to Use

To run and open the examples, follow these steps:

1. Clone the repository to your local machine:

   git clone https://github.com/mouraleonardo/webprogrammingprinciples.git
   

2. Navigate to the repository folder:

   cd webprogrammingprinciples
   

3. Open an example file in your browser:

Each example is located in a separate HTML file. Simply double-click the example<number>.html file you want to run, or open it directly through your browser.

Example: To view the example for lesson 1, open the file example1.html.

4. Run JavaScript code in the browser console:

You can open your browser's developer tools (press F12 or Ctrl+Shift+I in most browsers) to view the console and check the JavaScript output of each example.

---

Example Files:

• example1.html: Introduction to JavaScript and basic syntax.
• example2.html: Understanding ES6 arrow functions.
• example3.html: Javascript OOP working with classes.
• example4.html: Working with promises for asynchronous code.
• example5.html: Destructuring assignment for arrays and objects.
• example6.html: Modules in JavaScript.
• example7.html: HTML fundamentals.
• example8.html: HTML Forms.
• example9.html: HTML 5.
• example10.html: HTML Tables Tutorial.
• example11.html: HTML Media Tutorial.
• example12.html: HTML vs XHTML.
• example13.html: HTML Element Reference.
• example14.html: Interactive Document Object Model (DOM) Programming Tutorial
• example15.html: EcoTravel - Discover the World, Sustainably (Assignment Sample)
• example16.html: CSS Tutorial.
• example17.html: Responsive Web Design Tutorial.
• example18.html: Responsive Web Design - Images.
• example19.html: HTML Forms and Input Controls.
• example20.html: HTML Form Validation with Examples.
• ... more to be added as the course progresses.

---

Prerequisites:

To make the most of these examples, you will need:

• A modern web browser (e.g., Chrome, Firefox, or Edge) to run the HTML/JavaScript files.

• Basic knowledge of JavaScript and web development (HTML, CSS).

Local Server Setup Guide

Initialize npm in the repository:

npm init -y

Install the http-server package:

npm install -g http-server

Run the server:

http-server

By default, this will start the server on port 8080. You can access the examples in your web browser at http://localhost:8080.

Accessing Example Files

Once the server is running, you can navigate to any example file in your browser. For instance, to view the example for lesson 1, go to:

http://localhost:8080/index.html

This setup allows you to explore the examples while simulating a web server environment, making it easier to test AJAX functionality and more complex web applications.