4.40 (67 reviews)
☑ 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.
Welcome to the Course!
Codepen & Video Background
Setting up Environment
Installations & Main Setup
Angular & Firebase Setup
PWA / Design / Planning
What is a Progressive Web App?
Creating Portfolio Sections
Section 4 Code
Home Section Overview
Custom Google Fonts
Importing Font Awesome Icons
Section 5 Code
Desktop Navigation Overview
Building & Styling Navigation
Section 6 Code
About Section Overview
About Layout HTML
About Layout CSS
Section 7 Code
Projects Section Overview
Projects Layout HTML
Projects Layout CSS
Section 8 Code
Contact Section Overview
Video / Image Background
Business Card Mockup
Section 9 Code
Footer Layout HTML & CSS
Section 10 Code
Resume Component Code
Angular Component Integration
Section 11 Code
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
Thank you!!! Really great content and explanations. I hope to see more courses from you, and more complex apps. Thanks again and good luck.
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.
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.
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.
Useful step by step guide with awesome code examples. And finally i found really native english speaking author on while udemy! Thanks!
This is a very good and fast course, but very applicable to a starting web developer like me. Thank you for the experience!
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.
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.
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.
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
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!
The course was focused and well communicated. Had many useful links to online tools and resources as well.
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!
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.