Check out a free preview of the full Complete Intro to Web Development, v3 course

The "HTML Project" Lesson is part of the full, Complete Intro to Web Development, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses the requirements for both HTML pages: index.html and about.html. The index.html page should include a title, intro, and five blog posts with titles, author, date, and text (bonus points for images). The about.html page should contain the blog name, a few paragraphs about the student, and a list of recent jobs/schools/accomplishments.


Transcript from the "HTML Project" Lesson

>> So you gonna make your personal blog. I started that last project in the previous section so that you can kinda get started with like that skeleton and multiple different pages to navigate back and forth to. So here's your project requirements, your blog has two pages and an index and an about page.

Your index needs a title of some variety, my cool blog, or my thoughts, or something like that and some sort of like, hi, how are you? Welcome to my blog, and it needs a link to an about page, your blog must have at least five posts on it.

Just keep it on the same page, it doesn't have to like link off to other pages or anything like that. Each post needs a title and author, the date it was posted, the text of the blog post. You can use this lorem ipsum generator to generate text, you can come in here and just say like, I want five paragraphs generate, here and I'll give you a bunch of paragraphs right?

I'm pretty sure you can actually just say, in here in VS code, if I just say Lorem 40 and I hit tab, yeah, it'll give me Lorem ipsum and it'll give me 40 words. So if I say Lorem 10, It'll give me 10 words, that's another really easy way of doing that Okay, so you need the text of your blog post and bonus points for images.

Your about page is the name of your blog, few paragraphs about who you are, that kind of stuff. And I need you to use a list cuz I want you to use a list element specifically [LAUGH] of your recent job, or recent schooling, or accomplishments or whatever you feel like putting in a list of some variety please.

And, yeah, so this will be mostly black and white. This is totally atone your own interpretation, it's very loose in your structuring because I want you to kind of be creative with it. This is mine, right? Brian's blog, got some posts with Luna on it. You can see that it has lorem ipsum text in here, it's gonna look something like this because there's gonna be no style associated with it yet.

And then if you go here about page, it'll be another one here, right? Okay. So, if you wanna see my answer to it, which I want you to try this your yourself first before you look at my answer. I think it's important to try things, struggle, try and figure them out cuz I think there's a lot of learning there in that like moment of struggle.

But I'm not your mom, right, like you can go look at the answer if you want to, if you're gonna learn better by just looking at the answer then do that. This entire thing is about learning, it's not about cheating or not cheating, it's like if you end up at the end learning it, I don't care you get to get there, right?

So do whatever is best for your capabilities, but I'm going to advise you that most students that I've observed and myself included in this meet need to struggle a little bit, right? But don't struggle so much that you get discouraged, if you're gonna get that far just look at the answer, right?

And if you get stuck ask your neighbor, go Google it, ask your neighbor, go on Stack Overflow. Whatever you need to get you to the answer, do that thing, that's what I'm trying to say. For those who don't know how to do that, if you right click here and say, View Page Source, this will show you the HTML on any given page, right?

So if you click this, you will see my source code, so that's where the answer is. So what you'll do is you'll click on Brian's blog, right click View Page Source and you will see my answer too.
>> If you were really making this, you would want to use a content management system if something that's doing like posts.

>> Yeah, well, it depends, right like. This course website, arguably it's a bunch of posts right? And I didn't have any sort of CMS for it, it's just it's written in Markdown. So GitHub slash BT hold slash complete intro to web dev, and if you'll go here here lessons.

I guess arguably, this is my content management system, right? But if you just click on like HTML here, And this is what it actually looks like written out, so this is what I actually write which gets turned into the website.
>> And that's through next right?
>> .That's through next JAS, but anything can read markdown markdown it's just a flavor of writing text, right?

So this actually used to use Gatsby to generate this, now I use next JAS I tried remix, Jekyll would do this, Hugo would do it You could do this with Contentful, you could do it with WordPress, you could do it with any number of things, there's so many correct ways to do this that it's unbelievable.

I like writing mark down so I do it this way, but we'll come back and go through my answer.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now