Practical Full Stack Web Development Course (100+Challenges)

Begin the practical full stack web development course by mastering HMO, the hypertext markup language that builds every website. Learn paragraphs, headings, forums, and more in this first technical section.

Learn how to build a web page with proper html structure, including html, head, and body. Watch how the title and metadata appear in the browser on refresh.

Master HMO headings from h1 to h6 to structure web pages, name sections effectively, and boost SEO by signaling content hierarchy to search engines.

Learn how to structure content with paragraphs on a web page, see how whitespace differentiates blocks, and use a shortcut to auto-insert paragraph tags.

Explore text formatting with strong, bold, emphasis, italics, underline, subscript, superscript, and horizontal rules, and learn accessibility considerations for screen readers.

Learn how to create HTML links using the href attribute, customize navigation with the target, and practice linking to external sites like Google and Wikipedia while noting default styling.

Discover how html comments organize pages by labeling navigation, content, and footer, improving readability and collaboration. Browsers ignore comments, which you create with opening and closing tags through simple syntax.

Discover how to use the image tag with src and alt attributes, adjust width or height, and load three internet and three local images from an assets folder.

Create simple HTML tables using table, table head, and table row elements; define three columns (name, city, age), fill five rows, and apply borders and styling.

Learn how to create ordered lists in HTML, include list items with type options (1, A, a, I, i), and use reversed, while placing text and links inside items.

Explore the unordered list and contrast it with the ordered list, converting ordered lists to bullet points to understand bullets and numbering in web markup.

Explore html entities such as the copyright symbol, registered trademark, greater-than and less-than signs, and non-breaking space. Practice displaying code on web pages by escaping with < and >.

Learn to embed external websites in your pages using iframes, setting the source, width, height, and border, and navigate embedding restrictions from sites like YouTube and Wikipedia.

HTML project part 1 guides you to build a working web page from scratch in Visual Studio, using headings, paragraphs, lists, images, tables, and links.

Extend the HTML project by adding a soundtrack comment, inserting resizable images, and building a trailers section with h3 headings and embedded frames.

Learn css basics by discovering how to modify the size, position, color, and other properties of elements to craft attractive layouts for web pages.

Learn to style HTML elements with inline styles and id selectors, apply colors like red, purple, and blue, and understand why inline styling for many elements is hard to maintain.

Study how to style multiple elements using tag and class selectors with css, applying colors to paragraphs and links, and using class-based grouping to target subsets.

Learn how to change background colors across HTML elements by applying the background-color property to paragraphs, inputs, and textareas, using selectors by class or id.

Learn to use images as backgrounds by applying a background image to a div, control size and repetition with background-size and background-repeat, and load images from internet or local files.

Learn to modify element borders in CSS by setting pixel borders, choosing styles including solid and dotted, and applying per-side borders, color, and border radius.

Learn how to modify and control margins around elements, apply margins to all sides or individually, use shorthand for top, right, bottom, left, and center elements horizontally with auto margins.

Explore how padding creates space inside element borders, pushes child elements, and allows per-side or four-sided adjustments, culminating in a hands‑on padding challenge.

Explore absolute units and relative units, including pixels, percentages, and viewport units (vh and vw), and learn how they scale with the parent or the viewport to create responsive designs.

Explore CSS text styling by adjusting color, font size, spacing, and decorations, and apply these settings to the body or elements to master alignment and line height.

Learn how to change fonts on a web page using the font-family property, understand browser font fallbacks when fonts aren't available, and apply safe, similar fonts for consistent rendering.

Explore positioning elements on webpages using static, relative, absolute, fixed, and sticky layouts. Apply left and top adjustments, observe behavior, and practice creating elements for each position.

Learn to control overflow by applying values like auto, visible, or scroll to manage content that exceeds element boundaries, with examples of vertical and horizontal scrolling.

Create a basic website layout with a navigation bar, a central container with content and sidebars, use inline blocks and set widths for a responsive skeleton.

Learn to build responsive web pages using media queries, adjust layouts at breakpoints, and apply breakpoint-specific styles to navigation, content, and footer for mobile and tablet screens.

Learn to build fully responsive layouts using relative values, percentages and viewport to scale navigation, sidebars, content, and footer across devices.

Create a login page from scratch using an external CSS file, link it to the page, and apply responsive design while centering contents and styling the background, image, and container.

Style a login page by building a content container with headings and inputs, adding remember me checkbox with a connected label and a forgot password link, refining borders and spacing.

Style the login page by implementing a full-width login button, adjusting margins and height, applying a blue background with white uppercase text, and adding a sign-up footer link.

Explore the JavaScript section to gain your first taste of proper programming by manipulating and interacting with elements, and learn to store data in your browser.

Learn to display a message with JavaScript by adding a button and using the on click alert function. The lesson shows updating title and showing a simple message on click.

Explore the javascript console as a debugging tool, learn how to open it, view errors and logs, inspect elements, and display messages with console.log during development.

Learn to select and modify DOM elements with JavaScript by using getElementById to change text or innerHTML and replace content on page load.

Learn to define and invoke JavaScript functions using the function keyword, name them descriptively in camelCase, and update the DOM with getElementById on click.

Demonstrates a practical javascript example that uses two buttons to simulate registration outcomes, updating a message area with success or failure and applying a green background for success.

Learn how variables store data in JavaScript, define them with let, assign values like numbers and strings, and update page content by accessing and reassigning these variables.

Learn how to use JavaScript arrays to store multiple values in one variable, access elements by zero-based indices, and log arrays (numbers and strings) via the console.

Learn to use conditions in JavaScript to display messages based on time, like hello good morning, good afternoon, and good evening, using if, else if, and else.

Explore the switch statement in JavaScript, learn how to replace many if conditions with multiple cases, break, and a default, for clearer, scalable code.

Learn practical form validation with JavaScript by intercepting form submission, retrieving username and password values, checking for reserved admin names, and displaying validation messages.

Learn practical JavaScript for loops to iterate over arrays, access elements by index, and use length to control iterations and prevent undefined values.

Learn to use the for-each loop to iterate over arrays with an anonymous function, processing each element and displaying results in the console.

Explore while and do while loops, learn how they iterate based on conditions, avoid infinite loops with proper incrementing, and understand when a do while runs once before checking.

Explore booleans, truthy and falsy values, and how comparisons drive conditional logic in web development. Practice with examples of if statements, equality checks, and user input validation.

Learn to define and pass function parameters in JavaScript, using values like name, city, and country, and practice invoking functions and returning results.

Create a single-page setup that dynamically toggles sign in and sign up forms with separate divs and a hidden class, wiring dynamic loading and form updates.

Learn to build a single-page form switcher with JavaScript: toggle between login, register, and forgot password forms by clicking labeled buttons, using show and hidden classes.

Track and log user actions in the browser, including form names, clicks, and timestamps, and display them in a table to analyze user interactions.

Track and store user actions in a dynamic JavaScript app by implementing delete and insert actions, and persist them in the browser using localStorage as a JSON array.

Speed up web page styling with Bootstrap's preset styles and responsive features, enabling a single page to look great on mobile, tablet, and desktop.

Add Bootstrap to a web page by including Bootstrap css and js from a content delivery network, load jQuery as a dependency, and verify with a Bootstrap alert across devices.

Explore bootstrap's grid system, a 12-column layout that lets you construct responsive, mobile-first web pages by assigning column widths (like six and six) and adjusting at breakpoints.

Learn to build a Bootstrap navigation bar in seconds, with a responsive navbar and dropdowns. Customize links, search, and branding; add a registration form with username and password.

Style forms with Bootstrap using form-group and form-control to build labeled inputs, placeholders, and responsive layouts with the grid system that arrange fields across columns.

Create and style responsive bootstrap tables with quick class-based enhancements such as striped, hover, and bordered layouts, then test with three to four rows.

Learn how to implement bootstrap alerts for various occasions, including default, primary, success, warning, danger, and info, with dismissible behavior and inline links for clear user feedback.

Learn how to style buttons on web pages with classes for primary, success, warning, and danger, including outline variants, hover effects, size options, and disabled states.

Create a button-triggered dropdown with a dropdown menu containing links using Bootstrap classes. Position the dropdown left, right, up, or down, and ensure it works by loading the Bootstrap script.

Build an image slider carousel that rotates automatically and uses an active class, data attributes, and five images, with previous and next buttons for manual control.

Learn to build Bootstrap modals with trigger buttons and data-target, showing registration, login, and password forms. Create modal with header, body, and actions using grid layouts and form controls.

Learn to build a responsive bootstrap-based app landing page with navigation, jumbotron, and sections, using image-fluid elements, display-4 title, and a centered btn-success call to action.

Refine the app landing page in part two by adjusting margins, creating a features section with icons and centered text, and adding responsive images with Bootstrap.

Create the how it works section of a mobile app landing page by reusing the features layout, swapping icons and images, and updating content.

Create a responsive app landing page contact section using Bootstrap forms, grid layout, and icons; tailor inputs, margins, and styling to achieve a polished, mobile-friendly contact experience.

Explore PHP to move from static pages to dynamic features, including login and logout functionalities. Learn file uploads and how PHP connects to databases to store and retrieve data.

Install and configure XAMPP to set up Apache, MySQL, and PHP with phpMyAdmin, start services, verify by visiting localhost, and prepare for PHP development.

Set up a local BHP environment, create index dot BHP in the docs folder, start the Apache server, and print hello world with echo (note: closing tags are optional).

Learn how to declare and initialize BHP variables using the assign syntax, and output them with echo, practicing by creating variables (name, age, city, country, favorite food) and printing them.

Learn how PHP arrays mirror JavaScript arrays with syntax differences, including creating numeric arrays, adding elements, counting length, and using associative arrays with string keys.

Explore Peach Pit conditions and learn how if, else if, else, and switch statements use blocks, cases, and breaks; apply && and || in age examples.

Learn to use for and foreach loops to iterate arrays, access elements by index or key, and format outputs with line breaks, comparing them to JavaScript. Explore practical examples.

Master while and do while loops in javascript, using a count variable and incrementing to avoid infinite loops, and note that do while runs the block before checking the condition.

Learn how get requests pass key value pairs in the URL to fetch data from a server, access those parameters in code, and display results on a web page.

Understand why post requests hide data from the browser and improve security over get requests, and build a simple login form with username and password handled via isset.

Learn how to use PHP sessions to store data across pages, implement login and logout, and display session variables like username on subsequent pages.

Learn to upload images with php by creating a form with input type file and enctype, posting to index.php, and moving the uploaded file with move_uploaded_file using $_FILES.

Learn to simulate database data with PHP arrays and generate HTML tables using a foreach loop, displaying name, age, occupation, and favorite food in a dynamic web page.

Learn to define reusable functions, pass parameters, and invoke them with echo to compute results. Build a three-parameter function that outputs a personalized introduction using the name, age, and city.

Explore object oriented programming with classes and objects, learn properties and methods, and see how public, private, and protected access shape a reusable blueprint and instances.

Learn to define a constructor to initialize class properties and use getters and setters to access and update state, illustrated with a car example and a person class challenge.

Build a weather forecast app using bootstrap styling and a php-based workflow to search cities via an API, display city results, and show a six-day forecast.

In this part we create a php file to render city search results, build a cities template, count results, and link each city to its forecast.

Implement a search-driven weather forecast feature by creating a get forecast function and a city template to display each city's forecast, including date, weather, image, and min/max temperatures in Celsius.

Explore phpMyAdmin, a graphical user interface for managing databases, tables, and columns, including user privileges and basic SQL such as select.

Create a blog posts table in your new database with an auto_increment unsigned id, a 255-character title, a body, and a created timestamp defaulting to current_timestamp.

Insert data into a blog post table using an insert into statement with column lists and values. Execute the query to store and display the new records.

Learn to update data in database tables using the update statement, with set to modify columns like title and body and where to target specific rows.

Learn to select specific columns from a table, use where conditions to filter rows, and iterate results with a while loop to access fields like title and body.

Learn how to delete data from a database with hard delete and soft delete approaches, including using where clauses and a boolean delete flag to exclude deleted records.

Learn to join tables to combine blog posts with user data using inner, left, and right joins, and apply on conditions to reveal post authors.

Explore limit, offset, and order by to fetch, paginate, and sort data in SQL queries, with examples showing 1–2 rows and ascending or descending order.

Learn to query data by dates in MySQL, using less than, equals, and between, and perform date arithmetic with date_add and date_sub to add or subtract days, months, and years.

Create a responsive index.html template using bootstrap, including navigation, a dark theme, upload and category grids with image gallery cards, and dynamic, database-ready sections for future content.

Create and configure bootstrap modals for login and sign-up forms, customize modal IDs, trigger buttons, and form fields including email, password, remember me, and terms.

Create an image details template that displays the image in full and includes an information panel with the uploader, days ago, views, comments, vote up/down, and a comments section.

Create an upload form template with file name, description, category select, and upload type radio buttons to switch between online and local file inputs, styled with bootstrap.

Use mvc architecture to build an image gallery, where the image controller fetches data from the image model and renders it with the view, with public, source, and controller structure.

Parse url requests and implement model-view-controller routing to map to the correct controller and action, define path variables, bootstrap the application, and handle missing routes with a default index view.

Learn to render views by building an image controller, a base controller, and a view class; render templates with data, handle not found cases, and connect controllers to views.

Split HTML templates into reusable components such as header, footer, categories, and image lists, then include them in pages to build a modular gallery with dynamic image pages.

Set up a local database, create a gallery database, and build a database connection, base and user models to enable a secure registration flow with prepared statements and password encryption.

Implement login and logout by using getters and setters for user fields, validating email and password, loading the user from the database, and managing sessions to persist authentication.

Learn to implement image uploading in a web app: gate uploads to logged-in users, build an image model and database, and handle online file uploads.

Learn to upload images from local computer to a web app, handling directories, file existence checks, and saving to user-specific uploads folders, with online vs local upload logic.

Retrieve and display images from the database on the index page, refine the grid layout, and implement an image details view with get image by id and a views counter.

Implement a basic image search by adding a search folder and template, a header form with a get query parameter, and a controller to render matching results.