Full Stack Web Development: Web From Zero with PHP 2022

Set up your development environment by installing a free editor like Sublime Text on Windows, creating a project folder, and saving your first HTML file with the proper extension.

Create your first web page by editing index.html in Sublime Text, structure it with html and body, add a title for the car selling website, then save and refresh.

Learn to use html heading tags from h1 to h6 to structure content; declare the doctype, set a page title, and refresh to see each heading size.

Learn how to create and format paragraphs and headings using the paragraph tag and heading tag, and understand how browsers ignore line breaks while saving and refreshing the page.

Learn text formatting basics for the web, including bold and strong text, italic and em, nested tags, and subscript, superscript, mark, small text, and inserted text.

Learn to create HTML output by using heading tag h1, paragraph tags, and emphasize and italic formatting with em and i tags, then add a final paragraph.

Learn to create tooltips with the title attribute that reveal extra information on hover, and apply HTML comments to document code for human readability and easier collaboration.

Learn to style HTML text with inline styles by changing color and adding a border, and note the three Cyesis types: inline, external, internal.

Learn to create hyperlinks with anchor tags, link to external and internal pages, and use href and target attributes to open in new tabs.

Learn how to add an image to a web page by placing the image in the same directory as index.html and using the img tag with src and alt attributes.

Explore html lists by building unordered lists (ul) and ordered lists (ol) with practical examples, then see how lists retrieve data from databases and support various tasks.

Explore HTML forms by creating a simple form with text inputs, labels, radio buttons, and a submit button, and learn about the name attribute to prepare for PHP integration.

Learn how to use the div tag to divide a web page into sections and apply borders with style attributes, and use the break tag to start a new line.

Explore inline, internal, and external CSS, showing they achieve the same styling; apply color red using inline style, then switch to a style tag and internal CSS.

Learn how to organize web styles with external css: create a separate style.css file, link it in your index.html, and apply blue color to a paragraph for cleaner, scalable styling.

Learn how id and class attributes distinguish elements and control styling with CSS. Use #id for one element and .class for multiple elements, demonstrated with color changes.

Learn the css background color property using internal styles and the style tag. Explore id versus class selectors and apply a blue box with a paragraph and a small word.

The exercise shows how to create a div and a paragraph, then apply inline CSS to style background and text colors. It demonstrates using hex colors and various color options.

Explore border styling by applying a 2-pixel border, choose solid and other styles like dashed, inset, and outset, select red color, and preview changes by refreshing.

Explore padding property to create space inside elements, apply padding to a div, and see how 40 pixels of padding affects the gap between a parent and its child paragraph.

Set height and width to control a div's size, using pixels and percentage values relative to its parent or the page so the element becomes visible in two dimensions.

Learn to style text with alignment and decorations, using center alignment, underline and overline, text transform options (uppercase, lowercase, capitalize), and text shadow; future lesson covers fonts.

Learn to use font-family with default and fallback fonts to ensure readability. Apply font-style and font-size, explore italic options, and use heading versus paragraph tags for better indexing.

Explore how to use Google fonts to style text by selecting a font, copying the link, applying the font family to a paragraph, adjusting properties, then save and refresh.

Learn how the CSS display property controls layout by comparing block, inline, and inline-block elements, and see how width, height, and line flow affect spacing in real examples.

Demonstrates the overflow property alongside display, showing how a div with explicit width and height handles long text, using overflow, scroll, and auto to control content visibility and scrolling.

Learn how the float property positions images beside text, controls image size, and uses borders and margins to refine layout.

Apply the text-align property to align text left, right, or center. Center a div with margin auto and adjust its width and height to see how alignment affects layout.

Explore css combinators by building div and paragraph elements, applying background and text colors, and using selectors such as div p and div > p to target nested elements.

Learn to build a responsive form from scratch using HTML and CSS, including first name, last name, country, and gender inputs, with hover effects and labels linked to inputs.

Create a navbar and menu in HTML and CSS, link items with classes and IDs, and style colors, alignment, and hover transitions to build a navigation bar.

Create and style the about page as the main page, building a division with class section, adding education, works, and experience text, margins, and background color, with a future image.

Insert an image in a portfolio page with an image tag, style it via the icons class, float text beside it, and adjust width for centering on the page.

Create the Ceressus services page by duplicating the index content and updating the heading. Reuse the shared menu and classes to keep styles consistent.

Create a functional contact page by reusing the services page layout, linking from all pages, and adding contact details, basic formatting with pre and break tags, plus a placeholder forum.

Discover responsive design and how to implement it to adapt web pages. Test breakpoints with browser inspect tools to see elements reposition and colors change.

Apply media queries to hide the brand on small screens so navbar tabs fit, editing index.html and style.css in Sublime Text, and test responsiveness across devices, preparing for Bootstrap later.

Understand bootstrap as a framework that speeds web development and enables responsive menus; learn to include bootstrap CSS and JS, copy components, and test layouts across devices.

Explore Bootstrap classes to control colors, shape, breakpoints, and navigation states; adjust text and background colors for accessible contrast, and work with active menu items in a Bootstrap-powered project.

Learn to build responsive layouts with bootstrap by using the container and grid system, create columns totaling 12 units, and arrange multiple rows for a news website.

Discover how bootstrap components like alerts, button classes with color options, cards, and carousels enhance interfaces, with practical tips on dropdowns, grid systems, and container usage for responsive layouts.

Create a news website as an example design project, using bootstrap to shape the layout, and follow along in future videos as we expand its functionality beyond current skills.

Set up the development environment by creating a project folder, using Bootstrap's starter template, linking the Bootstrap stylesheet before your own, and preparing an index file and a style file.

Build a Bootstrap navigation bar by selecting a navbar and inserting its code. Use comments, inspect, and search to update the brand and menu items and adjust breakpoints for responsiveness.

Center the bootstrap menu by duplicating the collapse div, apply a dark background, and tune active states and labels such as hot news, while removing the current indicator.

Create a grid system with rows and columns, using bootstrap layouts to mirror a base site with four columns, a slider, and vertical cards, then place cards inside the columns.

Place four bootstrap cards across four columns by using a 12-unit grid, adjust widths to three units per card, and apply margins and image height tweaks for a polished layout.

Learn to make responsive cards with Bootstrap by adjusting grid units for different screen sizes, centering rows, styling card text, and hiding cards on small devices via breakpoints.

Create a news-style slider using a Bootstrap carousel with captions and arrows. Ensure images are uniform and implement responsive rules to hide columns on medium and smaller screens.

Fix spacing and vertical alignment of the aside cards, removing excess sizing for auto-sized cards. Then populate the column with multiple cards and images, concluding with a daily news card.

Add a news section to the site, including a heading, paragraph, and image within a two-column layout with a slider; learn responsive design and basic styling for a finished design.

Learn how JavaScript enhances front end web pages with interactive elements, alerts for missing form fields, and different script placements: inline, internal, and external JavaScript.

Explore internal javascript, contrast with external javascript and style links, and see how alerts, semicolons, and script blocks affect the page.

Explore accessing html elements with javascript and changing their content using document.getElementById, applying updates to a paragraph to illustrate dynamic text on page refresh.

Learn how to use JavaScript comments with single-line and multi-line syntax, to document code, and how to debug by inspecting the console and fixing errors like document is not defined.

Create and handle button click events with JavaScript using onclick handlers, document.getElementById, alerts, and innerHTML changes, and compare inline, internal, and external approaches for clarity.

Learn to simplify web interactions by building a button, wiring click events, and using variables to change text, demonstrating how basic logic clarifies code.

Learn how to retrieve a text input value with JavaScript by setting up an input field and button, handling a click, and displaying the input with an alert.

Learn to build a small JavaScript app that reads input, adds it as a list item on button click, and clears the input after each entry.

Learn how to manipulate element styles with JavaScript by changing font size, colors, and border radius, create simple circles, and toggle visibility via click events using class and id selectors.

Learn programming basics by building logic to make a computer perform tasks, including variables, arrays, if statements, loops, and functions in JavaScript, with HTML interaction and input validation and sign-in.

Declare and assign JavaScript variables like X = 3 or 6, display results with alert, and create a total variable computed as X plus another value.

Learn how to perform all math operations with variables, assign and rename them, and use plus, minus, multiply, and divide, including string literals in quotes.

Explore declaring variables for text and numbers, using quotes for strings, concatenating values, and displaying results with alerts while handling undefined or empty variables and basic user input.

Create interactive web form behavior by using html input boxes, reading user values, updating variables, and triggering alerts on button clicks, with live page refresh.

Explore how if else statements control code flow by comparing a variable to values with if, else if, and else, triggering actions like signing in a user or showing warnings.

Learn how to use if not statements to execute code when a condition is not true, with not equal comparisons, numbers, strings, and login checks.

Build an input and button, detect clicks, read the name, and use if and else if to accept Mike or Joe, or show a wrong admin name in a paragraph.

Demonstrate the or operator by checking if a name equals Mike or Joe to generate welcomes, and introduce the concept of logical operators.

Explore the and operator by building login logic that requires both a valid username and password, using and/or conditions, brackets, and multiple user examples to illustrate matching credentials.

Master if-else number comparisons using greater than, less than, greater or equal, and equal checks; create an age input, read it via document.getElementById, and validate with alerts.

Build a grade calculator that takes a grade input and returns A for 75, B for 50, or failed below 25, while enforcing a 0–100 range with an if-else flow.

Learn how for loops perform iteration from a starting value to an end value, with increments, demonstrated via console.log outputs from 1 to 5 and to 1000.

Explore the while loop, its similarity to the for loop, and the key differences: setting the starting value before the loop, requiring an explicit increment, and avoiding infinite loops.

Master the do while loop by running the block at least once before evaluating the condition. Compare it with a while loop and learn to increment to prevent infinite loops.

Learn how arrays simplify storing multiple users by replacing many variables with a single list. Access and extend the array to add new users without creating new variables.

Learn to access array elements by index in JavaScript, using zero-based indexing to print users, bound the loop with length, and search for Mike.

Demonstrate finding a specific user in an array using a for loop, comparing each element to John and other names. Identify the matching index through iterations.

Define a function called average that takes two numbers and returns their mean. Show its reuse by calculating 3 and 5, then 12 and 8, on the web page.

Learn to use functions with HTML to create an age difference calculator featuring two number inputs and a calculate button that outputs who is older.

Create an external JavaScript file and link it to the HTML using a script tag, moving code from the HTML to the separate file for modular, maintainable behavior.

Explore jQuery as a JavaScript library that makes coding easier with shorter scripts and rich animations. See accordion, tooltip, color animation, and id or class based element selection.

Download jQuery to get started, save it in your project, and link it with a script tag in HTML. Open index.html to confirm jQuery is working and prepare for lessons.

Detect button clicks with jQuery and trigger alerts, using $ and #myButton. Explore events like mouse over, hover, and selecting a radio button, and refresh the page when needed.

Learn how to use the jQuery document.ready function to run code only after the page is ready, and practice events like click and hover using resources such as W3Schools.

Learn to change HTML content using JavaScript and jQuery. Detect paragraph clicks and update text with concise event handling, comparing jQuery and pure JavaScript approaches.

Learn to change css properties with javascript by selecting elements with a query and updating color and font size, then applying multiple properties at once.

Learn to create two circles using a shared circle class, set height and width to 300px, apply border-radius 50%, and assign different background colors to distinguish them.

Learn to handle click events on multiple circles and toggle their background color to black, building a scalable approach for applying the same behavior to all circles.

Learn to use the circle class to highlight the clicked circle in black, while others stay unchanged, and to read an element's id or class with alerts via attributes.

Implement height-based hide effects on click to smoothly vanish circles, with speed in milliseconds such as 1000. Use a callback to alert when a circle hides.

Learn to hide and show elements with a default hidden square and a button, using a click event to reveal the square and adjust display speed.

Explore slide down and slide up effects and implement a slide down on a button click, replacing fade with slide and adjusting milliseconds for timing.

Create an interactive flip control that slides down a panel when clicked, using jQuery's slideDown effect, and style the panel with color, borders, and spacing.

Use the animate function to move and resize a square div on button click. Set a 200px purple square, adjust left to 250px, and shrink width to 100px.