The Complete Web Development Bootcamp

Explore front end and back end fundamentals, including HTML, CSS, JavaScript, REST and GraphQL, and how MongoDB and Redis support single page applications and server side rendering for full stack development.

Install Visual Studio Code as the recommended code editor for local web development. Use an open-source editor that runs on macOS, Windows, and Linux, with auto format on save.

Learn to set up Visual Studio Code, customize themes, install essential extensions like bracket pair colorizer and prettier, enable Git integration, and run automatic debug tests from the interface.

Build a single-page React front end that uses the Unsplash API to fetch images and render image cards via header, search, and image card components, created with Create React App.

Create a new React application using create React App, organize a front-end folder, and learn essential setup with npm, npx, and Node.js while integrating the Unsplash API.

Install node, npm, and npx to bootstrap a React application with the Create React App utility, verify versions on macOS, Windows, and Linux, and bootstrap the frontend.

Create a React application using create-react-app 4.0.1, set up a front end inside an images gallery folder, install dependencies, bootstrap the app, and start the development server at localhost 3000.

Start a React application using create React app, run npm start on port 3000, develop with hot reloading, edit src/app.js in VS Code, and observe live updates in the browser.

Explore the structure of a create react app frontend, including package.json, dependencies like React and react-dom, npm start, and the src, public, and node_modules folders.

reinstall dependencies by removing node_modules and running npm install, then start the app with npm start to restore react scripts and, later, build for production with npm run build.

Create an optimized production build of a frontend with npm run build, inspect the build artifacts in the build folder, and serve with serve -s build.

Initialize a React app, clean up defaults, install React Bootstrap, and create header, search, welcome, and image card components to fetch and display Unsplash images.

Clean up the default react application by removing unused files, updating app.js and index.js, and moving index.css into a new css folder to run the images gallery with npm start.

Define functional components in React as functions, using regular or arrow syntax. See how JSX maps to createElement and how React Dom renders app.js and index.js.

initialize and configure git for your project, verify installation, set global username and email, and connect a local repository to a remote GitHub repository.

Verify git availability, initialize a repository in the images gallery folder, and create a gitignore for dsstore and dot underscore store before committing the initial front end version.

Learn how to remove the eslint cache file from git index and add it to gitignore, then commit the changes across front end and images gallery folders.

Set up git in your project and explore commits with git log and VS Code extensions such as git history. Connect local repo to GitHub and push changes to main.

Replace the default favicon, rename the app to images gallery, update index.html title and description, generate and place new favicons via manifest.json, verify in browser, commit and push changes.

Install react bootstrap and bootstrap, create a header component using react bootstrap's navbar with brand, import bootstrap CSS, and integrate it into app.js to render a simple header.

Explore how React props pass properties to components like navbar and header, access them via the props object, and use destructuring to extract title values for dynamic rendering.

Build a search component with input and button that fetches images from Unsplash API, clears form, displays image cards, and uses a controlled input with state in the app component.

Create a search component using React Bootstrap with an input and a primary submit button on the same row, integrated inside a container layout under the header.

Center the search input and button, add margins, and customize the navbar background with a JavaScript style object in React using Bootstrap and camelCase CSS.

Wire a search form to trigger an api fetch from Unsplash by handling submit events, preventing default reload, and passing a submit handler from app to the search component.

Define word state with useState, pass word and setWord to the search component, and trigger a fetch request on submit using the controlled input.

Disable the git lens current line blame annotations in VS Code by adjusting extension settings, then continue with project setup.

Learn to manage environment variables in a react app using dot env local files, the react app prefix, and process.env for secure unsplash key usage in API requests.

Learn to securely store the Unsplash client ID in environment variables and build API requests, understanding https URLs, endpoints like search/photos or search/random, and query parameters including client_id.

Learn to make your first Unsplash API request using fetch, constructing the URL with a query and client id via JavaScript template literals, to retrieve a random photo.

Learn to make requests with fetch, handle promises, and inspect the Unsplash json responses, including status codes, headers, and image metadata such as urls and id.

Explore how the Unsplash API's random photo endpoint returns an image object with key value pairs, and implement clearing the search input whenever the search button is pressed.

Learn to reset a controlled search input by binding to state and clearing after a fetch; also add image card component and configure eslint and prettier before pushing to GitHub.

Explore how prettier, a JavaScript code formatter, and eslint, a linter, automate formatting on save, fix style issues, and reveal syntax errors during development.

Install and enable the ESLint extension, verify ESLint in package.json and node_modules, and validate HTML, JavaScript, and React files to reveal syntactic errors and fixable typos on save.

Install and enable the prettier eslint plugin, extend eslint with prettier, and format code on save in a React front end using npm packages in the front end folder.

Learn to adjust prettier by adding a .prettierrc or a package.json prettier object, set single quotes, and ensure eslint uses prettier rules, with VS Code reloading steps.

Enable eslint automatic fixes on file save by configuring VS Code, using source.fixAll.eslint with the prettier plugin, and applying semicolon and formatting changes in your front end project.

Add npm linting scripts with eslint and prettier, enable code actions on save in VS Code, and run lint and lint --fix to identify and fix JavaScript issues.

Fix all linting errors in the front end project by running eslint with fix, testing format on save, and aligning formatting with prettier and two spaces via VS Code settings.

Adjust VS Code editor tab size to two by editing settings.json, verify header.js reflects two spaces, and commit the changes in source control.

Configure eslint and prettier in the front-end project by installing the eslint extension and praetor plugins, using eslint config prettier to avoid formatting conflicts.

Plan the next steps for a frontend app: set up GitHub and git, configure ESLint and Prettier, and fetch images from the Unsplash API with image card and welcome components.

Store retrieved images in React state using useState, and update with setImages to a new array built via the spread operator, from the Unsplash API, and avoid mutating state.

Learn how React state updates asynchronously, how setImages delays updates, and how to observe re-renders as you search images with the Unsplash API, inserting new results before existing ones.

Install the React Developer Tools Chrome extension to observe component state and structure in the app, including the Up root component's word and images state and how searches update them.

Create an image card component using React and React Bootstrap, render images from an images array, and integrate it into the app with a title, description, and action buttons.

Add props to the image card component to render each photo’s title, description, and small url by passing an image object from state, and conditionally render cards when images exist.

Learn to render all images from an images array by using the map method, creating image cards with a unique key and an image prop, and improving the layout.

Layout image cards with a Bootstrap container, row, and column to create a responsive grid across xs, md, and lg breakpoints, mapping the images array to cards with keys.

Implement delete image functionality by wiring a delete button to call a handle delete image function that filters the images array by image.id to update state and user interface.

Generate a text-based SVG logo using make text.io, then integrate it into a React header, adjusting size with style props and setting a light header background.

Edit the logo SVG in VS Code using the SVG editor to reduce image padding, adjust size, and save the changes, then verify the updated logo in the browser.

Create a welcome component with React Bootstrap's Jumbotron to display a placeholder when no images exist, and render it via a ternary operator in the app using the Unsplash API.

Bootstraps a basic React front-end that talks to the Unsplash API using an API key, renders reusable image cards, and manages search results with hooks, state, and props.

Review the basic frontend codebase of the images gallery built with Create React App, covering components, state, props, JSX, and environment setup, and previewing a Python Flask API.

Update a create-react-app project by bumping react-scripts to a newer version, manage eslint cache behavior, and refresh dependencies with npm install, ensuring gitignore excludes the eslint cache and node_modules.