Get a month of TabletWise Pro for free! Click here to redeem 
TabletWise.com
 

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.
54
Views
1
Save
4:39:56
Share the link to this class
Copied
An introduction to the course!
Check out this video to see what is in the course and what you will gain from it.
I am excited for you to join me as I believe you will benefit from my unique experience. I am a former high school teacher that is now a Senior Web Developer. Before all that, at age 16, I began learning and working in the field of graphic design. In my mind, being able to be a web designer who can develop or a web developer with design skills allows you to fit two in-demand roles at once. This course is focused on building a Progressive Web App for a portfolio website that I will show you how to upload and host for free online using Angular and Firebase. The material covered in the course is advanced, but it builds up from the basics so you can still get a lot out of this course, even if you have zero experience. I'd recommend taking notes throughout to familiarize yourself with the process more quickly. I'd also recommend a multi-screen setup to have one screen for your code and one for the videos. Feel free to reach out to me during the course if you have any questions, and be sure to share your project so that everyone can see your unique Portfolio website.
I have created a PDF for you to view all the links to the websites I mention in the course. It also includes a link to my Google Drive, in order to download a version of the code after each section, as well as the Photoshop files for the Mockups.
This section will feature a mini-assignment, learning to make a fullscreen video background on the Codepen website.
Try to follow along and create your own version of the video background project on Codepen.
We will go over installing everything needed to create our project.
We will learn how to install Git for Windows, Github, Visual Studio Code, and NodeJS/NPM.
We will build off the previous lesson and install and setup the Angular 8 CLI as well as Google Firebase.
We will look at what a PWA is and why it's important, look at design fundamentals and look at some examples of portfolio websites for inspiration.
We will look at the properties of a PWA and an example of one in action.
We will go over the main fundamentals of web design.
We will look at planning out what is needed on a portfolio website.
We will go over starting out our project. Section 4 Code (Download)
We will put together the first section of our project, copying in our video background and adding the main title and social icons.
An overview of what we will look at in this section.
We will incorporate our video background.
We will learn how to add custom Google fonts to our project.
We will import Font Awesome icons in Angular. Section 5 Code (Download)
We will put together the navigation for our desktop version of the website.
An overview of what we will look at in this section.
We will start building and styling our navigation.
We will use Javascript to make our navigation functional. Section 6 Code (Download)
We will go over the About Section content.
An overview of what we will look at in this section.
We will build the HTML for our About section.
We will add the styling for our About section. Section 7 Code (Download)
We will create our Projects section, including making our own custom mock-ups.
An overview of what we will look at in this section.
We will learn how to use Photopea (a free web-based Photoshop alternative) to make custom mockups. Mockup PSD Files (Download)
We will begin building the HTML for our Projects section.
We will finish the styling for our Projects section. Section 8 Code (Download)
We will create the Contact section of our project.
An overview of what we will look at in this section.
We will look at how to add another video background or replace it with an image background.
We will learn how to create a Business Card mockup for the Contact Section. Business Card Mockup (Download) Section 9 Code (Download)
We will look at adding the Footer section to our project.
We will complete the Footer section HTML and CSS in this lesson. Section 10 Code (Download)
We will add a pre-made resume component to our project. (Optional)
You will be able to add a pre-made resume component to your project. I will provide the source code. Resume Component (Download) Section 11 Code (Download)
We will learn about why responsive design is important and I'll show the best way to make these changes in your own projects.
An overview of what we will look at in this section. Section 12A Code (Download)
How to make your website responsive for a large smartphone in a vertical orientation.
Making a slightly altered version of our current desktop navigation. Section 12B Code (Download)
We will look at how to make a traditional hamburger menu and complete the styling.
We will look at how to make the hamburger menu functional.
We will look at how to do responsive styling for a large smartphone in a horizontal orientation.
We will wrap up the responsive design section and I will provide two versions of the code to this point, one with blank media queries and one with finished media queries. Section 12 Blank Media Queries Code (Download) Section 12 Final Media Queries Code (Download)
The final section of the course will show how to optimize our project and host it online with Firebase.
An overview of what we will look at in this section.
We will use Photopea to make icons for our projects.
We will learn about how to audit websites and we will make refinements to our Meta tags.
We will go over the process of building, optimizing, and hosting our project. Section 13 Final Code (Download)
We will take a look at our project in action on a smartphone.
The end of the course!
Alrighty, so you’ve finally made it to the conclusion, congratulations on getting here. The goal of this course is to encourage its students to be more design-conscious developers. We started off by going over design principles, then we looked at some exceptional portfolio websites for inspiration, and lastly, we sprinkled in PWA functionality into our project to take advantage of some cool extra features, including being able to function offline. We went through all the sections and I went over step by step the process I would use. I showed off a number of tips and tricks about icons, navigation, creating your own mockups with Photopea, among other things. We then went over how I use the Dev Tools in order to perfect responsive layouts. I hope that you have learned a lot from this project and gained the confidence to build your own projects from here incorporating some of the best practices I’ve showcased here. There will be a lot more steps on your path to becoming the best web developer you can be and I hope that you embrace those challenges and make this something you love doing. Feel free to reach out to me and share what you’ve created or asked me any questions you might have. I’m happy to help whenever I can. Until next time, bye for now.

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.

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).

An introduction to the course!
Check out this video to see what is in the course and what you will gain from it.
I am excited for you to join me as I believe you will benefit from my unique experience. I am a former high school teacher that is now a Senior Web Developer. Before all that, at age 16, I began learning and working in the field of graphic design. In my mind, being able to be a web designer who can develop or a web developer with design skills allows you to fit two in-demand roles at once. This course is focused on building a Progressive Web App for a portfolio website that I will show you how to upload and host for free online using Angular and Firebase. The material covered in the course is advanced, but it builds up from the basics so you can still get a lot out of this course, even if you have zero experience. I'd recommend taking notes throughout to familiarize yourself with the process more quickly. I'd also recommend a multi-screen setup to have one screen for your code and one for the videos. Feel free to reach out to me during the course if you have any questions, and be sure to share your project so that everyone can see your unique Portfolio website.
I have created a PDF for you to view all the links to the websites I mention in the course. It also includes a link to my Google Drive, in order to download a version of the code after each section, as well as the Photoshop files for the Mockups.
This section will feature a mini-assignment, learning to make a fullscreen video background on the Codepen website.
Try to follow along and create your own version of the video background project on Codepen.
We will go over installing everything needed to create our project.
We will learn how to install Git for Windows, Github, Visual Studio Code, and NodeJS/NPM.
We will build off the previous lesson and install and setup the Angular 8 CLI as well as Google Firebase.
We will look at what a PWA is and why it's important, look at design fundamentals and look at some examples of portfolio websites for inspiration.
We will look at the properties of a PWA and an example of one in action.
We will go over the main fundamentals of web design.
We will look at planning out what is needed on a portfolio website.
We will go over starting out our project. Section 4 Code (Download)
We will put together the first section of our project, copying in our video background and adding the main title and social icons.
An overview of what we will look at in this section.
We will incorporate our video background.
We will learn how to add custom Google fonts to our project.
We will import Font Awesome icons in Angular. Section 5 Code (Download)
We will put together the navigation for our desktop version of the website.
An overview of what we will look at in this section.
We will start building and styling our navigation.
We will use Javascript to make our navigation functional. Section 6 Code (Download)
We will go over the About Section content.
An overview of what we will look at in this section.
We will build the HTML for our About section.
We will add the styling for our About section. Section 7 Code (Download)
We will create our Projects section, including making our own custom mock-ups.
An overview of what we will look at in this section.
We will learn how to use Photopea (a free web-based Photoshop alternative) to make custom mockups. Mockup PSD Files (Download)
We will begin building the HTML for our Projects section.
We will finish the styling for our Projects section. Section 8 Code (Download)
We will create the Contact section of our project.
An overview of what we will look at in this section.
We will look at how to add another video background or replace it with an image background.
We will learn how to create a Business Card mockup for the Contact Section. Business Card Mockup (Download) Section 9 Code (Download)
We will look at adding the Footer section to our project.
We will complete the Footer section HTML and CSS in this lesson. Section 10 Code (Download)
We will add a pre-made resume component to our project. (Optional)
You will be able to add a pre-made resume component to your project. I will provide the source code. Resume Component (Download) Section 11 Code (Download)
We will learn about why responsive design is important and I'll show the best way to make these changes in your own projects.
An overview of what we will look at in this section. Section 12A Code (Download)
How to make your website responsive for a large smartphone in a vertical orientation.
Making a slightly altered version of our current desktop navigation. Section 12B Code (Download)
We will look at how to make a traditional hamburger menu and complete the styling.
We will look at how to make the hamburger menu functional.
We will look at how to do responsive styling for a large smartphone in a horizontal orientation.
We will wrap up the responsive design section and I will provide two versions of the code to this point, one with blank media queries and one with finished media queries. Section 12 Blank Media Queries Code (Download) Section 12 Final Media Queries Code (Download)
The final section of the course will show how to optimize our project and host it online with Firebase.
An overview of what we will look at in this section.
We will use Photopea to make icons for our projects.
We will learn about how to audit websites and we will make refinements to our Meta tags.
We will go over the process of building, optimizing, and hosting our project. Section 13 Final Code (Download)
We will take a look at our project in action on a smartphone.
The end of the course!
Alrighty, so you’ve finally made it to the conclusion, congratulations on getting here. The goal of this course is to encourage its students to be more design-conscious developers. We started off by going over design principles, then we looked at some exceptional portfolio websites for inspiration, and lastly, we sprinkled in PWA functionality into our project to take advantage of some cool extra features, including being able to function offline. We went through all the sections and I went over step by step the process I would use. I showed off a number of tips and tricks about icons, navigation, creating your own mockups with Photopea, among other things. We then went over how I use the Dev Tools in order to perfect responsive layouts. I hope that you have learned a lot from this project and gained the confidence to build your own projects from here incorporating some of the best practices I’ve showcased here. There will be a lot more steps on your path to becoming the best web developer you can be and I hope that you embrace those challenges and make this something you love doing. Feel free to reach out to me and share what you’ve created or asked me any questions you might have. I’m happy to help whenever I can. Until next time, bye for now.

About the instructors

Jacinto Wong

Senior Web Developer & Online Instructor
Share the instructor profile
Copied

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 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 bootcamp would have cost. Ultimately, I understand how valuable a well-structured course with an impressive project can be for career success. 

All Classes
Free for 30 Days
   The video is currently being processed.
   An error occurred while uploading the video. Please upload another video.
   Please upload the required file.
Quiz: #TITLE#
Questions: #QUESTIONS_COUNT#
Quiz: #TITLE#
Question /#QUESTIONS_COUNT#
Quiz: #TITLE#
Result: You correctly answered out of questions. Result: You correctly answered out of question. Result: You correctly answered out of questions attempted. Result: You correctly answered out of question attempted. Result: You did not attempt any question.
1
Save
54
Views
This class has not been saved

Sign Up