Getting Set Up

[00:00:00]
>> We are at chapter one. And this is the prerequisites in getting set up. And this is definitely more oriented towards you beginning beginners. So as I said before, we're going to be building a portfolio website about two pages in length. And I will provide you all of the assets that you see on that site already.

[00:00:18]
So the about me picture and the pictures of the projects that maybe you've actually done. But I would actually prefer it and I think it'll be a more meaningful project to you if you swap this out with all of your own information. And so for those of you who are a little bit more advanced and already know how to set up a coding environment, this might be what you wanna work on while I address some of the beginning beginners here for a few minutes.

[00:00:41]
So what I would recommend you do is the following. You can go to a website like Adobe Color, and choose a color palette for your work. So I am gonna be working in the color palette you saw there on your screen, but let me just open up Adobe Color here.

[00:00:56]
If you've not been to this website before, this is color.adobe.com/explore. And you'll see here that on this page, there are a few color palettes, they all look kind of remarkably similar. Unfortunately, they don't make this too obvious. So if you go over here to the views side, this little drop down here in the upper right corner, go to color themes.

[00:01:18]
And then you can just go to something like most popular, and so this is what's popular here today. All kinds of different color themes that are here and available for you, or you can filter them in a bunch of other different ways. And if you find one in here that you like, you go wow, this one's really great, click on it, it will put you into another screen.

[00:01:38]
It'll give you all of the hex codes that you need in order to work with this particular color theme. And of course, for those of you who are graphic designers and a little bit more knowledgeable in this context, you are welcome to of course create your own color palette.

[00:01:52]
So that's the Adobe Color functionality that's here. Second, think about two fonts that go together that you want to use together. We're going to be using two fonts that come from Google Fonts today that's Oxygen and Oxygen Mono. But, you are welcome to choose different fonts, if you like different fonts.

[00:02:12]
And obviously, most of you're probably familiar with the Google Fonts website, it's at fonts.google.com. And today there are only 12,084 fonts to choose from, I hope that's enough for you. And you can choose two that are going to go together. If you have no idea how to choose two fonts that go together, the website that I recommend for you is called font pair, and that's at fontpair.co.

[00:02:38]
And font pair has a whole bunch of different fonts. You can just scroll through here, and it'll give you some ideas of two fonts that go together. So if design is not really your thing, just pick something from here that you go, wow, that looks kind of fun.

[00:02:55]
I think I might make use of those particular fonts. And I believe the fonts that are in use here are also available on Google Fonts, but you'll want to double check that and make sure that that's true. Get a photo of yourself, suitable for a workplace type of website.

[00:03:15]
The usual types of recommendations apply obviously, this is a work site so you want to have something that's fairly professional looking. Don't wear a hat, don't wear your sunglasses, smile, look at the camera. Those would be my biggest hints to you for a picture for that particular page.

[00:03:32]
Three examples of your work would be a great thing to include as well, you can get a screenshot for each of those to fit the theme that I've given you here. And write up just a couple of sentences about that particular project. That would be a wonderful thing to include and then you could maybe link of someplace where you might have some more detail about that.

[00:03:53]
The social media links are good things to include I recommend LinkedIn and GitHub for a work related website. But if you are a big Twitter user or other social media platform user and you want to include that that's fine as well. And if you wish, a copy of your resume, and you might have that in PDF format and might be on a place like Dropbox or Box or Google Drive.

[00:04:14]
Or maybe you actually have that someplace else that's already marked up in HTML, and that would be fine too. All right, so the things that you should know before you take this course. So back a few years ago we put together a boot camp here at Front End Masters, it was Brian Holt who did the JavaScript part of that.

[00:04:32]
And I covered HTML and CSS, that is available online. So, we offered this course here on our Internet fundamentals, Internet fundamentals.com/watch will give you all of these videos. They're totally free you don't even need to register for them. And they'll give you a little bit of background about things like a very, very high level about how the Internet works.

[00:04:54]
They'll talk about files and folders, organizing files and folders on your Mac or on your PC. A little bit of background about browsers and those kinds of technologies, and a little bit about CodePen and moving information into CodePen. Moving it over to VS Code, which is the editor that we'll be using to build web pages.

[00:05:14]
So, that is here it's on the Internet again, no registration required you can watch these videos at any point in time. The bootcamp itself, it requires only an email address in order to watch the videos here for this particular course. And so you do not need a Frontend Masters subscription to watch this.

[00:05:34]
And like I said, again, it's gonna walk you through the basic basics of HTML and CSS, there's a website that goes with that as well, that's here. And so what I am recommending that you complete before you start this particular course would be simply there's an introduction. There's a setup and prerequisites HTML, CSS and Layout, that's it.

[00:05:58]
Those first five chapters are what you're gonna need to know in order to take this particular course. I'll talk you through all the rest of it. Finally, in terms of technology, you're going to need to have some kind of editor for HTML and CSS to follow along. Although we're not going to get there for a little while.

[00:06:17]
The editor that I will use when we get there is called VS code and it's available here, I've given you the link. If you want to download this tool and follow along, this is it, and mine comes up as Mac because I'm using a Mac. But as you'll see here on the down arrow, you also have choices for Windows and for Linux if those are the platforms that you happen to be running.

[00:06:43]
Why VS code, it tends to be an industry standard, it's relatively straightforward to set up so that is here and available to you. If you like something else if you prefer brackets, if you prefer Sublime Text, if you prefer Notepad plus plus. You are welcome to use any tool that you want that will let you write HTML and CSS.

[00:07:03]
And there are a lot of those because again, we're keeping this simple, simple. And then finally, we're going to be using code pen as one of our big technologies today. And code pen is here at code pen.io, I have already created an account. But if you have not, you can do so.

[00:07:21]
I will give you links to the CodePen. So this is what code pen looks like, it's got an HTML block here on the top, it's got a CSS block here. There's also a JavaScript block down here underneath but I generally use the JavaScript block to give you directions.

[00:07:36]
That's all one great big huge comment because again we're not reading any JavaScript in this course. Up here on the top under settings, you'll find places where you can add to this specifically under CSS. Scroll down to the bottom, we'll go through this again later as well. You can add here external stylesheets or pens, this is a great way to include the fonts that you're gonna use on this web page.

[00:08:00]
So we'll make use of this when we add our links to our Google Fonts into Font Awesome. The other part of this is this funny looking button here that I don't know it's kind of a bunch of boxes. This is how you change the orientation of your page.

[00:08:15]
And I believe when you start code pen, it will look like this where you've got the HTML and CSS and JavaScript on the top of the page with the design underneath. I find it more convenient to put my code on the left hand side of the screen, because then I am able to grab this middle bar and move this back and forth.

[00:08:33]
Which is helpful for working in responsive design. So you can configure your screen the same way, and then of course you'll need a web browser hopefully you have Firefox and Chrome installed on your computer. Those are definitely preferred over Safari or edge which depending may have different issues and tend to be less cross browser compatible.

[00:08:53]
Although this becomes less and less of an issue with every month that goes by.