Web Development


Modern Web Design & Development: Intro to PWAs in Angular 8

Suitable for All Levels - Learn Design Principles, Angular CLI, Firebase, Photo Editing, and More!

4.40 (67 reviews)


4.5 hours


Jan 2020

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Be able to build responsive progressive web apps using Angular and Firebase

Practice principles of design that will apply to print and web projects

Create their own unique portfolio website

Have a solid understanding of Visual Studio Code

Learn how to create project mock-ups with Photopea

Have the ability to use Chrome Developer Tools to test and audit websites


This course is intended to enable anyone, even if you are starting out with no knowledge or experience, to finish the course with the ability to create progressive web apps, understand the basics of Angular, and learn best design practices along the way! You will complete your own unique version of the project that we will build and host for free with the Angular 8 CLI and Google Firebase.

My name is Jacinto Wong and I am currently working as a Senior Developer in Toronto, Canada. For me, only 4 months after starting my first online developer course, I landed my first developer job. I had an advantage, in that I’ve been doing layout and design work for magazines and newspapers for over 15 years. Check out more about me at the website jacinto.design

But I think what impressed my interviewers the most was the projects I had made through these online courses, which cost a fraction of the time and money that university, college, or even a coding boot camp would have cost. Ultimately, I understand how valuable a well-structured course with an impressive project can be for career success. I believe the course I have put together will be an excellent starting point on that journey and I am excited to share that.

Even the longest journeys begin with just a single step. I hope you will take your first steps towards becoming a developer with me!

By the end of this course, students will:

  • Be able to build responsive Progressive Web Apps using Angular and Firebase

  • Practice principles of design that will apply to print and web projects

  • Create their own unique portfolio website

  • Have a solid understanding of Visual Studio Code

  • Learn how to create project mock-ups with Photopea

  • Have the ability to use Chrome Developer Tools to test and audit websites

Contents and Overview

The course will start by setting up all the software. This will begin with installing Git For Windows to integrate with GitHub, Visual Studio Code, Node/NPM, Angular CLI, and Firebase Tools.

We will discuss the importance of the planning stage in building a website, as well as implementing best design practices. Then we will discuss what a Progressive Web App its long list of benefits, including being able to function offline.

Jumping into our main project, we will work through our project in sections. We will begin with the home page, which will feature a responsive video background.

Next, we will add our navigation as a shared component. Later on we will make a responsive version that will display in mobile devices.

We will then create an About section with a short bio and link to a resume. Next, our projects section will involve learning how to create mock-ups for other web projects using Photopea (an online free version of Photoshop).

We will wrap up the main page content by adding a contact section, as well as a small footer.

After this, I will discuss the importance of responsive design, going through how to alter a desktop website to look good on a smartphone in vertical and horizontal orientations. I will explain how this is done, using the Developer Tools in Chrome and then give students to opportunity to finish the rest on their own.

In the last section of the course, I will show how to make and implement icons for a PWA. Then we will look at Lighthouse Audits to optimize our project further. We will finish by building, optimizing, and hosting our web app online for free with Firebase.

Why Should You Learn This?

If you are starting the process of learning to become a web developer, or even if you are already working as a web developer, you will find value in this course. There is an emphasis on design principles throughout, and a unique workflow to efficiently create Progressive Web Apps that are much more functional than regular websites.


Modern Web Design & Development: Intro to PWAs in Angular 8
Modern Web Design & Development: Intro to PWAs in Angular 8
Modern Web Design & Development: Intro to PWAs in Angular 8
Modern Web Design & Development: Intro to PWAs in Angular 8




Welcome to the Course!

Codepen Introduction

Codepen & Video Background

Setting up Environment

Installations & Main Setup

Angular & Firebase Setup

PWA / Design / Planning

What is a Progressive Web App?

Design Principles

Portfolio Planning

Creating Portfolio Sections

Section 4 Code

Home Section

Home Section Overview

Video Background

Custom Google Fonts

Importing Font Awesome Icons

Section 5 Code

Desktop Navigation

Desktop Navigation Overview

Building & Styling Navigation

Navigation Functionality

Section 6 Code

About Section

About Section Overview

About Layout HTML

About Layout CSS

Section 7 Code

Projects Section

Projects Section Overview

Photopea Mockup

Projects Layout HTML

Projects Layout CSS

Section 8 Code

Contact Section

Contact Section Overview

Video / Image Background

Business Card Mockup

Section 9 Code

Footer Section

Footer Layout HTML & CSS

Section 10 Code

Resume Component

Resume Component Code

Angular Component Integration

Section 11 Code

Responsive Design

Responsive Design Overview

Section 12 (A) Code

Large Smartphone (Vertical)

Modifying Desktop Menu

Section 12 (B) Code

Hamburger Menu Styling

Hamburger Menu Functionality

Large Smartphone (Horizontal)

Responsive Design Conclusion

Section 12 (Blank Media Queries) Code

Section 12 (Final Media Queries) Code

Optimizing & Hosting

Optimizing & Hosting Overview

Making an Icon / Favicon

Lighthouse Audit & Meta Tags

Building - Optimizing - Hosting

PWA on Smartphones

Final Project Code


Conclusion & Thank You


Julián6 August 2020

Thank you!!! Really great content and explanations. I hope to see more courses from you, and more complex apps. Thanks again and good luck.

Anass12 April 2020

PWA course should cover accessing the device hardware like camera, micro, geolocation, etc ... This scourse doesn't, and the instructor didn't react when I asked.

David6 February 2020

This course has been short but very interesting. Jacinto explains the contents very well. In this course, I have learned great tricks in programming PWA apps. This will allow me to search new challengers, like create my own customized PWA app.

Mohammad24 January 2020

Really great course, I just created my first angular plus firebase PWA by following the instructor and I am happy to go online for the first time.

Poly20 January 2020

Useful step by step guide with awesome code examples. And finally i found really native english speaking author on while udemy! Thanks!

Andrew9 January 2020

This is a very good and fast course, but very applicable to a starting web developer like me. Thank you for the experience!

Robert26 November 2019

this was a bit too much of an overview rather than a practical how to. you had too much prepared. but got something out of it.

Ladbon20 November 2019

It was hard to keep up with the actual setup itself, even as a developer but I am suspecting I did something wrong. Got it to work by setting git up with visual studio pro then going back to code so I keep up with what you are doing. Great info.

Danish20 November 2019

Amazing tutorial by Jacinto. I really enjoyed creating the portfolio application and along the way, there were plenty of new concepts that Jacinto simplified. I really look forward to his other courses.

John6 November 2019

very good instructions (some minor issues that caused me to use some hours investigating what happened or did not happen). Still need quite some training to integrate other sub-programs in the webapp. thank you

Aine5 November 2019

Jacinto's course has been very easy to work through for me, despite not having any previous experience. Going step by step has helped me good techniques to create some cool looking web projects! I have learned how to custom my project in many ways to make it look unique which is great!

Craig3 November 2019

The course was focused and well communicated. Had many useful links to online tools and resources as well.

Bradly4 October 2019

After going through these lessons, I highly recommend this course! Within minutes of beginning I could see real practical applications of the content Jacinto is teaching us. I've used many click-n-drag website building platforms in the past (Wix, Bandzoogle, Wordpress, Shopify, etc.) but I'm not really experienced with things once they get more complex than that. What I love about this course is that the web design and developing lessons taught here are accessible to someone like me which means I can really start to build upon what little I do know and become more self sufficient in this aspect of my business. Jacinto, thanks for the great course!

Ata29 September 2019

Mr. Jacinto Wong is amazing and his energy makes a difference. I've known him for some years now and I love how enthusiastic he can be. When you first look at the course it may look a bit intimidating, especially considering how broad Web Development can be, but this course is built both for beginners and experienced developers. You will definitely find something useful. The course will show you pretty much everything what you need to create a responsive and modern looking website.


11/16/2019100% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by