Skip to main content

Create a Personal Portfolio using Angular 2 & Behance

2h 8m 10s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 21 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Designing the Header and Thumbnail Gallery

All Course Lessons (21)

#Lesson TitleDurationAccess
1
Designing the Header and Thumbnail Gallery Demo
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

Unlock unlimited learning

Get instant access to all 20 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React, Angular, Node In-Depth Guide: Beginner to Pro

React, Angular, Node In-Depth Guide: Beginner to Pro

Sources: udemy
If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Get all you need to start web dev...
80 hours 1 minute 57 seconds
Complete Angular Developer in 2025 Zero to Mastery

Complete Angular Developer in 2025 Zero to Mastery

Sources: zerotomastery.io
Learn Angular from a senior industry professional. This is the only Angular course you need to learn Angular, build enterprise-level applications from scratc...
52 hours 28 minutes 39 seconds
Build an app with ASPNET Core and Angular from scratch

Build an app with ASPNET Core and Angular from scratch

Sources: udemy
Have you learnt the basics of ASP.NET Core and Angular? Not sure where to go next? This course should be able to help with that. In this course we start from nothing and incr...
29 hours 51 minutes 36 seconds
Learn to build professional-grade Angular Applications | Angular Start

Learn to build professional-grade Angular Applications | Angular Start

Sources: Josh Morony
A complete text-based guide to Angular from beginner level through to building professional-grade applications. Concepts are taught from scratch, but the content will be valuabl...
Reactive Angular Course (with RxJs)

Reactive Angular Course (with RxJs)

Sources: udemy
This course is a catalog of commonly used design patterns (and some anti-patterns) that every Angular developer should know. The goal of the course is to teach you how to comfor...
5 hours 33 minutes 49 seconds