Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

2.1 Choosing an HTML Template

The first step is to choose a web template. I suggest that if you have never done this before, start with something simple and wait until you have some familiarity with the process before tackling the larger, more complex templates.

Related Links

2.1 Choosing an HTML Template

The next thing that we need to do, in order to start converting an HTML and CSS template into a React application is, we need to have a template. And this is where the kind of meat of this course really comes into play. A lot of times when we're creating these applications, maybe from scratch or you're just getting started, one of the biggest problems that we tend to run into, or at least that I tend to run into, is I don't know what I want my site to look like just yet. I know I kind of have a vision maybe of what the application is going to do. Maybe it's a blog, maybe it's an eCommerce site or whatever. But I don't always know what I want it to look like in the beginning. So what I like to do is I like to take a template and kind of start with that and start converting it over into my application. And just kinda see where things start to go and then once things start to take shape, I can play around with the structure and what everything looks like. But I don't really wanna spend a lot of time worrying about that upfront anyway. So what I like to do is I just like to kind of take the type of site that I'm building and search around the Internet and find some simple templates. And I'm a creature of habit. And so I tend to lean towards Bootstrap, to start with any wave when it comes to the web applications that I'm building. So in this case for this course, I basically just went onto Google and I searched for simple Bootstrap blog templates, and I came across the startbootstrap.com site. And here we have a number of bootstrap blog themes. And down here, I'm going to just kind of start with this first one here. But ultimately you could go and find any sort of web template from any site. It really doesn't matter. It could be paid, it could be free, but I will tell you this, this little bit of advice. If you've never done this type of a conversion before, then I would probably start with something relatively simple. Just because it's very easy to get overwhelmed when you're working with large, complex website and web templates. So what I would like to do is tell you something simple and I can always build onto it, and I can always kind of have it turn into something bigger and more creative. So start with something simple and follow along with me. If you haven't already picked a theme or a template, and go ahead and go web this one as well. So all you have to do is click on this Clean Blog here. Then you can come down here and check it out. And a lot of nice websites these days allow you to get these live previews. So you can click on View Live Preview, and you can come in here and you can take a look and see what it looks like. We've got a nice little kind of banner on the front here, Jumbotron if you will. We've got in our header, and then we've got our menu, our navigation things up on the top here. And then we kinda jump right into the blogs. We kinda have a little bit of a preview of what these blog entries are gonna look like. You can see the older posts down here, we have a footer at the bottom, which is always a good thing. Then you can come through here. You can click on these, and I think these all just take you to a kind of like a preview post, which would be cool. So we can go ahead and see what that would look like if we wanted to use this template as well. But then we could also navigate to these other pages. We have an About page. So we have an about me with the same kind of lorem ipsum text here. We can see a sample post which we saw before, as well as the contact information here. So I think this looks pretty good. This is pretty simple. I think this is gonna be an easy one to convert and kind of show you the process of going from creating a brand new React application. And then taking that HTML and CSS template and actually converting it over into React so that you can actually start to build your website that way. So let's go ahead and go to the Free Download section here. And it's going to download this to our computer. So we'll go ahead and open that. And this is going to expand everything here. And here it is right here. So let's just go ahead and bring this out onto our desktop. If I were to open that up, you're gonna see it's gonna have everything in here that we're going to need for our application, which is pretty nice. So I think from this point, we're gonna be pretty good. We're going to, in the next lesson, we're gonna start with the conversion process and I'm gonna show you what to do with all of these files. And really, we're not gonna need all of them, necessarily. What we can kinda do is look and see what we have here. So in vendor, that's where we're gonna have our jquery, our fontawesome and our bootstrap, which we're gonna use, which is gonna be good. We have some SCSS in here. We can use that if we want. I'm not gonna focus too much on that. I'm not too concerned about it for this particular course. But we will use our posts, we will use the JavaScript folder, everything that's in there, our index page, all of the images that come with it. We'll use those just as this placeholders. We can obviously use our own later on. We'll go ahead and use the minified css file here as well as the contact and about pages. So I know it sounds like a lot, but once you start to dig in this, you're really gonna see that there's some repeatable parts of this that you're gonna be able to use. And it's really not gonna be too bad. Once you kinda get the flow of what you're doing, you're gonna find this is actually not all that difficult as well as actually pretty fun. So now that we have this downloaded to our computer, let's go ahead and start to create our React application.

Back to the top