Mô tả

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!

Bạn sẽ học được gì

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.

Yêu cầu

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

Nội dung khoá học

23 sections

Welcome!

1 lectures
Course Overview
07:44

Git Essentials

6 lectures
What is Git?
09:16
See Git in Action
14:57
Important Note About Text Editing Software
01:08
Quick Note For Mac Users
00:27
Git Your Hands Dirty
14:16
Setup Your GitHub
14:25

Intro to Node.js & NPM

5 lectures
The Need for Automation and Organization
07:14
A Quick Note
00:44
Node.js Introduction
19:56
NPM Introduction
14:25
Important Note About Package Versions To Save You Frustration
01:28

Webpack Essentials

4 lectures
Webpack Introduction
19:58
Setup Your Text Editor To Understand PostCSS Syntax
00:49
CSS With Webpack
19:59
Important Note
00:39

CSS Architecture

3 lectures
CSS File Architecture
18:45
What is BEM?
18:27
Complete Two Blocks
19:18

Quick Webpack Timeout

1 lectures
Webpack Dev Server
18:14

Mobile-first Essentials

3 lectures
What does "Mobile-first" Mean?
16:32
Responsive Images
19:55
Tips for Testing Responsive Images
06:55

Let's Build!

5 lectures
Creating Reusable Blocks
16:56
Headline Block
18:36
Column Layout Block
18:05
Attention to Detail (Part 1)
18:52
Attention to Detail (Part 2)
15:00

Git Timeout

1 lectures
Git Branches
19:24

Building "Our Features" Section

2 lectures
Styling Our Features (Part 1)
18:49
Styling Our Features (Part 2)
09:26

Building "Testimonial" Section

4 lectures
Styling Testimonials (Part 1)
19:52
Quick Note
00:26
Styling Testimonials (Part 2)
16:10
Styling Testimonials (Part 3)
12:13

Let's Finish Styling our Site

5 lectures
Styling our Footer
07:48
Styling our Header (Part 1)
19:07
Styling our Header (Part 2)
09:44
CSS Grid (Overlapping Content)
13:41
CSS Grid For Columns
18:53

JavaScript Organization

2 lectures
Object-Oriented Programming
19:36
The JS Module Pattern and "webpack"
11:58

Writing JavaScript for Our Header Menu

4 lectures
How to Avoid Spaghetti Code
17:35
Adjusting Our Mobile Menu
16:27
Animating Hamburger Menu Icon Into an "X"
17:42
Optional: Removing Floats from Site Header
07:05

Revealing Elements on Scroll

4 lectures
Revealing Elements on Scroll
19:50
Quick Note
00:32
Revealing Elements on Scroll (Part 2)
17:58
Revealing Elements on Scroll (Part 3)
17:17

Desktop Sticky Header

3 lectures
Desktop Sticky Header (Part 1)
14:03
Desktop Sticky Header (Part 2)
04:33
Desktop Sticky Header (Part 3)
17:34

Build Our Own Modal / Lightbox Overlay

2 lectures
Building a Modal From Scratch (Part 1)
17:29
Building a Modal From Scratch (Part 2)
18:16

Code Splitting & Lazy Loading

2 lectures
Code Splitting With Webpack
17:12
Lazy Loading Images for Faster Page Loads
07:53

Building and Deploying

6 lectures
Preparing Our Files for Go Live (Part 1)
16:38
Preparing Our Files for Go Live (Part 2)
16:30
Note About Vendor JS File
00:45
Preparing Our Files For Go Live (Part 3)
08:00
Preparing Our Files For Go Live (Part 4)
14:29
Go Live! Deploying our Site to GitHub Pages
09:45

Netlify (Automated Builds & Cloud Functions)

5 lectures
Netlify Introduction
13:28
Cloud Functions / AWS Lambda Example (Part 1)
13:22
Cloud Functions / AWS Lambda Example (Part 2)
12:36
Cloud Functions / AWS Lambda Example (Part 3)
19:37
CORS Solution (Test Cloud Function from Localhost)
00:34

Integrating React Into Our Workflow

1 lectures
Integrating React Into Our Workflow
17:40

Git Timeout

1 lectures
Git Tips - How to Handle (and Avoid) Merge Conflicts
10:21

Looking Forward

3 lectures
Job Interviews
17:46
Next Steps & Career Progression
09:07
Bonus Lecture
03:37

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.