Modern Web Design and Development: Creating a PWA Portfolio in Angular 8

Learn design principles, photo editing, and Angular 8 CLI with Firebase to create and host your own PWAs.

Modern Web Design and Development: Creating a PWA Portfolio in Angular 8

Learn design principles, photo editing, and Angular 8 CLI with Firebase to create and host your own PWAs.
Share the link to this page
One-time Purchase
List Price:  $139.99
You save:  $40
List Price:  €137.71
You save:  €39.35
List Price:  £116
You save:  £33.14
List Price:  CA$180.63
You save:  CA$51.61
List Price:  A$199.23
You save:  A$56.92
List Price:  S$192.93
You save:  S$55.12
List Price:  HK$1,097.25
You save:  HK$313.52
CHF 94.62
List Price:  CHF 132.48
You save:  CHF 37.85
NOK kr970.52
List Price:  NOK kr1,358.77
You save:  NOK kr388.24
DKK kr731.54
List Price:  DKK kr1,024.18
You save:  DKK kr292.64
List Price:  NZ$219.79
You save:  NZ$62.80
List Price:  د.إ514.18
You save:  د.إ146.92
List Price:  ৳13,302.68
You save:  ৳3,801.03
List Price:  ₹11,132.56
You save:  ₹3,180.96
List Price:  RM624.28
You save:  RM178.38
List Price:  ₦58,710.40
You save:  ₦16,775.60
List Price:  ₨30,160.84
You save:  ₨8,618
List Price:  ฿4,972.14
You save:  ฿1,420.71
List Price:  ₺2,513.03
You save:  ₺718.06
List Price:  B$713.75
You save:  B$203.94
List Price:  R2,299.50
You save:  R657.04
List Price:  Лв268.90
You save:  Лв76.83
List Price:  ₩183,745.33
You save:  ₩52,502.41
List Price:  ₪458.79
You save:  ₪131.09
List Price:  ₱7,826.37
You save:  ₱2,236.26
List Price:  ¥18,659.58
You save:  ¥5,331.69
List Price:  MX$2,779.81
You save:  MX$794.28
List Price:  QR509.70
You save:  QR145.64
List Price:  P1,749.89
You save:  P500
List Price:  KSh16,728.80
You save:  KSh4,780
List Price:  E£2,680.57
You save:  E£765.93
List Price:  ብር7,311.67
You save:  ብር2,089.20
List Price:  Kz59,983.18
You save:  Kz17,139.27
List Price:  CLP$123,192.59
You save:  CLP$35,200.40
List Price:  CN¥948.22
You save:  CN¥270.94
List Price:  RD$7,566.45
You save:  RD$2,162
List Price:  DA19,997.55
You save:  DA5,713.99
List Price:  FJ$305.26
You save:  FJ$87.22
List Price:  Q1,083.56
You save:  Q309.61
List Price:  GY$29,287.45
You save:  GY$8,368.44
ISK kr13,802.61
List Price:  ISK kr19,324.21
You save:  ISK kr5,521.60
List Price:  DH1,446.62
You save:  DH413.35
List Price:  L2,684.89
You save:  L767.16
List Price:  ден8,461.95
You save:  ден2,417.87
List Price:  MOP$1,129.95
You save:  MOP$322.86
List Price:  N$2,266.43
You save:  N$647.60
List Price:  C$5,026.39
You save:  C$1,436.21
List Price:  रु17,807.89
You save:  रु5,088.33
List Price:  S/543.58
You save:  S/155.32
List Price:  K493.46
You save:  K141
List Price:  SAR525.67
You save:  SAR150.20
List Price:  ZK2,255.59
You save:  ZK644.50
List Price:  L666.28
You save:  L190.38
List Price:  Kč3,369.76
You save:  Kč962.86
List Price:  Ft54,988.91
You save:  Ft15,712.24
SEK kr1,033.91
List Price:  SEK kr1,447.52
You save:  SEK kr413.60
List Price:  ARS$18,841.18
You save:  ARS$5,383.58
List Price:  Bs967.36
You save:  Bs276.41
List Price:  COP$584,883.57
You save:  COP$167,121.53
List Price:  ₡93,378.70
You save:  ₡26,681.53
List Price:  L3,439.55
You save:  L982.79
List Price:  ₲963,395.60
You save:  ₲275,275.55
List Price:  $U5,611.68
You save:  $U1,603.45

About the Class

This course has been created for those interested in learning how to plan, design, and create a portfolio website while learning how to make a progressive web app (essentially a website that can function offline). We will accomplish this through the Angular 8 CLI, and we will use Google Firebase to host our project online for free.

This course is intended to enable anyone, even if you are starting with no knowledge or experience, you will learn the ability to create progressive web apps, understand the basics of Angular, and learn best design practices along the way.

I would recommend pausing the videos to code along, and I would also encourage you to try to understand the process while watching and taking notes in your own words to reinforce and accelerate your learning. Lastly, I think an ideal setup would be having a multiple monitor system as you can have the course on one screen and your code and browser on the other. These are all strategies that I employed when I was teaching myself to code using online courses just like this one, and I can tell you that they proved extremely helpful.

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

What will you learn in this course?

  • 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 the 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 on 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 take this course?

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.


Jacinto Wong

Senior Web Developer & Online Instructor
Share the instructor profile
Hello, my name is Jacinto Wong. I am currently working as a Senior Developer in Toronto, Canada. For me, only 4 months after starting my first Udemy developer course I had 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. But I think what impressed...

Class Requirements

You should have access to a computer with an internet connection. Make sure to install all suggested software through the course (it's all free).

What's Included

Language: English
Level: All levels
Skills: Web Design, Angular 8 CLI, Responsive Design, Angular, Progressive Web Apps, Firebase, Icon Creation, Photo Editing, Web Development
Age groups: All ages
Duration: 4 hours 39 minutes
39 Videos
3 Documents
This class has not been saved

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.