Create a Personal Portfolio using Angular 2 & Behance
The project you're going to learn how to build is based on a personal portfolio site, powered by Angular 2 which grabs projects in real-time with the Behance API.
First, we step into Adobe XD (Experience Design) to design the website mockup from scratch. These videos are 30 minutes and they're available to watch for free at our youtube channel.
More
The project you're going to learn how to build is based on a personal portfolio site, powered by Angular 2 which grabs projects in real-time with the Behance API.
First, we step into Adobe XD (Experience Design) to design the website mockup from scratch. These videos are 30 minutes and they're available to watch for free at our youtube channel.
After we complete the mockups and protoyping, we'll begin development by setting up an Angular project with the angular-cli. Then we'll march forward through all of the various steps required to make this project a reality in the browser.
Requirements & Suggestions:
- Adobe XD (Experience Design)
This is only required if you wish to follow along with the first 3 lessons, otherwise skip these. - Code Editor
I use Visual Studio Code, which is free. - Basic understanding of Angular 2
Don't worry, watch our free angular 2 course here first.
What you'll learn:
- Website UI Design in Adobe XD
- Starting an Angular 2 Project with the Angular-cli
- Generating Components
- Generating Services
- Creating an Angular Router
- Fetching Data from an API (Behance)
- Writing HTML
- Writing CSS
Watch Online Create a Personal Portfolio using Angular 2 & Behance
| # | Title | Duration |
|---|---|---|
| 1 | Designing the Header and Thumbnail Gallery | 10:45 |
| 2 | Finishing the Home Page | 11:31 |
| 3 | Details Page Design | 08:38 |
| 4 | Starting the Angular Project | 05:19 |
| 5 | Generating the Components | 02:31 |
| 6 | Integrating Foundation | 02:09 |
| 7 | Setting up the Router | 05:29 |
| 8 | Writing the Header HTML | 08:34 |
| 9 | Writing the Header CSS | 07:34 |
| 10 | Making the Navigation Responsive | 10:45 |
| 11 | Behance API Overview | 02:52 |
| 12 | Generating & Coding the Service | 05:24 |
| 13 | Integrating the Service in the Gallery Component | 02:43 |
| 14 | Writing the HTML | 05:40 |
| 15 | Writing the CSS | 08:18 |
| 16 | Making the Gallery Responsive | 02:45 |
| 17 | Integrating Angular Animations | 04:01 |
| 18 | Connecting the Router | 03:10 |
| 19 | Writing the HTML | 05:32 |
| 20 | Writing the CSS | 07:40 |
| 21 | Integrating Angular Animations | 06:50 |
Similar courses to Create a Personal Portfolio using Angular 2 & Behance
Angular Architecture. How to Build Scalable Web Applicationsudemy
Angular and Golang: A Rapid Guide - Advancedudemy
Learn to build an e-commerce app with .Net Core and Angularudemy
Full Stack: Angular and Spring Bootudemy
Building Your First App with Spring Boot and Angularpluralsight
PROFESSIONAL Full Stack Developeramigoscode (Nelson Djalo)
Angular 9 Firebase Project Coursefireship.io
