Become a Web Developer: 2024 Bootcamp

Convert a Figma design into a web page by creating index.html and styles.css, adding links with anchors, and styling a top section with a dark blue background.

Remove the default gaps by zeroing HTML and body margins, wrap the top dark blue background in a centered container with a max width, and tune padding for responsive layout.

Find your joy in programming by embracing burnout as normal and building a positive mindset with background music, a mechanical keyboard, journaling, self-care, and an optimized environment.

Master VS Code settings for readability, including font size, format on save, and tab size, and apply Google Fonts like Source Sans Three to the whole page.

Learn practical Figma tips without dev mode, using designer mode to copy text and color values, and export svg icons or raster images for web projects.

Explore the CSS box model by converting pixels to rem, setting font sizes and line height, and mastering inline, block, and inline-block behaviors with a CodePen experiment.

Learn to build a four-column layout with CSS grid, using a wrapper container and grid template columns: 1fr, plus a 16px column gap, borders, padding, and responsive layouts.

Learn to add scalable vector icons to a four-column page by exporting SVGs, pasting SVG markup into HTML, and styling the intro features with precise typography and margins.

Discover a quick tip in Figma's dev mode: copy SVG code directly from the right-hand panel and paste it into HTML without downloading a file.

Learn to create blurred background color splashes for a web page by adding purple and blue circles, applying blur, opacity, absolute positioning, overflow hidden, and z-index to foreground content.

understand why the lost art of css matters and how layout fundamentals and the box model yield scalable designs. don't skip css; this foundational skill boosts job security for developers.

Develop the pets area under the header with a meet our friends heading and a pet filter for all pets, dogs, and cats.

Build a two-column grid of pet cards with text-first content and a photo, include alt text, export the image as jpeg 2x, and style with border, shadow, and rounded corners.

Finish the pet card by applying padding and typography (1.625rem heading size, 600 weight) and using object-fit: cover for a four-pet grid with 34px column and 28px row gaps.

Master responsive web design by using Chrome DevTools for device simulation, implementing media queries to adjust font sizes and padding, and converting four-column layouts to single-column on small screens.

Refine mobile styles with a two-column pet card layout that switches to one column on small screens, adjust padding and font sizes, and implement hover transitions for buttons.

Understand why git is essential for web development as a universal skill that enables backups, collaboration, and syncing and merging changes across teams.

Install git on your computer using mac or windows steps, verify with git --version in the VS Code terminal, and configure user name and email for managing files and collaborating.

Learn to turn a local website folder into a git repository, using git init, add, commit, and checkout to track changes, revert mistakes, and manage multiple repos.

Push your local git repo to GitHub by creating a repository, configuring SSH keys for authentication, and pushing to main or master while ignoring system files.

Learn to back up and clone existing repos, then publish a shareable url for a static HTML website on GitHub Pages by deploying from a branch like main.

Start your own website now on GitHub Pages to build a public portfolio and blog, using HTML and CSS to showcase your skills and passions while navigating non-disclosure agreements.

Update the pet adoption website by editing index.html and CSS, commit and push to the main branch, and refresh the live GitHub pages with smooth scrolling and an seo-friendly title.

Learn how to pull coworkers' updates into your local repo using git fetch and git pull origin main, and resolve conflicts when merging.

Master git feature branches to keep the live main branch stable while you develop changes. Commit, push, and merge finished work back into main or master on GitHub pages.

This lecture introduces JavaScript, explains browser-specific versus universal programming, and uses CodePen to demonstrate DOM manipulation, variables, querySelector, if-else logic, and event listeners for dynamic web interaction.

Explore functions and objects in JavaScript, defining reusable recipes with parameters, and accessing object properties and methods, including browser helpers like console and document.

Fetch dynamic weather data for a web page using JavaScript fetch, async/await, and JSON parsing from a Miami weather URL, extracting the temperature for display.

Finish the dynamic temperature feature by wiring the HTML output with JavaScript to display live weather data. Learn basic git workflows like commits, pushes, and pull requests.

Fetch dynamic pet data from a live url and parse json, then loop over the pet array to build cards using name, species, birth year, description, and photo.

Create dynamic pet cards from a data array by cloning a single html template for each pet, using a document fragment wrapper to batch DOM updates and render names.

Develop a dynamic pet card feature by cloning templates, rendering each pet's name, description, and age from birth year, and implement a fallback image for missing photos.

Learn to implement a fallback image for missing pet photos in dynamic cards by conditionally checking pet.photo and substituting a fallback.jpeg, with live preview and a Git workflow.

Learn to implement an active species filter button with CSS active styling and hover effects, and use JavaScript to toggle the active class on click, preparing pet-card filtering.

Implement interactive pet filtering by tagging each pet card with a species using data attributes, reading the clicked button’s value, and showing or hiding cat, dog, or all cards.

Discover how a trusted server-side environment and a database power truly dynamic websites, enabling users to add, edit, or delete pets in a secure browser interface.

Learn to create a free cloud MongoDB database for a pet adoption site, add a pets collection with cat and dog documents, and query with filters.

Learn how to connect a MongoDB pets collection to a GitHub Pages site using Netlify for server-side functions, deploy a private function, and publish a dynamic site.

Explore how Node.js runs server-side code, test locally with Netlify Dev, and return data through plain text, HTML, or JSON by configuring headers.

Connect to a MongoDB database from a Node environment using the official MongoDB driver, configure a connection string, and fetch documents from the pets collection.

Learn to securely manage sensitive values with Netlify environment variables and access-control-allow-origin headers. Publish dynamic data to GitHub Pages via a Netlify function URL and prepare CRUD actions.

Move the site from GitHub Pages to Netlify, preview with Netlify dev, and implement an admin page to manage pets via Netlify Cloud Functions using a secret username and password.

Demystify cookies and their role in web sessions, showing how browsers store domain-specific cookies and automatically send them with every request to remember users.

Learn to implement cookie-based authentication on a pet adoption admin dashboard by building a simple session id, validating via a cloud function, and redirecting unauthenticated users to a login form.

Learn to implement cookie-based authentication with set-cookie headers, httpOnly, sameSite, and max age, and to route login to /admin and logout to clear the cookie.

Refine the admin area by styling the login form with full-width fields, a purplish blue button, and spacing, then add back-to-home page and logout link styling for a polished dashboard.

Build admin pet management view by querying the database and generating server-side html to render as pets. Add edit and delete actions with a create button in a two-column grid.

This lecture demonstrates enhancing the admin home with an add new pet button and a loading placeholder grid that animates while pets data fetches, improving user experience.

Transform the add new pet button from a 404 page into a functional form on the admin dashboard, using client-side JavaScript to collect pet name, birth year, species, and description.

Build a Netlify serverless function to receive pet data from the client, parse the JSON, and return a success response, with a reusable admin check before saving to the database.

Save new pet data to the database using a reusable Netlify function db client for MongoDB and validate and sanitize input with sanitize-html before inserting into the pets collection.

Learn to prevent malicious code from rendering by escaping user input with the escape-html package, applying it to pet name, description, and alt text.

Enable editing existing pets by turning the edit button into a dynamic link using the pet's underscore id, then fetch singular pet with a Netlify function to prefill the form.

Learn to edit existing pets by validating ids, securely pre-populating edit fields, and using find one and update to save changes with responsive user experience enhancements.

Animate forms during loading by adding a form is loading class that grays out fields, flashes placeholders, and focuses the field after data loads, including save and add pet forms.

Implement delete pet on the admin dashboard by wiring an onclick handler, removing the pet card from the dom, and calling a Netlify cloud function to delete from the database.

Learn to push your site live to Netlify from a GitHub repo, commit and deploy, monitor builds, verify live login, admin CRUD features, and css fixes.

Explore storing user uploaded photos with Cloudinary on a free plan, and securely manage API keys and environment variables for Netlify deployments.

Build a secure Cloudinary direct-upload flow by creating a Netlify function that generates a time-limited signature from your API secret and feeds it to the client.

Learn to add a photo file field, fetch a cloudinary signature, upload via axios, and preview the uploaded image using its public id.

Upload Cloudinary image data and send the public ID, version, and signature to the server, then validate with the API secret and save the photo field to the database.

Learn how to edit an existing pet's photo by locking the form during upload, showing a preview, and preventing double submissions with client-side and server-side Cloudinary integration.

Merge the photo upload feature into the main branch, deploy the live site on Netlify, and verify pet management with updated photos, then prepare for an express server upgrade.