Introduction

[00:00:00]
>> Jen Kramer: Hello everyone, my name is Jen Kramer, welcome to getting started with CSS v2. In this course, we're going to be building a single page portfolio website from the ground up, using HTML and CSS. We will be working on the content for that particular portfolio, we are going to be building out the sections of that page using a program called CodePen, I'll tell you more about that later.

[00:00:25]
And then we'll move this into VS code, which is a code editor, and we'll get this published online via GitHub and GitHub pages. And for those of you who know a little bit about HTML and CSS, one of the fun things that we'll add to this is a light/dark theme.

[00:00:41]
With a switch that's completely CSS powered that'll switch us back and forth between two different color themes, so that'll be a kind of fun thing to add. The website for this course is gettingstartedwith.css.education, and we are ready to get started. So from the website that's here, I'll just show you briefly, there is a link here to the finished site.

[00:01:04]
If you take a look, this is the website we'll be building today, and this is the, of course, the desktop version of the website, you can make your screen smaller to see the mobile version of this. So you'll see that we have a photo, we have some information about this person, you'll see that we have links here that go to various social media items.

[00:01:23]
We then have a series of projects, those projects consist of images, headlines, information about the project. And then tags at the bottom indicating the kind of technologies that were used to put that together. And then down towards the bottom of the page here in the footer, you can have simple links that go to other places, other things that maybe you don't wanna feature as prominently, as well as your contact information down at the bottom of the page.

[00:01:49]
And then again, up here at the top, we do have the option of switching over to a dark theme, how fun is that? Down here at the bottom of the course website, this will give you information about the background of the course or the kind of prerequisites that we're going to be going through.

[00:02:04]
And I'm just going to start here right at Chapter 1 if you guys are ready to begin. So a little bit about what you should know coming into this course. And as I just said, we're gonna go through and build a single page portfolio website. I strongly encourage all of you to have your own information, use your own about information, use your own photos, feature your own projects.

[00:02:28]
I'm gonna go through with you how you might think about that content and put that together. Of course, you can use the materials that I have here for this course as well. You don't have to follow along exactly the color scheme that I'm using, you can change that.

[00:02:42]
I recommend going to a website like Adobe Color. I think Canva has got some color schemes there's a whole bunch of places online you can go to get color schemes. If you're challenged when it comes to color matching, you'll probably also wanna have at least one font that you like.

[00:03:00]
This course is gonna be using the Inter, I-N-T-E-R, Inter font that's available through Google Fonts but you can choose any font that you like. I recommend having a photo of yourself and I'll talk a little bit more about what that photo should look like, ideally. And then maybe up to three examples of your work if you want more, that's fine too.

[00:03:22]
And then your social media links, typically, you'll include something like LinkedIn and GitHub. If you have other media that you use in a professional manner, that's recommended as well. Once again, there's little screenshot of the site that we're building.
>> Jen Kramer: And then, in terms of what you should know before you take this course.

[00:03:43]
So first of all, if you do not know a whole lot about how the internet works or clients and servers or if any of the terminology that I talk about today are tripping you up. I recommend watching the Internet Fundamentals course, this completely free course here through Frontend Masters, and you can click that link and watch those videos to come up to speed on that.

[00:04:02]
I also recommend watching the Frontend Masters boot camp. You'll get an introduction to HTML and CSS there if you are coming into this with absolutely no background and coding whatsoever. And that is completely free to watch as well, so feel free to take a look at that. In terms of your technology requirements, there are very little you'll actually need in order to follow along with this course.

[00:04:28]
For our development portion of the course, we'll actually work in CodePen a lot, which is something that works right inside of your web browser, there's nothing to download. Later on, we're going to go into VS Code, which is an industry standard code editor. If you have other code editors that you prefer, totally fine to use those instead.

[00:04:47]
And of course, as always in web development, we recommend that you have a couple of web browsers installed to follow along. And I've given you links to Firefox and Chrome as two that are compatible on both Macs and PCs. And if you're on a PC, you may also have Edge, if you're on a Mac, you may also have Safari.