Git a Web Developer Job: Mastering the Modern Workflow

Focused View

Brad Schiff

15:38:22

53 View

01 - Welcome!

001 Course Overview.mp4

07:44

02 - Git Essentials

001 What is Git.mp4

09:16

002 See Git in Action.mp4

14:57

003 Important Note About Text Editing Software.html

004 Quick Note For Mac Users.html

005 Git Your Hands Dirty.mp4

14:19

006 Setup Your GitHub.mp4

14:29

external-links.txt

03 - Intro to Node.js & NPM

001 The Need for Automation and Organization.mp4

07:16

002 A Quick Note.html

003 Node.js Introduction.mp4

20:00

003 test.js.zip

003 test.zip

004 07-npm.zip

004 NPM Introduction.mp4

14:29

005 Important Note About Package Versions To Save You Frustration.html

005 package.zip

04 - Webpack Essentials

001 08-webpack.zip

001 Webpack Introduction.mp4

20:02

002 Setup Your Text Editor To Understand PostCSS Syntax.html

003 09-webpack-css.zip

003 CSS With Webpack.mp4

20:04

004 Important Note.html

004 webpack.config.zip

05 - CSS Architecture

001 10-lets-begin.zip

001 CSS File Architecture.mp4

18:49

001 design-hifi.zip

001 photoshop-source.zip

002 11-lets-begin-2.zip

002 What is BEM.mp4

18:32

003 12-large-hero-btn.zip

003 Complete Two Blocks.mp4

19:24

06 - Quick Webpack Timeout

001 13-webpack-dev-server.zip

001 Webpack Dev Server.mp4

18:19

07 - Mobile-first Essentials

001 16-mobile-first-mixins.zip

001 What does Mobile-first Mean.mp4

16:36

002 17-resp-images-2019.zip

002 Responsive Images.mp4

20:00

003 Tips for Testing Responsive Images.mp4

06:56

08 - Lets Build!

001 19-continue-styling.zip

001 Creating Reusable Blocks.mp4

16:58

002 20-lets-build.zip

002 Headline Block.mp4

18:41

003 21-columns.zip

003 Column Layout Block.mp4

18:09

004 22-details.zip

004 Attention to Detail (Part 1).mp4

18:57

005 23-details.zip

005 Attention to Detail (Part 2).mp4

15:04

09 - Git Timeout

001 Git Branches.mp4

19:29

10 - Building Our Features Section

001 Styling Our Features (Part 1).mp4

18:54

002 26-our-features.zip

002 Styling Our Features (Part 2).mp4

09:28

11 - Building Testimonial Section

001 27-testimonials.zip

001 Styling Testimonials (Part 1).mp4

19:58

002 Quick Note.html

003 28-testimonials.zip

003 Styling Testimonials (Part 2).mp4

16:13

004 29-testimonials.zip

004 Styling Testimonials (Part 3).mp4

12:17

12 - Lets Finish Styling our Site

001 33-footer.zip

001 Styling our Footer.mp4

07:51

002 34-header.zip

002 Styling our Header (Part 1).mp4

19:12

003 35-header.zip

003 Styling our Header (Part 2).mp4

09:46

004 CSS Grid (Overlapping Content).mp4

13:44

004 index.html

004 -large-hero.zip

005 CSS Grid For Columns.mp4

18:58

005 -row.zip

external-links.txt

13 - JavaScript Organization

001 36-js.zip

001 Object-Oriented Programming.mp4

19:36

002 37-import-export.zip

002 The JS Module Pattern and webpack.mp4

12:02

14 - Writing JavaScript for Our Header Menu

001 40-mobile-menu.zip

001 How to Avoid Spaghetti Code.mp4

17:40

002 41-mobile-menu.zip

002 Adjusting Our Mobile Menu.mp4

16:31

003 42-icon.zip

003 Animating Hamburger Menu Icon Into an X.mp4

17:47

004 Optional Removing Floats from Site Header.mp4

07:07

004 -primary-nav.zip

004 -site-header.zip

15 - Revealing Elements on Scroll

001 43-feature-scroll.zip

001 Revealing Elements on Scroll.mp4

19:55

002 Quick Note.html

003 44-reveal-continued.zip

003 Revealing Elements on Scroll (Part 2).mp4

18:03

004 45-reveal-completed.zip

004 Revealing Elements on Scroll (Part 3).mp4

17:21

16 - Desktop Sticky Header

001 46-site-header-p1.zip

001 Desktop Sticky Header (Part 1).mp4

14:07

002 Desktop Sticky Header (Part 2).mp4

04:34

003 47-site-header-complete.zip

003 Desktop Sticky Header (Part 3).mp4

17:39

17 - Build Our Own Modal Lightbox Overlay

001 48-modal-p1.zip

001 Building a Modal From Scratch (Part 1).mp4

17:34

002 49-modal-p2.zip

002 Building a Modal From Scratch (Part 2).mp4

18:21

18 - Code Splitting & Lazy Loading

001 50-code-splitting.zip

001 Code Splitting With Webpack.mp4

17:16

002 51-lazy-loading-img.zip

002 Lazy Loading Images for Faster Page Loads.mp4

07:56

19 - Building and Deploying

001 52-build.zip

001 Preparing Our Files for Go Live (Part 1).mp4

16:42

002 53-build2.zip

002 Preparing Our Files for Go Live (Part 2).mp4

16:35

003 Note About Vendor JS File.html

004 Preparing Our Files For Go Live (Part 3).mp4

08:02

005 54-build3.zip

005 Preparing Our Files For Go Live (Part 4).mp4

14:33

006 55-gh-pages-golive.zip

006 Go Live! Deploying our Site to GitHub Pages.mp4

09:47

20 - Netlify (Automated Builds & Cloud Functions)

001 56-netlify-1.zip

001 Netlify Introduction.mp4

13:31

002 57-cloud-functions-1.zip

002 Cloud Functions AWS Lambda Example (Part 1).mp4

13:25

003 58-cloud-functions-2.zip

003 Cloud Functions AWS Lambda Example (Part 2).mp4

12:39

004 59-cloud-functions-3.zip

004 Cloud Functions AWS Lambda Example (Part 3).mp4

19:42

004 copy-paste.html

005 CORS Solution (Test Cloud Function from Localhost).html

21 - Integrating React Into Our Workflow

001 60-react.zip

001 Integrating React Into Our Workflow.mp4

17:45

22 - Git Timeout

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

10:24

23 - Looking Forward

001 Job Interviews.mp4

17:48

002 Next Steps & Career Progression.mp4

09:09

external-links.txt

Description

Learn Git, GitHub, Node.js, NPM, Object-oriented JavaScript, ES6, webpack, Netlify, BEM and Job Interview Tips

What You'll Learn?

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.

Who is this for?

You'll benefit from this course if you're looking to bridge the gap between what you currently know (HTML & CSS) and what hiring companies want you to know.

What You Need to Know?

You'll need a basic understanding of HTML and CSS. Do you know how to use HTML to create a paragraph element? Do you know how to use CSS to make that paragraph orange?

All software we'll use is 100% free, and we'll use 100% free web hosting through the GitHub and Netlify services

I recommend a modern text editor: Visual Studio Code is free and excellent (Google it).

Access to your own computer or laptop (not a public computer like in a library) as we'll be installing various tools on our computers throughout the course. Windows or Mac OS are great. Everything will work on Linux as well, but I don't walk through any Linux-specific instructions.

More details

Description
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!
Who this course is for:
You'll benefit from this course if you're looking to bridge the gap between what you currently know (HTML & CSS) and what hiring companies want you to know.

User Reviews

Rating

average 0

Total votes0

Focused display

Web Development

Software Engineering

Git

Brad Schiff

Instructor's Courses

Hi, I'm Brad and I’ve taught web development to countless coworkers and held training sessions for fortune 100 companies.I also teach local night classes and run a somewhat popular YouTube channel named LearnWebCode. I’m a front-end developer, designer, and educator. I’ve been building user interfaces for over a decade for the world's largest brands, international technology leaders, and national political campaigns. I'm fortunate to enjoy the development work I do, but my true passion is helping people learn.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.