Git a Web Developer Job: Mastering the Modern Workflow from Udemy

This course was updated in June of 2023 to match the demands and trends of the industry.

You already understand the basics of HTML and CSS, but you don’t necessarily feel qualified for the web developer jobs you want. In this course we’ll bridge that gap by building a mobile-first responsive website, together, step-by-step. Along the way we’ll learn the modern skill-set that companies are looking for in developers.

I know what companies are looking for because as a senior developer I’ve been on the hiring side of job interviews. Every time we passed on a candidate I’d think to myself “It would be nice if we could point them towards a course that taught the exact skill set we’re looking for.”

I couldn’t find a course like that - so I built this one.

By the end of this course you’ll be able to build sites using the modern skills, tools, and best-practices that companies need in developers.

Take your developer career to the next level by:

Learning Git, GitHub, and command-line basics to collaborate with other developers and deploy your sites live up onto the web.
Leveraging Node.js tools like NPM and webpack to save time by automating tasks.
Enhancing your CSS knowledge with techniques (BEM & PostCSS) to keep your styles super-organized and manageable even on larger sites.
Speeding up your sites with the mobile-first performance philosophy.
Understanding JavaScript basics like Object-oriented Programming, and how to write well-structured code using the ES6 module pattern (Babel & webpack).
Using the Netlify service to not only host your website but also learn the very basics of cloud (or AWS Lambda) functions.
Discovering tips to get more job interviews, do well in interviews, and continually progress in your career (avoid burnout & stagnation).

This course may be brand new, but this isn’t my first time teaching. I’ve led trainings for Fortune 500 companies, and I’ve already helped over 7,000 people on Udemy and received the following feedback:

"Brad definitely has some of the best techniques to embed the lesson into your mind… hands down these are the best tutorials I have had the opportunity to view."

"Presentation is concise without being tedious… you honestly feel that you have a thorough understanding of the subject."

"…[Brad] explained the process. Not memorize this or that, he explained the process. If you're looking to take a course to understand the foundations of creating websites, look no further."

I've been teaching for the better part of a decade and I consider this course my magnum opus. This is the course I wish I could have taken several years ago.

Become highly valuable and relevant to the companies that are hiring web developers; in one convenient place alongside one instructor. If you're ready to begin your transformation - I'll see you on the inside.

What's inside

Learning objectives

Build websites using the modern skills, tools, and best-practices that companies are looking for in developers.
Write organized, well structured javascript and css that other developers can easily understand.

Confidently apply for web developer jobs knowing you can jump into a dev team and immediately contribute to projects.

Build websites using the modern skills, tools, and best-practices that companies are looking for in developers.
Write organized, well structured javascript and css that other developers can easily understand.
Confidently apply for web developer jobs knowing you can jump into a dev team and immediately contribute to projects.

Syllabus

Welcome!

Course Overview

Git Essentials

What is Git?

See Git in Action

Important Note About Text Editing Software

Quick Note For Mac Users

Git Your Hands Dirty

Setup Your GitHub

Intro to Node.js & NPM

The Need for Automation and Organization

A Quick Note

Node.js Introduction

NPM Introduction

Important Note About Package Versions To Save You Frustration

Webpack Essentials

Webpack Introduction

Setup Your Text Editor To Understand PostCSS Syntax

CSS With Webpack

Important Note

CSS Architecture

CSS File Architecture

What is BEM?

Complete Two Blocks

Quick Webpack Timeout

Webpack Dev Server

Mobile-first Essentials

What does "Mobile-first" Mean?

Responsive Images

Tips for Testing Responsive Images

Let's Build!

Creating Reusable Blocks

Headline Block

Column Layout Block

Attention to Detail (Part 1)

Attention to Detail (Part 2)

Git Timeout

Git Branches

Building "Our Features" Section

Styling Our Features (Part 1)

Styling Our Features (Part 2)

Building "Testimonial" Section

Styling Testimonials (Part 1)

Quick Note

Styling Testimonials (Part 2)

Styling Testimonials (Part 3)

Let's Finish Styling our Site

Styling our Footer

Styling our Header (Part 1)

Styling our Header (Part 2)

CSS Grid (Overlapping Content)

CSS Grid For Columns

JavaScript Organization

Object-Oriented Programming

The JS Module Pattern and "webpack"

Writing JavaScript for Our Header Menu

How to Avoid Spaghetti Code

Adjusting Our Mobile Menu

Animating Hamburger Menu Icon Into an "X"

Optional: Removing Floats from Site Header

Revealing Elements on Scroll

Revealing Elements on Scroll (Part 2)

Revealing Elements on Scroll (Part 3)

Desktop Sticky Header

Desktop Sticky Header (Part 1)

Desktop Sticky Header (Part 2)

Desktop Sticky Header (Part 3)

Build Our Own Modal / Lightbox Overlay

Building a Modal From Scratch (Part 1)

Building a Modal From Scratch (Part 2)

Code Splitting & Lazy Loading

Code Splitting With Webpack

Lazy Loading Images for Faster Page Loads

Building and Deploying

Preparing Our Files for Go Live (Part 1)

Preparing Our Files for Go Live (Part 2)

Note About Vendor JS File

Preparing Our Files For Go Live (Part 3)

Preparing Our Files For Go Live (Part 4)

Go Live! Deploying our Site to GitHub Pages

Netlify (Automated Builds & Cloud Functions)

Netlify Introduction

Cloud Functions / AWS Lambda Example (Part 1)

Cloud Functions / AWS Lambda Example (Part 2)

Cloud Functions / AWS Lambda Example (Part 3)

CORS Solution (Test Cloud Function from Localhost)

Integrating React Into Our Workflow

Git Tips - How to Handle (and Avoid) Merge Conflicts

Looking Forward

Job Interviews

Next Steps & Career Progression

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches JavaScript basics like Object-oriented Programming and how to write well-structured code, two highly relevant industry skills, using the ES6 module pattern, Babel, and webpack

Helps learners take their developer career to the next level by developing skills, tools, and best practices demanded by companies hiring web developers

Taught by an experienced senior developer and Fortune 500 trainer recognized for their teaching skills, who shares industry insights and best practices

Leverages modern technologies and tools like Node.js, NPM, Webpack, and Git, ensuring relevance to industry demands

Strengthens an existing foundation for intermediate learners, teaching advanced techniques and concepts, including CSS architecture with BEM and PostCSS and JavaScript organization

Builds a strong foundation for beginners, providing a comprehensive overview of web development fundamentals, including HTML, CSS, and JavaScript

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Git a Web Developer Job: Mastering the Modern Workflow with these activities:

Read 'Responsive Web Design' by Ethan Marcotte

Show steps

Ethan Marcotte's book provides a foundational understanding of responsive web design principles and best practices, enhancing your ability to create websites that adapt seamlessly to different devices.

View You Deserve a Tech Union on Amazon

Show steps

Purchase or borrow the book
Read through the chapters and take notes on key concepts
Apply the principles and techniques to your own web development projects

Compile a resource list for web development

Show steps

Creating a comprehensive resource list will provide you with a valuable collection of tools, articles, and tutorials that you can refer to throughout your web development journey.

Show steps

Identify categories of resources you want to include, such as tutorials, tools, and reference materials
Search for and gather resources from reputable sources
Organize and categorize the resources in a central location

Join a study group or online forum

Show steps

Engaging with peers in a study group or online forum will provide opportunities to share knowledge, ask questions, and receive feedback on your understanding of course concepts.

Show steps

Identify relevant study groups or online forums
Attend meetings or participate in discussions regularly
Share your insights, ask questions, and actively engage with other members

Five other activities

Expand to see all activities and additional details

Show all eight activities

Design a mobile-first website prototype

Show steps

Putting your CSS knowledge into practice by designing a mobile-first website prototype will reinforce your understanding of CSS principles and help you develop a stronger foundation in web design.

Show steps

Sketch out your website layout and design
Use a prototyping tool or code editor to create a basic HTML and CSS framework
Implement responsive design principles to ensure your website adapts to different screen sizes
Test your prototype on multiple devices or screen resolutions

Follow tutorials on CSS preprocessors

Show steps

Exploring CSS preprocessors through tutorials will enhance your CSS skills, allowing you to write more maintainable, scalable, and reusable code.

Show steps

Identify popular CSS preprocessors, such as Sass or Less
Find tutorials or online courses that provide a comprehensive introduction to the chosen preprocessor
Follow the tutorials, experiment with code examples, and implement the techniques in your own projects

Solve JavaScript coding challenges

Show steps

Engaging in JavaScript coding challenges will test your understanding of JavaScript concepts, improve your problem-solving skills, and enhance your ability to write efficient and effective code.

Browse courses on JavaScript

Show steps

Find online platforms or resources that offer JavaScript coding challenges
Attempt to solve the challenges on your own
Review solutions and explanations to understand different approaches and best practices

Contribute to open-source web development projects

Show steps

Participating in open-source projects allows you to collaborate with others, learn from experienced developers, and contribute to the wider web development community.

Browse courses on Community Involvement

Show steps

Identify open-source projects that align with your interests and skill level
Review the project documentation and contribution guidelines
Make a code contribution, such as fixing a bug or adding a new feature
Submit a pull request and engage with the project maintainers

Develop a simple portfolio website

Show steps

Building a portfolio website will challenge you to apply the skills and knowledge acquired in the course, showcasing your abilities and providing a tangible demonstration of your web development capabilities.

Browse courses on Portfolio Development

Show steps

Plan the structure, design, and content of your portfolio website
Choose appropriate technologies and tools for front-end and back-end development
Implement responsive design principles to ensure your website adapts to different devices
Deploy your website on a hosting platform

Career center

Learners who complete Git a Web Developer Job: Mastering the Modern Workflow will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers are responsible for building and maintaining websites. Leveraging the skills, tools, and best practices in this course will allow someone new to web development to kick-start their career as a Web Developer, or help a more experienced Web Developer enhance their work.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-end Developers design, build, and maintain the front-end, or user-facing side, of websites. This course will help you build a solid foundation in the skills, tools, and best practices Front-end Developers use to create responsive and visually appealing websites.

See salaries and explore the career path for Front-End Developer

HTML Developer

HTML Developers use the HTML programming language to create the structure and content of web pages. While this course assumes a basic understanding of HTML, it also delves into responsive images and mobile-first development, giving you an opportunity to build on your HTML skills and become an even more proficient HTML Developer.

See salaries and explore the career path for HTML Developer

Software Developer

Software Developers apply the principles of computer science to design, develop, deploy, test, and maintain software systems. This course focuses on the web development aspect of Software Development, but the principles and tools taught can be applied in many other areas of Software Development.

See salaries and explore the career path for Software Developer

JavaScript Developer

JavaScript Developers use the JavaScript programming language to create dynamic and interactive web applications. This course covers the fundamentals of JavaScript, as well as more advanced topics such as object-oriented programming and the ES6 module pattern. This knowledge can help you begin a career as a JavaScript Developer, or enhance your skills if you are already one.

See salaries and explore the career path for JavaScript Developer

CSS Developer

CSS Developers use the CSS programming language to style and lay out web pages. This course will teach you the fundamentals of CSS, as well as the principles of CSS architecture, bem, and PostCSS. These skills will help you ensure that your websites are both visually appealing and easy to navigate.

See salaries and explore the career path for CSS Developer

UX Designer

UX Designers focus on the user experience of websites and applications. While this course focuses primarily on the technical aspects of web development, it also includes some basic principles of UX design, such as accessibility and user testing. This knowledge can help you create websites that are both user-friendly and visually appealing.

See salaries and explore the career path for UX Designer

UI Designer

UI Designers create the visual elements of websites and applications. This course will help you build a solid foundation in the principles of UI design, such as responsive design and mobile-first development.

See salaries and explore the career path for UI Designer

Back-End Developer

Back-end Developers design, build, and maintain the back-end, or server-side, of websites. While this course focuses primarily on front-end development, some of the concepts, such as working with JavaScript and Node.js, could be useful for aspiring Back-end Developers.

See salaries and explore the career path for Back-End Developer

Full-Stack Developer

Full-Stack Developers design, build, and maintain both the front-end and back-end of websites. While this course focuses primarily on front-end development, some of the concepts, such as working with JavaScript and Node.js, could be useful for aspiring Full-Stack Developers.

See salaries and explore the career path for Full-Stack Developer

Business Analyst

Business Analysts help businesses understand and improve their processes and systems. This course may be useful for aspiring Business Analysts, as it teaches essential analytical and problem-solving skills.

See salaries and explore the career path for Business Analyst

Technical Writer

Technical Writers create and edit technical documentation, such as user manuals and training materials. This course may be useful for aspiring Technical Writers, as it teaches essential communication and writing skills.

See salaries and explore the career path for Technical Writer

IT Project Manager

IT Project Managers are responsible for planning, executing, and managing IT projects. This course may be helpful for aspiring IT Project Managers, as it covers several important topics, such as project management methodologies and risk management.

See salaries and explore the career path for IT Project Manager

Product Manager

Product Managers are responsible for the overall vision and strategy of products. While this course does not explicitly cover product management, the skills and knowledge it teaches, such as understanding user needs and stakeholder management, can be valuable for aspiring Product Managers.

See salaries and explore the career path for Product Manager

Webmaster

Webmasters are responsible for the maintenance and day-to-day operation of websites. This course may be helpful for aspiring Webmasters, as it covers several important topics such as version control, web hosting, and performance optimization.

See salaries and explore the career path for Webmaster

Git a Web Developer Job

Mastering the Modern Workflow

Here's a deal for you

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses