Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Create a Portfolio Using HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Project

2:51 with Travis Alstrand

In this video, we’ll take a look at what a portfolio is and the one we’re going to be building. Then we'll get our files prepared.

Design Resources

Visual Studio Code Extensions Used

Using any of these extensions is completely optional. I wanted to share them in case you wonder why my editor might look or behave differently than yours.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hi everyone! 0:09
    Travis here with an exciting project. 0:10
    Today we are going to create something that every web developer, both beginners 0:13
    and seasoned professionals should have in their toolkit, a portfolio site. 0:18
    Think of a portfolio as your personal showcase, 0:23
    a space where you can display your best works projects and skills. 0:26
    It's a testament to what you can do. 0:30
    A well-crafted portfolio can speak volumes about your expertise, 0:33
    your style, and your dedication to your craft, and here's the best part, 0:37
    creating a portfolio doesn't just showcase your past work, it's a project in itself. 0:42
    As I show my approach to building this portfolio site using HTML, CSS, 0:48
    and a sprinkle of JavaScript, 0:53
    we'll be learning, practicing, and 0:55
    demonstrating our web development skills all at once. 0:58
    By the end, you'll not only have a functional, responsive, and 1:01
    visually appealing portfolio site, but you'll also have 1:05
    a deeper understanding of the process and intricacies of web development. 1:08
    I've provided you with some starter files to guide you on this journey. 1:12
    So if you're ready, go ahead and 1:16
    download and open them up in your text editor of choice. 1:18
    I'll be using Visual Studio code. 1:21
    As you can see, we have a file here named variables.txt. 1:24
    This holds all the colors, fonts, and text I'll be using throughout these videos. 1:29
    Please feel free to customize this project to suit your personal style and 1:33
    preferences though, especially if you intend to use it in the real world. 1:37
    But these are here for you if you're just getting some practice in. 1:41
    We also have a blank index.html file and a js folder with a blank app.js file. 1:45
    Inside the CSS folder is a styles.css file. 1:51
    In this, I've added a minimalist reset, so 1:54
    that we're not battling against default margins and paddings. 1:57
    And I've also created variables for each of the colors from variables.txt. 2:00
    If you've added your own color palette, you can replace these colors with yours. 2:04
    If you're curious about why mine are underlined with the colors, 2:08
    I'm using the color highlight extension, check the teacher's notes below for 2:12
    a list of links to some of the extensions I'm using. 2:16
    Lastly, in the images folder is a placeholder image I'll use for 2:19
    my fictional owner of this portfolio. 2:23
    The SVG icons we'll use along the way, and the mockups we'll be following. 2:25
    I'll be using the two mockups for an odd number of projects to display, 2:31
    but these even ones are here to show you how it would look to add more to yours. 2:35
    If you're curious about how to make mockups like these, 2:39
    I've linked a few courses in the teacher's notes below. 2:42
    All right, in the next video, we'll get started on the HTML. 2:45
    See you there! 2:49

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up