Git a Web Developer Job: Mastering the Modern Workflow

Explore Git, the world's most popular version control system, and learn how it manages history. See how it enables collaboration and supports feature branches with seamless merging.

See Git in action as you learn repository concepts, working directory, staging, commits, and pushes and pulls with GitHub to manage history.

Learn to install and configure git, master the command line with git bash or terminal, and create, track, commit, and clone repositories for real-world web development workflows.

Create a personal GitHub account and a new public repository, clone starter files, link your local repo to GitHub, and push changes with commits to master.

Master Node.js and NPM to automate web development tasks and stay organized. Automate browser refresh on save, prefix CSS, and consolidate header.css and footer.css into one file via package management.

Explore how Node.js lets JavaScript run on servers or as a development tool, install it, run code, and use fs and https to create files and download an image.

Learn what npm is and why package management matters. Explore node and browser packages and follow a hands-on demo installing lodash and normalize.css via package.json.

Discover how webpack functions as a bundler to process and bundle assets, scripts, and styles. Configure entry and output in webpack.config.js, and use npm scripts with watch mode.

Set up a modern css workflow with webpack to automate styling in your javascript projects. Learn to integrate css loader, style loader, and postcss with autoprefixer for variables and nesting.

Organize your css with a modular file architecture for the travel site by creating modules and base folders and importing partials via postcss.

Explore Bem, including blocks, elements, and modifiers, and apply class-based selectors, naming conventions, and nested css techniques for a large hero section.

Complete the text styles for the large hero block and the button block by refining white typography, rem-based sizing, and color variables with bem-based class names for consistency.

Set up Webpack dev server to hot-reload CSS and JavaScript, auto-reload HTML, and view the site on any device over the same network using the local IP on port 3000.

Explore what mobile first means, why desktop-first responsive design falls short, and how to apply a mobile-first CSS workflow—baseline styles, mixins, and progressive enhancement—to a travel website.

Master responsive images with the picture element and srcset to handle art direction cropping and image resolution and file size considerations.

Learn practical tips for testing responsive images, using dash i overlays to identify the current image, and simulating different device pixel ratios with Chrome DevTools.

Learn to build reusable css blocks with wrapper and page section modules, tidy mobile hero spacing, adjust font sizes, and convert images to block level for spacing across screen sizes.

Build a reusable headline block for a travel site using modifiers to control alignment, color, and font size. Apply responsive typography and wrapper adjustments, preparing for a two-column layout.

Build a reusable two-column row on a 12-column grid with four and eight column widths, using floats, clearfix, and gutters, then stack to a single column on small screens.

Develop attention to detail by refining content, spacing, and responsive layouts, using bottom-margin modifiers, column width adjustments, and responsive images with picture elements, source sets, and sizes attributes.

Refine typography and layout with precise css adjustments, including removing top margins, adjusting line height and font size, and applying a generic content container while exploring bem versus global styles.

Learn how to work with git branches, create and switch branches, merge changes, and manage master and feature workflows using commands like git branch, git checkout, and git merge.

Style the travel website's features section with a bold section title, a two-column layout, and icon-bearing feature items. Implement responsive tweaks for mobile with small-screen mixins and adjust typography.