Crash Course: Build a Full-Stack Web App in a Weekend!

learn HTML, the hypertext markup language, and how its elements and tags structure web content for browsers, including paragraphs, links, headings, images, and video, with opening and closing tags.

Create the first html file and folder, build an html structure with html, head, and body, add a title and h1, and use VS Code's exclamation mark shortcut to scaffold.

Learn to present text and a facts list in a full-stack web app, using paragraphs, spans, and semantic ul and li elements for accessibility.

Learn to create hyperlinks with the a element using href and target attributes, open links in a new tab, and insert images with src, alt text, height, and width.

Structure your web app using semantic HTML by grouping content into header, main, aside, and section, organize category buttons in a list, and prepare a form for user input.

Learn to build a simple HTML form with text inputs, a category select, and placeholders, then prepare JavaScript for submissions and inline layout with spans.

Add three emoji buttons for upvote, mind blowing, and false to each fact, use a div box, replace b with strong, and place a share a fact button in header.

Learn how CSS, or cascading style sheets, works with HTML to define visual style and layout, using selectors, declarations, properties, and values to create CSS rules.

Explore ways to add CSS—inline, style element, external stylesheet—and connect HTML with a link tag. Style text using h1, p, span, with font size, text transform, and list style.

Explore how to load Google Fonts, apply font families such as Sono and Coiny, and use developer tools to style pages with precise class-based CSS.

Learn to apply color in CSS for a full-stack web app, using hex and rgb values, color keywords, Tailwind palettes, and page-wide background and text colors.

Learn how CSS inheritance and the global selector propagate color and text properties from the body to most elements, while buttons and inputs don't inherit.

Learn the CSS box model, including content, padding, border, and margin, and how width and height interact with box-sizing border-box, with practical resets and spacing examples.

Explore the difference between block level and inline elements, and how display, margins, padding, and the box model affect width (including 100% width) and centering in CSS.

Master flexbox in CSS to build simple, responsive layouts; turn header and logo into flex containers, align items with align-items, justify-content, and space-between, and add gaps for clean spacing.

Apply flexbox to create a three-item fact card with text, category tag, and voting buttons; learn alignment, gap, and auto margins to push controls to the right.

Learn to build bigger, two-dimensional layouts with CSS grid, using a two-column setup with a fixed 250px left column and a flexible right column via fr units, including gaps.

Center your page by wrapping all content in a container with a max-width and auto margins, enabling responsive centering as the viewport changes.

Style links with a source class, apply hover, visited, and active pseudo-classes, and remove underlines. Implement simple transitions to animate color changes for a polished, responsive web app.

Learn to style page buttons by building a generic btn class and variants (btn-large, button all categories, button category), applying gradient backgrounds, hover transforms, and full-width sizing.

Learn how to efficiently Google and read documentation to solve CSS and JavaScript challenges, using MDN, CSS Tricks, and Stack Overflow to implement border radius and cursor pointer effects.

Style the voting buttons with a light background, no borders, 18px font, rounded corners, and a hover transition, using the vote-buttons flex container to keep them side by side.

Style form elements by styling inputs, selects, and spans with consistent colors, borders, and rounded corners; apply flexbox layout, set widths, and placeholder coloring to create a well-structured form.

Learn to build responsive layouts using media queries, flexbox, and CSS grid to adapt a web app to smaller screens, with practical breakpoint tweaks and testing.

Learn how Supabase lets you quickly add a backend with a hosted database and auto-generated API that serves JSON, enabling data loading and new data creation without manual backend code.

Sign up for Supabase, create your first project and database on the free plan, then explore the table editor, authentication, and API docs.

Create a table named fact with an id as primary key and created_at, add text, source, category, and votes (interesting, mind blowing, false) with zero defaults, then load sample data.

Apply role level security policies in Supabase to enable read access for users, then add insert and update permissions, preparing your app to load data from the server with JavaScript.

Explore JavaScript, the third core web technology, and learn how it enables dynamic effects, user events, external data loading, and content updates to turn static pages into web applications.

Demonstrate JavaScript basics by linking a script.js, selecting elements, and toggling a hidden form with classList on click. Update button text between 'Share a fact' and 'Close', and use console.log.

Explore values, variables, and operators in JavaScript, using const and let, with strings, numbers, booleans, null, undefined, arithmetic and logical operations, and console logging.

Learn how functions act as machines that take inputs, process data, and return outputs in JavaScript, using built-in functions like parseInt and console.log and creating reusable custom functions.

Explore taking decisions with JavaScript using if-else statements, equality and greater-than tests, and truthy and falsey values. Build conditions that return age or impossible year to guide user feedback.

Explore the ternary operator as a conditional alternative to if-else, define variables based on a condition, return values, and see its use in React.

Learn to work with strings in JavaScript by calling methods like toUpperCase, using template literals for interpolation, and applying ternary logic and dynamic values such as the current year.

Demystify arrow functions in JavaScript by assigning them to variables, returning values implicitly, and using a ternary operator for simple conditions, with examples from current year calculations and React usage.

Explore the fundamentals of arrays in JavaScript, including zero-based indexing, length, destructuring, and the spread operator to create, access, and extend arrays.

Explore JavaScript objects as key-value data structures, learn to define properties, access data with dot and bracket notation, and create methods using destructuring.

Learn to loop over arrays with forEach and map, creating new arrays and logging results. See how arrow functions simplify callbacks and extract names or ages from objects.

Explore the DOM, a tree-like representation of the HTML document generated by the browser, and learn how JavaScript objects manipulate HTML elements.

Revisit the first DOM manipulation to show each HTML element is a DOM object, use querySelector and console.dir to inspect it, and clear a facts-list by innerHTML.

Render a dynamic list of facts by mapping an array to HTML and inserting it with insertAdjacentHTML to create a data-driven DOM.

Load data from a Supabase API using fetch with async/await, configure headers and bearer token, and render backend data in a full-stack app.

Learn how to use the filter and find array methods to extract and display data, including filtering API data by category and applying colors based on category.

Learn how React, a JavaScript library for building user interfaces, uses components, JSX, declarative patterns, and state to keep the user interface in sync with data, without direct DOM manipulation.

Install Node.js and set up a React app with Create React App, verify npm, and run npm start to view a hello world in the browser.

Discover how to build a React app from scratch by turning HTML into JSX components, managing public assets, and importing CSS for a functional, component-based UI.

Divide the user interface into smaller React components—header, category filters, and a facts list—then compose them inside the app component using JSX.

Render a dynamic list of facts in React by mapping over facts and creating li items with keys, text, source, and votes, styled by category color, preparing for Supabase data.

Create a reusable fact component in React and learn how to pass data via props, destructure it, and render with keys in a dynamic list.

Render a dynamic list of category buttons by mapping a categories array to styled list items, assigning keys, and preparing for state-driven interactions in the category filter component.

Explore how React state powers interactive applications by building a counter component with useState, onClick handlers, and declarative re-rendering.

Learn to toggle a form in React using a showForm state with useState, a toggle on click, and conditional rendering via a ternary operator, updating state to re-render.

Create a header component and lift the show form state to the app, then pass it as a prop to toggle the header text between close and share a fact.

Build a React form by converting HTML to JSX, populate category select from an array, implement controlled inputs with useState and onChange, and handle submit with onSubmit and preventDefault.

Learn to validate and submit new facts by preventing reload, ensuring text, source, and category validity including a proper url, creating a fact object, updating state, and closing the form.

Lift the facts state to the parent, update with useState and setFacts, pass facts and setFacts as props, and use the spread operator to add new facts.

Connect the front end to the Supabase back end by creating a Supabase client, loading the data with useEffect, and storing results in the facts state on first render.

Create a loader component and use isLoading to show loading while fetching facts from Supabase, with conditional rendering, order by votes, limit results, and basic error handling.

Learn to filter a facts list by category using a category state and an eq query with Supabase. Update the UI on category button clicks and handle empty results.

Upload new facts to Supabase by inserting records into the facts table, returning the created object, and updating the UI state with a loading indicator.

Implement a vote feature for facts using supabase updates, with a dynamic columnName and local state updates via map, and disable the buttons during updates.

Deploy a web app to a live server and build a production bundle that compiles code into HTML and JavaScript ready for server upload.

Deploy your production build to Netlify, upload the build folder, set a unique site name, and publish your web app live with a shareable Netlify URL.

Take next steps after finishing the project by deepening HTML, CSS, and JavaScript skills, exploring front-end frameworks, and adding Git, npm, and backend options to grow as a web developer.