FREELessons: 10Length: 51 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Our Starter Website

In this lesson I will walk you through the structure and styling of the web page that you will be working with for much of this course.

Useful Links

2.2 Our Starter Website

Hello, and welcome back. In this lesson, I wanna take a quick look at the website that we're gonna be working with throughout this course. And all of our code in this course is going to be hosted on the CodePen website. And you can find the URL for this opening CodePen in your course notes for this lesson. So once you've got that opened up, I wanna jump over to our settings. And in our settings, under the JavaScript tab here, you'll notice that I've got jQuery, and I've also got Vue.js. This is that CDN link that we looked at on the website. And as long as we're linking to Vue.js here, we should be able to use it in our code. So I'm going to close our settings there. And let's take a quick look at the HTML, just so that we have an understanding of how everything is put together. So we have this header section up at the top, which is really nothing fancy. It's just a title and a subtitle. Under that we have this section with an ID of menu-items with an h4 of Our Featured Items. And then we have one section with a few cards inside it. So the section is called featured-items. And inside the featured-items section we have, if we collapse some of this, we have three separate divs with a class of card. And if we expand one of those we can see what makes that card up. So we have our card image, which, as you can see, doesn't have an image tag in it because we're using a background image here. We have the card body underneath that, it's just another div. Which is gonna be this section below the image, and it's gonna contain the price, the product information, and a button. And then that really wraps it up. That's all we've really got going on, on this particular page. So as I mentioned, most of the work that we do in this course is gonna be on this page. And what we wanna do is we wanna treat this like a data driven website. Now since this is aimed towards designers, we're not really gonna focus on where that data is coming from or how to pull in that data from an external data source. Instead, we're gonna assume that you have developers working on the back end that'll help you out with that part of it. For the purposes of this course, I wanna talk to you about what to do once you get that data and how we can use Vue.js to display that data in a way that makes sense. So eventually, we're gonna be pulling in the images, the prices, and the product information from these data sources, which we're really just gonna hard code in JavaScript. But we're going to, for the purposes of this course, we're just going to pretend like that data's coming from somewhere else, that we're pulling it in from a database, for example. So if we jump over to our CSS, we can see how this is styled. And it's all pretty straightforward, it's not a very complex page. And for the purposes of this course, I'm going to assume that you do have a pretty solid grasp of HTML and CSS. So I'm not going to spend a whole lot of time going through this. I will go ahead and point out, though, that the layout for these items, for these cards, is using the flex box model. So it's just laid out one flex box row and that's really about it. There's nothing in our JavaScript section yet, we're gonna focus on that as we move forward. But this is gonna be our starter file. And again, make sure that if you're doing this locally, that you at least have a script tag that's pointing to this same Vue.js library. Otherwise, we won't be able to run that Vue.js code. So thank you for watching, and in the next lesson, we'll get started taking a look at the Vue.js syntax.

Back to the top