This course is designed for those interested to learn the basics of web design and development by creating a progressive web application in Angular and how to host it online using Firebase.
Read more.Instructor
I'm currently working as a Senior Web Developer, I started in graphic design 15 years ago, and I studied education and worked as a teacher for 5 years
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Students starting out teaching themselves Web Development
- Anyone interested in making their own portfolio website from scratch
- Web Developers looking into learning and applying modern Design Principles
- Web Developers wanting to create Progressive Web Apps using Angular and Firebase
What you’ll learn:Â
- How to build responsive Progressive Web Apps using Angular and Firebase
- Practice principles of design that will apply to print and web projects
- How to create a unique portfolio website
- Solid understanding of Visual Studio Code
- How to create project mock-ups with Photopea
- How to use Chrome Developer Tools to test and audit websites
Requirements:Â
- No prior knowledge is required to take 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 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. 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 using Angular 8.
10 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 progressive web applications.
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 |