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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.