1
00:00:00,000 --> 00:00:09,371
[MUSIC]

2
00:00:09,371 --> 00:00:10,710
Hi everyone!

3
00:00:10,710 --> 00:00:13,082
Travis here with an exciting project.

4
00:00:13,082 --> 00:00:18,620
Today we are going to create something
that every web developer, both beginners

5
00:00:18,620 --> 00:00:23,844
and seasoned professionals should have
in their toolkit, a portfolio site.

6
00:00:23,844 --> 00:00:26,664
Think of a portfolio as
your personal showcase,

7
00:00:26,664 --> 00:00:30,800
a space where you can display your
best works projects and skills.

8
00:00:30,800 --> 00:00:33,106
It's a testament to what you can do.

9
00:00:33,106 --> 00:00:37,635
A well-crafted portfolio can speak
volumes about your expertise,

10
00:00:37,635 --> 00:00:42,644
your style, and your dedication to
your craft, and here's the best part,

11
00:00:42,644 --> 00:00:48,895
creating a portfolio doesn't just showcase
your past work, it's a project in itself.

12
00:00:48,895 --> 00:00:53,729
As I show my approach to building
this portfolio site using HTML, CSS,

13
00:00:53,729 --> 00:00:55,838
and a sprinkle of JavaScript,

14
00:00:55,838 --> 00:00:58,118
we'll be learning, practicing, and

15
00:00:58,118 --> 00:01:01,373
demonstrating our web
development skills all at once.

16
00:01:01,373 --> 00:01:05,139
By the end, you'll not only have
a functional, responsive, and

17
00:01:05,139 --> 00:01:08,503
visually appealing portfolio site,
but you'll also have

18
00:01:08,503 --> 00:01:12,826
a deeper understanding of the process and
intricacies of web development.

19
00:01:12,826 --> 00:01:16,346
I've provided you with some starter
files to guide you on this journey.

20
00:01:16,346 --> 00:01:18,311
So if you're ready, go ahead and

21
00:01:18,311 --> 00:01:21,624
download and open them up in
your text editor of choice.

22
00:01:21,624 --> 00:01:24,376
I'll be using Visual Studio code.

23
00:01:24,376 --> 00:01:29,073
As you can see,
we have a file here named variables.txt.

24
00:01:29,073 --> 00:01:33,818
This holds all the colors, fonts, and text
I'll be using throughout these videos.

25
00:01:33,818 --> 00:01:37,649
Please feel free to customize this
project to suit your personal style and

26
00:01:37,649 --> 00:01:41,688
preferences though, especially if you
intend to use it in the real world.

27
00:01:41,688 --> 00:01:45,400
But these are here for you if you're
just getting some practice in.

28
00:01:45,400 --> 00:01:51,423
We also have a blank index.html file and
a js folder with a blank app.js file.

29
00:01:51,423 --> 00:01:54,945
Inside the CSS folder
is a styles.css file.

30
00:01:54,945 --> 00:01:57,188
In this, I've added a minimalist reset, so

31
00:01:57,188 --> 00:02:00,443
that we're not battling against
default margins and paddings.

32
00:02:00,443 --> 00:02:04,731
And I've also created variables for
each of the colors from variables.txt.

33
00:02:04,731 --> 00:02:08,934
If you've added your own color palette,
you can replace these colors with yours.

34
00:02:08,934 --> 00:02:12,439
If you're curious about why mine
are underlined with the colors,

35
00:02:12,439 --> 00:02:16,697
I'm using the color highlight extension,
check the teacher's notes below for

36
00:02:16,697 --> 00:02:19,464
a list of links to some of
the extensions I'm using.

37
00:02:19,464 --> 00:02:23,044
Lastly, in the images folder is
a placeholder image I'll use for

38
00:02:23,044 --> 00:02:25,720
my fictional owner of this portfolio.

39
00:02:25,720 --> 00:02:31,716
The SVG icons we'll use along the way,
and the mockups we'll be following.

40
00:02:31,716 --> 00:02:35,421
I'll be using the two mockups for
an odd number of projects to display,

41
00:02:35,421 --> 00:02:39,389
but these even ones are here to show you
how it would look to add more to yours.

42
00:02:39,389 --> 00:02:42,583
If you're curious about how
to make mockups like these,

43
00:02:42,583 --> 00:02:45,855
I've linked a few courses in
the teacher's notes below.

44
00:02:45,855 --> 00:02:49,612
All right, in the next video,
we'll get started on the HTML.

45
00:02:49,612 --> 00:02:50,360
See you there!