Lessons: 8Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Getting Started

Before we get into coding up our projects, let’s go over a few things you’ll need to get started.

Note: You’ll need to use Chrome browser for the duration of this course.

1.2 Getting Started

Hey, this is Kezz from Tuts+. Welcome to Five SVG Text Projects. Now, before we get into actually coding up our projects, there's just a couple of things we need to go over really quickly. First up, along with your access to this course, you should have received this zip file here with the source files for this course included. So go ahead and download that and extract it, and then inside, you're gonna find these two folders, one with a collection of starter files. This is gonna give you all of the basic HTML that you need for each project so that you can just focus on the SVG code, and then you'll also get the completed project file for each project. So you can compare what you're doing with the completed file and see how you're going. Now, there are actually three images that you're gonna need to download in order to preview these projects, see how they look, and also to be able to work on your own projects. So once you have downloaded these files, make yourself a new folder that you can work in for this course. And then grab the starter files, and just copy them into your working project folder. And you'll also notice that we have this text file here that says download these images. That's because there are three images that you need for these projects. They're gonna be background images. I don't actually have the right to distribute these images, so they're not in with the source files. So you're just gonna need to go ahead and download them into this folder yourself. So if you open up that text file, you'll see the three URL's that you're gonna need. So jump into a browser, grab a copy of this metal image here, this wood image from textures.com, and this brick image. So download those three images into your working folder, and that's all you need to do with the images. We're not gonna be processing those images in a graphics editing app, or modifying them for use in our projects. Everything that we do on these images is going to be done in code, inside the SVGs that we're creating, which leads me to another thing that I want to mention before we get started. These projects are all designed as learning exercises so that you can get familiar with SVG and you can see some of the power that's involved in working with filters and patents and various other things. We're not optimizing these images so that they'll download quickly. We're not making our text projects responsive. So these are not projects that are something you would actually put up online. We're just working right into SVG and enjoying working with all the different things that it can do, without necessarily worrying too much about making these projects perfect for deployment in a live website. You can also put those same three images into the completed projects folder if you wanna preview those completed projects to see how they look before you start working through creating the projects yourself. The other thing that you're gonna need, if you don't already have it, is the Atom code editor. You can use another editor if you want, but that's what I'm gonna be showing you through as you go through this course. So grab yourself a download of Atom and get that installed. And within Atom, there's a couple of packages that are gonna be really helpful as you're working with SVG. The first one is atom-live-server, and we're gonna use that to create a live preview of our projects as we go along, that is also going to refresh every time we save our changes. And another tool that's really helpful with this kind of work, the color-picker plugin and the pigments plugin. Pigments takes any color code that you have in your code and it puts a highlight behind it showing you the color that that code represents. So that's really helpful as you're choosing your colors to work with your SVG, and the color picker gives you an inline color picker. So if you put your mouse inside a color code, and you press either Ctrl + C or Cmd + C, it's going to bring up a color picker to help you finely tune the colors that you're going to be selecting. I'm actually gonna provide you all the color codes that you need for these projects, but when you're doing these things by yourself, it's really, really helpful. I'll just show you how to use atom-live-server plugin. So first make sure you have a project folder open in the side bar here. So to do that, you can go to file, open folder and then just browse for your working project folder. Then we're just gonna go up to packages, atom-life-server, and hit start server. And you actually wanna be working with the Chrome browser for this particular project just because right now, it has the best support SVG. In my experience so far, it's the best browser in terms of supporting all of the different aspects of SVG and displaying SVGs consistently. And because of that, you might find, if you check out your projects in other browsers, they don't look quite right. But as I mentioned, we're not trying to go with perfect projects that are absolutely deployment ready. We're looking at this as a learning exercise in working with SVG. Atom-live-server will start in your default browser. So just for now, set Chrome as your default browser, then hit this start server button, and that will automatically get a local host started. If you can see here, we've got the local host address up here, and it will give you a preview of all the files that you're working on. So I'll show you the starter file for our first project, which is going to be bubble bevel. So this is all ready to go to start for us to working on in the next lesson. Each of our side project files just has a little bit of coding here to get you going. Just the basic HTML page structure, a little bit of styling to control the fonts that are being used, their sizing, some background colors, and just a little boilerplate for our SVG. Everything else, we're gonna start coding in ourselves. Now just to let you know in advance, we're not gonna be coding every single thing in manually, line by line. We actually have a little bit too much code to cover in each one of our projects for there to be time to type everything in manually, so I will do a little bit of copying and pasting code in a piece at a time, but I'll be explaining everything that's contained in that code, so you wont miss anything out. All right, so in the next lesson, we're gonna get into coding up our projects, we're gonna turn this starter file for our Bubble Bevel into this. So I'll see you in the next lesson.

Back to the top