JavaScript 45-Day Bootcamp: Learn Web Development

Learn the fundamentals of HTML, including common tags like h1, p, header, nav, ul, ol, div, and forms, then complete a full HTML website in the day's challenge.

Code sandbox introduces dev boxes that spin up docker containers, offering power at slower startup, and suggests StackBlitz as a viable HTML CSS sandbox alternative.

learn to set up CodeSandbox.io with the static template, create a new sandbox, and edit index.html to preview your HTML live, and note that projects are public by default.

Master the basics of HTML by starting from scratch, using the doctype, html and head sections, setting language and title for SEO, and building h1 through h6 tags.

Learn how to create image tags with the img element, set the src to a URL, add alt text for accessibility, and control image size, using Unsplash examples.

Explore how to use the paragraph tag, create p tags, embed other elements, wrap text around images, and practice building two paragraph tags.

Learn to create ordered and unordered lists using ol, ul, and li, including adding list items and headings, with examples like grocery lists and favorite colors.

Learn how div tags act as boxes and containers, explore block elements, and structure web pages with header, nav, main, aside, section, article, and footer for better readability and SEO.

Master anchor tags to link between pages and within a page, open links in new tabs, and navigate via ids and hrefs with on-page sections.

Learn to build HTML tables with table head, table body, tr, and td to display data such as id, name, and color, including column spanning.

Explore how forms send data to a server using the action URL, input names, labels, IDs, and the http get and post methods.

Explore and experiment with in-depth HTML input types, including color, range, text, email, tel, number, date, and a textarea, then build a form that posts to a request bin.

Learn to build web forms with radio buttons for single selections and checkboxes for multiple selections, using labels, input names and values, and post submission to a server.

Discover how to implement the select element for single and multiple selections, define option values, and submit with a form post, including conventions for multiple selections using square brackets.

Explore the file input tag, learn to send files with multipart form data via post, and build a form that captures a screenshot and description with optional hidden fields.

Learn how the span tag renders inline content, use the strong tag for bold text, and the pre tag to preserve code formatting; practice building an anchor in a paragraph.

Master the video tag to embed and play videos on web pages. Configure poster images, width and height, controls, autoplay, and muted, with multiple sources like mp4 and ogg.

Explore the audio tag by uploading a wav file, building an audio element with controls and autoplay, and using multiple sources (wav and mp3) for cross-browser playback.

Embed websites and videos using the iframe tag, control width and height, and learn how to include YouTube videos while noting some sites block embedding.

Learn how to create a web page, link between pages using relative urls, and organize content with folders, including home, about, and mockingbird pages.

Build a multi-page site with a header, nav and logo image, home, about, and contact pages with content, plus a footer and a contact form posting to a request bin.

Conclude your JavaScript 45-day bootcamp by reviewing core web development skills and JavaScript practice, and empower learners to continue building projects.

Explore CSS fundamentals in a crash course, learning positioning, sizing, and how to use Google developer tools, inline versus external styles, and popular CSS frameworks to build sites.

master css and the cascade by styling h1 and p elements with a style tag in the head. learn to override styles and set salmon color for two paragraphs.

Learn to style web pages using CSS classes by applying the class attribute to HTML elements, defining .fun and .awesome, and styling properties like color and font size.

Create divs with unique ids, use the # id selector to set width, height, and background color in CSS, using red or green for visuals.

Explore how borders, padding, and margins affect element sizing and the box model in CSS by building a styled div with width, height, background color, and border options.

Explore the CSS box model by calculating an element's width and height with borders, padding, and margins, and learn to use border-box versus content-box for precise sizing.

Explore CSS positioning, including absolute and fixed positioning, and relative containers. Learn how top, left, right, and bottom offsets position elements in practical examples.

Learn to use CSS media queries to target screen sizes. Apply a max-width of 400 pixels rule to change the body's background to purple for mobile.

Learn to use Chrome developer tools to inspect HTML, edit CSS in real time, view console, breakpoints, and performance insights, and test mobile layouts with the device toolbar.

Learn to create an external css file named style.css and link it to an html template with rel=stylesheet. See how this enables style reuse across pages and improves load speed.

Learn how to apply inline styles with the style attribute, understand how inline styles override external CSS, and explore dynamic styling with JavaScript in this module.

Explore css frameworks like bootstrap, milligram, tailwind, mui material, and bulma, noting grids, forms, and components and how you can copy and paste to start faster.

Celebrate completing section two by mastering CSS concepts—styling with classes and IDs, padding, margins, and positioning, while learning width, height, media queries, external stylesheets, and Google developer tools.

Master JavaScript basics on day three, learning variables, data types, arrays, objects, if statements, else, switch, loops, and creating functions with inputs and returns; tackle challenges to grow.

Open Chrome developer tools, create and save a JavaScript snippet in the sources tab, and run console.log with hello world. Set breakpoints, step through, and debug to understand code execution.

Learn how to create comments in JavaScript, including single-line and multi-line styles, with practical examples and a hands-on challenge to add both comments.

Explore JavaScript data types, including strings, numbers, and booleans, and learn how console.log outputs them and how adding a string to a number turns the number into a string.

Discover how variables store data in JavaScript using let. Explore string, number, and boolean types, change values, and log results like age and dog years, preparing for arrays.

Create and manipulate arrays by adding, removing, and updating items using push, unshift, shift, and pop, while indexing with zero-based positions and logging results with console.log.

Master comparison operators by using greater than, less than, and equals variants on numbers and strings. Apply these operators to variables and booleans, and log results with console.log.

Learn how the not operator negates booleans by toggling true and false in JavaScript. Use console.log examples and a dark theme toggle to practice negation and boolean toggling.

Learn to use logical operators to combine two comparison operators, apply and/or to produce booleans, and evaluate complex true/false conditions in JavaScript.

Learn how to use if statements to make decisions in JavaScript by evaluating booleans, comparisons, and logical operators with age-based conditions, then log results with console.log.

Learn how else extends if statements in JavaScript by using true and false examples, age checks, and pizza preferences to illustrate conditional branches.

Learn how else if adds another condition to an if statement, with age and name examples and console.log outputs like prime years and young years; it previews switch statements.

Learn to use switch statements to make decisions with cases, breaks, and a default, preventing fall-through and enabling clean branching illustrated by name and train examples.

Learn how to use for loops to execute code a set number of times, including forward and backward iterations, and loop through arrays by length with console.log.

Learn how to use for-in loops to iterate over object properties and array indices, access values via keys, and log key-value pairs.

Learn how to use a for of loop to iterate through arrays in JavaScript, logging each item with console.log, using colors and favorite numbers as examples.

Learn to implement while loops by counting from five to ten, console log each value, and prevent infinite loops with proper decrementing.

Explore the continue keyword to skip iterations in loops, using for and while examples to skip specific values, and practice with a colors array before moving to break.

Learn how the break keyword exits loops early when a condition is met, in for, while, and for-in and for-of loops. See a color example where green stops logging.

Learn how to declare constants in JavaScript with the const keyword, including that you cannot reassign, and that booleans, strings, numbers, and objects can be used.

Discover how to create and call functions in JavaScript, a code-storing variable that runs when invoked, with a for loop logging numbers one through ten.

Learn how to pass data into JavaScript functions using parameters and arguments, including multiple parameters and local scope. See examples that count numbers and generate personalized greetings.

Explore how the return keyword outputs a value from a function, with examples adding numbers and computing dog years, and practice returning data.

Master the built-in browser alert function in JavaScript, using strings and variables to display messages like 'hi' or 'Hi Bill', and practice with a personal alert challenge.

Learn how to use the browser's confirm function to return a boolean and drive if statements, with console logging results and setup for the next video on the prompt function.

Learn how to use the prompt function to capture user input as a string, handle null when canceled and an empty string, and apply an if-else check for validation.

Celebrate progress as you master variables, constants, if statements, loops, and functions in JavaScript, including alerts, confirms, and prompts, and keep challenging yourself before day four.

Learn how to make websites interactive with JavaScript by selecting HTML elements, adding event listeners, and changing elements. Complete the color div challenge to control a pre-made page’s div color.

Master selecting elements with JavaScript using document.getElementById and querySelector, log elements with console.log, and create and reference a div under the container to prepare for attaching event listeners.

Learn how to add event listeners in JavaScript, attach functions to input and click events, access event targets and values, and alert on button clicks.

Learn to style HTML elements using JavaScript by manipulating element.style to change color, apply transform, and set a container background color, with hands-on practice.

Learn to build a color mixer with three RGB sliders that update a div's background color using DOM selection, template strings, and event listeners.

Celebrate finishing day four as you learn to select elements, add event listeners, and change HTML elements with JavaScript, finishing with the color div challenge; next, explore setTimeout and setInterval.

Master JavaScript basics by exploring setTimeout and setInterval, learning how to run a function after a delay and on a repeating interval, and building three fun projects on day five.

Learn how to use setTimeout to delay a function, handle button clicks, alerts after two seconds, and change font size with addEventListener and a three-second timeout.

Explore how setInterval runs a function repeatedly, returns an interval ID, and uses clearInterval to stop it with start and stop buttons, featuring a CSS rotate effect.

Build a rotating circle using setInterval, with start/stop controls and a slider that updates rotation in real time, syncing via event listeners and transform rotate.

Wrap up day five by reinforcing set interval, set timeout, and adding button events to change HTML elements with JavaScript, and preview day six with the fetch API lessons.

Discover how to use fetch to retrieve data from the internet, master promises and async await, and build fun projects in day six of the JavaScript 45-day bootcamp.

Explore how http and Postman help fetch data from the internet, practice get, post, put, patch, and delete requests, and inspect json responses and headers.

Learn to fetch data with JavaScript, using headers and JSON, handle promises with .then and .catch, and prevent multiple requests with a loading flag.

Rewrite fetch logic using async/await, making functions async and awaiting responses. Implement try/catch error handling to improve readability and maintainability over dot then syntax.

Master asynchronous fetch using async/await to display a dog image from the dog API by creating an image tag and a button, implementing loading state and error handling.

Celebrate completing day six as you mastered fetch, http requests, responses, headers, async/await, and try catch. Next, learn how to send post data to a server using form data.

Master the fetch function to send data to a server through a contact form and implement pagination to navigate article lists using next and previous controls.

Learn to send a post request with fetch, stringify json bodies, handle responses and errors, and test endpoints using a request bin.

Practice building a contact form that captures email and message, sends data as JSON via fetch to a request bin, and handles responses with JSON parsing.

Implement pagination with next and previous controls, fetch images via a template url using start and limit, update start by five, disable previous at zero, and render thumbnails.

Celebrate finishing day seven by conquering the contact form and pagination challenges, proving you can code on your own; next, dive into Chrome extensions.

Explore Node.js to build a JavaScript server, handle requests and responses, and implement http verbs like get, post, put, and delete, with route parameters and status codes.

Install Node.js and set up a new node project with npm and express, then create a basic server with a get endpoint on port 3000 and test it at localhost.

Discover how to use Postman to send post requests to a node server, create a user with a JSON body, and handle request bodies with Express.json and endpoints.

Create a put endpoint with a route parameter to update a resource, log the id and body, then implement a delete endpoint to complete CRUD operations using route parameters.

Explore http response statuses in NodeJS, learning 200 for success, 201 for create, and 204 for no content, and how to apply them to put and delete endpoints.

Master Node.js basics by starting a Node.js server, handling HTTP verbs and statuses, creating endpoints, and sending and receiving JSON data with minimal code.

Learn to manipulate arrays in Node.js by creating, updating, retrieving, filtering, and deleting items with array functions, while managing users via Postman API calls.

Learn how to use push and unshift to add items to arrays in a NodeJS app, applying these operations to a users list during a practical coding challenge.

Learn to use the array filter function to remove items, illustrated by filtering out red colors, then apply the approach to a node server delete operation.

Explore the find function to locate the first matching array element, returning undefined if not found, and implement a Node.js get endpoint returning the user or 404.

Implement the update endpoint by using find and filter to replace an existing user, returning 404 if not found, then test with postman using the request body.

Master array methods like unshift, push, filter, and find while building APIs with NodeJS and Postman. Prepare to hook your work to a real database in the next lesson.