Please ensure Javascript is enabled for purposes of website accessibility
Web Design And Development: Creating A Progressive Web Application In Angular 8
0( 0 REVIEWS )
63 STUDENTS
4h 42m

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.
Course Skill Level
Beginner
Time Estimate
4h 42m

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 Course

About 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
4764597

Join our newsletter and get your first course free!

4764598

Join our newsletter and get your first course free!

Congratulations! You get one free course of your choice. Please check your email now for the redemption code

Are you interested in higher education?