CF

Create a Personal Portfolio using Angular 2 & Behance

2h 8m 10s
English
Free
Updated September 2026

Create a Personal Portfolio using Angular 2 & Behance is a 21-lesson 2 hours 8 minutes self-paced course by Coursetro. Create a Personal Portfolio using Angular 2 & Behance , from Coursetro, walks through building a portfolio site that pulls your projects live from the Behance API — free to take on their YouTube channel.

Course facts

Lessons
21
Duration
2 hours 8 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Coursetro
Price
Free

Create a Personal Portfolio using Angular 2 & Behance, from Coursetro, walks through building a portfolio site that pulls your projects live from the Behance API — free to take on their YouTube channel.

Design First, Then Build

The course starts in Adobe XD to design the site mockup, then moves into Angular 2 with the Angular CLI to bring that design to life in the browser.

What You'll Learn

  • Designing a website UI in Adobe XD
  • Starting and structuring an Angular 2 project with the Angular CLI
  • Pulling live project data from the Behance API into your app

Across 21 lessons, basic Angular familiarity helps, though the course points to a free companion Angular 2 course for anyone starting from scratch.

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

Who teaches Create a Personal Portfolio using Angular 2 & Behance? Coursetro

Coursetro thumbnail

Coursetro is the online course platform of Gary Simon, the designer-developer behind the DesignCourse YouTube channel. Gary's signature is bridging the design ↔ front-end-engineering boundary — covering Adobe XD and Figma alongside Angular, Vue, and modern CSS rather than treating each in isolation.

The CourseFlix listing carries three of the older Coursetro courses: Create a Personal Portfolio using Angular 2 & Behance, Learn Adobe Experience Design CC 2018 by Example, and Using Vue 2 to Create Beautiful SEO-Ready Websites. The framework-version dates show how long Coursetro has been publishing — much of Gary's newer material lives on his current YouTube channel and direct site.

What lessons are included in Create a Personal Portfolio using Angular 2 & Behance?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1Designing the Header and Thumbnail Gallery 10:45
2Finishing the Home Page 11:31
3Details Page Design 08:38
4Starting the Angular Project 05:19
5Generating the Components 02:31
6Integrating Foundation 02:09
7Setting up the Router 05:29
8Writing the Header HTML 08:34
9Writing the Header CSS 07:34
10Making the Navigation Responsive 10:45
11Behance API Overview 02:52
12Generating & Coding the Service 05:24
13Integrating the Service in the Gallery Component 02:43
14Writing the HTML 05:40
15Writing the CSS 08:18
16Making the Gallery Responsive 02:45
17Integrating Angular Animations 04:01
18Connecting the Router 03:10
19Writing the HTML 05:32
20Writing the CSS 07:40
21Integrating Angular Animations 06:50

What courses are similar to Create a Personal Portfolio using Angular 2 & Behance?

More courses by Coursetro

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a basic understanding of web development concepts and familiarity with HTML and CSS. Some prior experience with JavaScript or frameworks like Angular would be beneficial, as the course involves setting up an Angular project and integrating various components.
What projects will I build in this course?
In this course, you will build a personal portfolio site. The project involves designing a website mockup using Adobe XD, setting up and developing a site powered by Angular 2, and using the Behance API to dynamically display projects. The portfolio includes features like a responsive navigation and gallery.
Who is the target audience for this course?
This course is ideal for web developers who are interested in learning how to build dynamic web applications using Angular 2. It is also suitable for designers who want to understand how to take their Adobe XD designs and integrate them into a functional website using modern web technologies.
What specific tools and platforms are covered in this course?
The course covers several tools and platforms, including Adobe XD for designing the website mockup, Angular 2 for developing the website, and the Behance API for fetching and displaying projects. Additionally, Foundation is used for integrating responsive design elements.
What is not covered in this course?
This course does not cover advanced Angular concepts beyond the basics needed for this project, nor does it delve into backend development or database management. The focus is primarily on front-end development and using the Behance API for project integration.
How much time should I allocate to complete this course?
While the total runtime of the course is not specified, you should allocate time to understand and practice each lesson thoroughly. With 21 lessons, plan for additional time beyond the video content to work on the exercises, especially if you are new to Angular or Adobe XD.
How does this course help in career development?
Completing this course provides practical experience in building a dynamic Angular-based web application, which is valuable for a career in front-end development. The skills in integrating APIs and responsive design are applicable to many web development projects and can enhance your portfolio.