Become a Professional Web Developer | Version 3.0

Learn the basics of HTML structure, including opening and closing tags, void and nested tags, doctype, UTF-8, head and body, attributes, whitespace, and comments.

Learn to markup content with section, article, aside, and blockquote tags to group topics, separate ideas, and improve accessibility and search engine clarity.

Learn how to format text with lists, including ordered, unordered, and definition lists, using HTML tags like ol, ul, dl, and li; explore nesting, types, and simple styling notes.

Resize images to web-friendly widths and convert to jpeg, gif, or png for faster loading. Use save for web in Photoshop or alternatives to balance quality and file size.

Learn to build a multi-page HTML5 website by creating index.html with doctype, head, meta charset UTF-8, title, and semantic sections, images, and lists; extend with brewing, grinding, and roasting pages.

Master the basics of web styling with CSSA, including inline styles, style tags, and external stylesheets, plus cascading rules and simple selectors for p, h1, and h2.

Explore how to control text appearance by changing font sizes with relative and absolute measures: percent, em, rem, and pixels, and apply Arial, Helvetica, and sans-serif via body tag inheritance.

Customize list markers with CSS using list-style-type and list-style-image for ordered and unordered lists, apply across the page with a stylesheet, and even use images or none.

Learn to style a multi-page website by creating and linking a shared external stylesheet, applying heading colors, custom list bullets, and Google font integration for consistent typography.

Learn to build hyperlinks with the anchor tag and href, linking internal pages, external sites, and images; use target for new tabs and mailto for email messages with a subject.

Change link styles using CSS selectors for normal, visited, and hover states; adjust colors and remove underlines with text-decoration to clearly indicate state and improve usability.

Add and connect links across pages by setting up anchor tags, IDs, and a site navigation menu, then style with css for hover effects and consistent theming.

Learn to control page layout by styling div blocks with width, height, overflow, and margins or padding, and apply shorthand techniques to set top, right, bottom, and left spacing.

Arrange page layouts by floating images and blocks, adjusting width and height, and using left, right, and clear to control wrapping and alignment.

Learn how the CSS position property moves blocks using relative, absolute, and fixed values with top, left, bottom, and right. Understand how a parent block and scrolling affect positioning.

Center the page with a 960-pixel content area using auto margins, float images, and build a header and footer with a coffee beans background and block navigation.

Master building HTML tables by using table, tr, and td, add captions and headings with thead, tbody, and tfoot, and span cells with colspan and rowspan to control layout.

Master table styling with borders, spacing, and sizing using css selectors for table and td. Adjust width, height, padding, and background colors for head, body, and foot.

Set up the drink page as a structured table with headers and blocks, add a caption and heading, then style borders, collapse borders, center text, and set equal columns.

Learn to build a basic HTML form with a form tag, action and method attributes, plus input fields for first name and email and a submit button.

Discover how to build interactive forms using checkbox and radio inputs, text areas, and dropdown menus, with proper name and value attributes, to collect user data effectively.

Master HTML5 form elements by grouping inputs with fieldset and legend, using placeholders, autofocus, and required attributes, and exploring types like email, password, number, range, date, time, and color.

Learn to style and connect form elements by adding label tags with matching ids and for attribute, then align inputs, checkboxes, radios, and the submit button for a polished form.

Learn to build a coffee survey form in HTML using text and email inputs, radio and checkbox options, a select, textarea, and fieldsets.

Embed streaming video on a web page using the video tag and multiple source elements. Use width, height, autoplay, controls, and poster to ensure broad browser compatibility.

Add video to the drinks page and organize media files in a media folder, updating sources accordingly. Style the video with margins and a grayscale filter using vendor prefixes.

Understand how CSS versioning works from CSS 1 to CSS 3, how the W3C proposals become browser features, and how vendor prefixes affect cross-browser rendering for text-shadow and border-radius.

Explore how CSS defines the presentation layer, how cascading rules override browser defaults, and how to style elements with classes rather than inline styles to keep markup separate.

Learn how HTML and CSS work together by creating a global.css and linking it in the head. Style a button with colors, padding, borders, and text effects.

Master css selectors to target elements by class or id, explore dot and hash notation, and keep markup and styles separate.

Learn to write efficient css selectors by removing unnecessary classes, grouping selectors, and using descendant and child selectors to target paragraphs and links with consistent styling.

Explore CSS pseudo-classes and link state styling, including hover, visited, active, and focus, and apply these states to links, paragraphs, and inputs to enhance user interaction.

Explore css display types (inline, block, and inline-block) and how display none and visibility hidden affect layout, alongside practical examples with anchors, paragraphs, divs, and buttons.

Explore how overflow in CSS manages content within a container, using height or min-height and options like visible, hidden, auto, and scroll, including per-axis control.

Define and use the z-index property to control stacking order of overlapping elements with absolute positioning. See how varying z-index values and DOM order determine which box appears on top.

Explore how the CSS cursor property changes the pointer on hover across body, links, and inputs. See practical examples with pointer, inherit, resize, and move cursors to convey actions.

Explore the CSS box model and learn how box sizing with border box changes default content box behavior to count borders and padding inside.

Learn how to specify colors in CSS using hex, rgb(a), and named colors for text, backgrounds, and borders, including hex shorthand and rgba transparency.

Explore how to style text with the CSS text-transform property, choosing between lowercase, uppercase, and capitalize to render headers and headlines while preserving semantic markup and SEO clarity.

Understand the text-indent property, indent the first line of paragraphs, and apply it to articles; learn to hide submit button text with text-indent while showing a background image.

Learn to apply a background image to a container using CSS, control tiling with background-repeat and positioning with background-position, and use the shorthand background property for efficient markup.

Learn to apply multiple backgrounds to a single element using comma-separated values, control repetition and positioning, and use the shorthand background property to simplify CSS without extra containers.

Explore how to control a background image’s size with CSS background-size, using width and height, contain and cover, to resize and center images within a container.

Learn how to implement borders with the border-image property in CSS, using an image as the border, and adjust border-width, slice, and repeat values while previewing results in the browser.

Create a pure CSS drop-down menu that reveals submenus on hover, without JavaScript, using CSS positioning, float clearing, and display techniques.

Learn to build a pure CSS dropdown menu: create a triangle arrow with borders, style the list, and reveal on hover without JavaScript.

Explore the basics of jQuery by downloading the library, mastering the syntax, using selectors to target elements, and applying events and functions to perform actions.

Learn how jQuery makes it easier to write less JavaScript and do more on your website by simplifying DOM manipulation, events, and asynchronous AJAX calls.

Learn to include the jQuery library in a webpage by adding a script tag in the head and using the document ready function to alert when it's loaded.

Master the jQuery syntax by selecting elements with selectors (id and class), applying methods and functions, and handling events via document ready and hide actions.

Learn to use jQuery selectors to identify and manipulate DOM elements by id, class, and element name, and handle events with click and alerts.

Explore jQuery event methods such as click, double-click, focus, and mouse enter/leave, and learn how to attach event handlers to respond to user interactions on web pages.

Explore the Jake Query library to manipulate HTML elements with concise actions, learn offline and online inclusion, and use CSS-like selectors (#id, .class, tag) to react to focus events.

Learn to create a jQuery template file to quickly build and embed jQuery applications, and use core functions to set and get content, manage attributes, and leverage callbacks.

Explore two initialization methods for the jQuery library: the document.ready form and a concise $() shorthand, emphasizing readability and ease of use.

Initialize the browser-based jQuery workflow by loading the document, executing the anonymous function on ready, and updating the output div with jQuery syntax; the library is ready for use.

Learn how callback functions in jQuery execute after a task finishes, letting you proceed to the next step or handle errors with alerts or text output.

Learn to create a query template file, use jQuery functions to read and set text, val, and html content, and apply attr function with callbacks.

Explore CSS transitions to add visual effects and learn AJAX calls to communicate with a server and retrieve data, with beginner-friendly CSS functionality.

Explore jQuery effects and how to apply show, hide, and toggle transitions to selected elements, using milliseconds timing and optional callbacks to signal completion.

Learn to implement jQuery effects by wiring button clicks to show, hide, toggle, and fade animations on a paragraph, with ready state initialization and completion alerts.

Explore jQuery slide up, slide down, and slide toggle effects, using the same argument patterns to create reusable, easily adjustable animations with five-second transitions and alert feedback.

Explore how to use the jQuery css() function to retrieve and set css properties, such as background color, using selectors like id, class, and element name.

Learn how to use the jQuery css function to set single and multiple properties, such as background color green, font size, and text color, on paragraph elements, with examples.

learn how to use jQuery ajax to fetch json data from a server, populate specific page elements by id, and refresh a live feed every second.

Learn to build a live-updating web interface using jQuery Ajax functions, asynchronously updating a data set, adding and removing entries, and refreshing without a page reload.

Master jQuery effects like hide, show, fade, and slide with optional speed and customizable callbacks. Use css to get and set properties, and perform $.ajax requests with configurable settings.

Conclude by reviewing how to set up the query syntax, use Jay Querrey functions, create a template file, and apply Ajax for interactive web pages.

Explains how php powers dynamic websites with templates and databases, enabling login, sessions, and data storage, and highlights real-world uses like WordPress and Facebook.

Learn how to output data to the browser in PHP using echo, with single or double quotes, escaping characters, and embedding HTML; compare echo and print.

Explore how to define a PHP function without fixed parameters, using func_get_args to collect and sum any number of inputs. Handle unlimited arguments with func_get_args for flexible, scalable code.

Master PHP's number_format to format large numbers with thousands separators and decimal places, and customize the thousand and decimal symbols for user-friendly currency displays.

Learn to embed PHP inside HTML, echo user input, and process a post form to generate dynamic content based on the submitted name.

Discover a faster, cleaner way to display HTML in PHP by breaking out of PHP blocks and writing HTML directly, avoiding echo and improving readability.

Learn to create cookies with setcookie, assign expiration dates, and print specific or all cookies. Check existence with isset, unset, and update cookie values.

Learn to build a radio button form in HTML, submit values via GET and POST to PHP, and display the selected option using process.php.

Create a form with a checkbox and a submit button that posts to process.php, and read the data with isset on $_GET or $_POST to detect state.

Learn to install and use phpMyAdmin to manage databases, run show databases, create and drop databases, and export or import data, with security considerations for public servers.

Create the articles table in the web site database, selecting columns like title, description, body, tags, and timestamps, with data types such as varchar, text, and datetime.

Rename a table to align with standards and maintain consistent naming, changing article to articles using the rename table syntax.

Learn how to add an auto increment id field to the articles table, making id the primary key that automatically assigns unique integers to new records.

Learn how to delete records safely using delete from with a where clause, practice on the articles table, and avoid accidentally deleting all data.

Master how to order records with order by and limit to fetch the latest articles using the created date. Understand selecting id, title, and description for linking.

Learn how to use joins to combine user and country data across normalized tables, using left and right joins, foreign keys, and id-based references.

Learn how the like clause searches article records with a where pattern, and why this slow approach appears for small datasets compared to Spinx indexing.

Count database records efficiently by writing a single query with count and an alias, and compare with using found_rows to return data plus the total count for large datasets.

Explore how PHP data objects offer a database abstraction layer via drivers, letting you connect to multiple databases and swap backends with minimal code changes, for flexible data access.

Learn how to connect to a database by instantiating a DB object with host, username, password, and database name, then check error numbers and handle failures securely.

Learn to run basic database queries against an open connection, perform updates and selects, handle query errors, and verify changes by inspecting the updated articles list.

Explore looping through query results with a while loop, store results in an array, and separate logic from presentation using a for each output approach in an MVC pattern.

Explore how unsafe handling of user input in a login query enables sql injections, shown with a small app. Learn how escaping and prepared statements protect data.

Learn how prepared statements enforce query security by binding parameters, preventing SQL injection, and efficiently inserting records with placeholders and execution in a web development workflow.

Create a test database table in the website database, define an auto-incrementing primary key, and add username and password fields while verifying structure with show and describe commands.

Explore the singleton pattern to create a single database wrapper instance in PHP, ensuring one connection per session while building core methods like query, results, count, insert, update, and delete.

Master a database wrapper that lets you select a table and perform get, insert, update, and delete operations. Focus on handling IDs, escaping inputs, and building safe, dynamic queries.

Build a contact form that stores messages with name and email into a database, then use wrapper from the previous part to insert records and view them in admin area.

Create a contact table to store submissions, defining id as an auto-incrementing primary key and fields for name, email, and message, then verify structure and prepare to insert records.

Configure form input handling and trimming, insert into the contact table via the db wrapper, and redirect to a thank-you page with output security considerations.

Read data from the contact table, loop through results, and render messages with proper line breaks. Escape output with HTML entities to prevent XSS and safeguard security in the display.