About This Course
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 Command Line Interface and Google Firebase.
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 Command Line Interface, and Firebase Tools.
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. We will wrap up the main page content by adding a contact section, as well as a small footer.
After this, you’ll understand the importance of responsive design, going through how to alter a desktop website to look good on a smartphone in vertical and horizontal orientations. This is done using the Developer Tools in Chrome.
In the last section of the course, you’ll learn how to make and implement icons for a Progressive Web Application. 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.
Our Promise to You
By the end of this course, you will have learned how to create a web application, design and development in Angular 8.
30 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about creating a progressive web application in Angular 8.
Course Curriculum
Section 1 - Introduction | |||
Introduction | 00:00:00 | ||
Downloadable Materials | 00:00:00 | ||
Section 2 - Codepen Introduction | |||
Codepen And Video Background | 00:00:00 | ||
Section 3 - Setting Up Environment | |||
Installations And Main Setup | 00:00:00 | ||
Angular And Firebase Setup | 00:00:00 | ||
Section 4 - PWA, Design, Planning | |||
What Is A Progressive Web Application? | 00:00:00 | ||
Design Principles | 00:00:00 | ||
Portfolio Planning | 00:00:00 | ||
Creating Portfolio Sections | 00:00:00 | ||
Section 5 - Home Section | |||
Home Section Overview | 00:00:00 | ||
Video Background | 00:00:00 | ||
Custom Google Fonts | 00:00:00 | ||
Importing Font Awesome Icons | 00:00:00 | ||
Section 6 - Desktop Navigation | |||
Desktop Navigation Overview | 00:00:00 | ||
Building And Styling Navigation | 00:00:00 | ||
Navigation Functionality | 00:00:00 | ||
Section 7 - About Section | |||
About Section Overview | 00:00:00 | ||
About Layout HTML | 00:00:00 | ||
About Layout CSS | 00:00:00 | ||
Section 8 - Projects Section | |||
Projects Section Overview | 00:00:00 | ||
Photopea Mockup | 00:00:00 | ||
Projects Layout HTML | 00:00:00 | ||
Projects Layout CSS | 00:00:00 | ||
Section 9 - Contact Section | |||
Contact Section Overview | 00:00:00 | ||
Video Or Image Background | 00:00:00 | ||
Business Card Mockup | 00:00:00 | ||
Section 10 - Footer Section | |||
Footer Layout HTML And CSS | 00:00:00 | ||
Section 11 - Resume Component | |||
Angular Component Integration | 00:00:00 | ||
Section 12 - Responsive Design | |||
Responsive Design Overview | 00:00:00 | ||
Large Smartphone – Vertical | 00:00:00 | ||
Modifying Desktop Menu | 00:00:00 | ||
Hamburger Menu Styling | 00:00:00 | ||
Hamburger Menu Functionality | 00:00:00 | ||
Large Smartphone – Horizontal | 00:00:00 | ||
Responsive Design Conclusion | 00:00:00 | ||
Section 13 - Optimizing And Hosting | |||
Optimizing And Hosting Overview | 00:00:00 | ||
Making An Icon Or Favicon | 00:00:00 | ||
Lighthouse Audit And Meta Tags | 00:00:00 | ||
Building – Optimizing – Hosting | 00:00:00 | ||
PWA On Smartphones | 00:00:00 | ||
Section 14 - Conclusion | |||
Conclusion And Thank You | 00:00:00 |