Full Stack Web Development Foundations: Scratch to Advanced

Install and configure the required tools, including the exam server and its control panel, and set up MySchool database access with phpmyadmin for connecting the front end to the database.

Create your first web page in html by building the html structure (html, head, meta data, body) in Sublime, saving as .html, and viewing the result in a browser.

Learn to implement email and number input types, validate email format, and use plus minus increment for numbers, with front-end labeling and basic back-end considerations for identification.

Learn how HTML input types work, starting with text fields, collect user data, and use a label to style and reference the input for accessible forms.

Explore the text box and text area, learn how users type information, adjust the input size, and set default values and character limits, with a note on the placeholder.

Explore form input checkboxes, including labels and ids, enabling users to select gender options such as mail and female by checking and unchecking boxes on the same line.

Learn how radio buttons differ from checkboxes and how sharing the same name restricts selection to one option, as shown with a payment method example.

Learn to implement a date input with a calendar, label it clearly, and understand date and date time local formats for showing local time.

Place the image file in the same folder as the page, reference its exact name and extension in code, and provide alt text for when the image cannot display.

Learn how to attach files to a web page using the simple input type tag, including selecting, uploading, and displaying the file name when submitting online applications.

Learn how to create a password input field that hides characters as stars, emphasizes encrypted and protected passwords, and prepares for a future show password button.

Explore how to create and customize form buttons, including submit and reset inputs and the button element, and learn how value and name attributes control labeling, behavior, and clearing fields.

Create a hyperlink using the anchor tag to link to another site, such as Google.com, and add a title attribute to display a tooltip on hover.

Explore how placeholders provide hints in text, email, numbers, and password fields, disappearing as you type. The next unit covers front-end to back-end connections and database setup using BHP.

Explore cascading style sheets and their role in styling tags, understand types, and apply properties to control size, color, alignment, and appearance.

Understand the three css types: inline, internal, and external, and their priority, with inline highest, then internal, then external; learn to link external styles in the head.

Learn to style text by changing color, font size, and font family within a paragraph using inline style properties and font names from Google.

Learn how to style a textarea by configuring its rows and columns, understanding which attributes lie outside the style tag, and exploring the default view and related form controls.

Learn how to build and style a custom checkbox using containers, classes, and spans, including default checked states, hover effects, and hiding the browser’s default checkbox.

Learn to build and style a custom calendar in a separate file, using divs and classes like month, weekdays, and day, with unordered and ordered lists.

Explore styling the password field with -webkit-text-security and related features. See how typing switches display from dots to squares and learn practical password input design.

Learn to style and customize buttons with CSS, using a green background, white text, 20px padding, centered inline-block layout, 16px font, and border radius adjustable in pixels or percent.

Explore what JavaScript is and why it matters for web development. Clarify that JavaScript is not Java and learn how it controls page behavior, including button actions and speech.

See how JavaScript controls web page behavior by changing the text inside an HTML tag on a button click, using document.getElementById to access the element and update its inner content.

Learn how to replace an image using JavaScript to create a bulb on/off effect by swapping between off and on images with button clicks.

Discover how to control CSS properties like font size and color with JavaScript by updating element.style, and use functions to run code on events with live examples.

Explore how internal JavaScript writes and runs functions to manipulate web page elements, update text, and apply styles through script blocks, style attributes, and user events.

Learn to link an HTML page to an external JavaScript file using the script tag and src, and compare inline and internal scripts in the page.

Learn to build a password validator with JavaScript by validating lowercase, uppercase, numbers, and a minimum of eight characters, using a live pattern and a dynamic message box.

Validate birth dates in day/month/year format using JavaScript, read the input from the field, split by slash, and check age to enforce 18-year eligibility with clear messages.

Create a web progress bar using JavaScript and jQuery, leveraging Bootstrap libraries to simulate a download with dynamic text updates and a complete message.

Define databases as organized collections of data stored and accessed electronically, from file-system databases to systems, and cover design, data modeling, storage, queries, and security with a dns-based management system.

Explore the differences between SQL and NoSQL databases, including data storage models, table-based rows and columns versus JSON key-value stores, and when to choose each.

Download, install, and explore Oracle SQL Developer to access the Oracle SQL database, navigate the interface, create a test database and connections, and run queries with visible results.

Create a customers table in SQL with columns such as customer_id, customer_name, address, city, postal_code, and county. Learn to read data from the table using select queries.

Learn how to insert data into a SQL database by adding rows to the customers table, specifying the columns in order and providing values for id, name, city, and country.

Learn how to perform partial searches in sql by using where conditions to fetch specific records from a customers table, such as retrieving Germany customers or their addresses.

Explore how to build precise database queries with and or conditions to filter records, and apply order by to sort results by postal codes in ascending or descending order.

Learn how to update a customer record by setting city, country, and other fields using a condition on customer_id, then delete a record by postal code and verify the change.

Learn the basics of BHP, the pre-processed hypertext language, including file operations and data handling. Build a contact us page using BHP and explore its basic syntax and behavior.

Outline a roadmap for a contact form and set up a config folder with styles and php scripts, planning validation, email sending, and spam prevention.

Organize a php project by creating folders and subfiles, structuring main, header, and footer into separate components, and linking an external reference to prepare a working main tag.

Design a contact us form in PHP with honeypot spam protection, including name, email, subject, and message fields plus a hidden nickname, and implement post and get submission with validation.

Demonstrate form field validation in the post method by filtering and sanitizing inputs, checking a honeypot, and validating name, email, subject, and message with clear error messages.

Configure the mail function to send form submissions to a recipient by retrieving the recipient email from the configuration file, and set the subject, message, and headers for delivery.

Learn how the index.php main page handles get and post requests, session data, honeypot validation, and form processing to securely send emails and prevent duplicate submissions via post-redirect-get.

Learn to run a web project on your local machine with a xampp server, place your project in htdocs, start Apache, and test the contact us form at localhost.