Hand Coding an Indie Game Landing Page: Basic HTML and CSS | Petipois | Skillshare

Hand Coding an Indie Game Landing Page: Basic HTML and CSS

Petipois

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (29m)
    • 1. Intro

      1:05
    • 2. Course Introduction

      1:01
    • 3. Researching the layout

      2:40
    • 4. Creating the Header

      1:50
    • 5. Adding a Call to Action section

      1:51
    • 6. Making the Game Features section

      3:10
    • 7. Adding the footer

      1:14
    • 8. Styling the Call To Action

      6:52
    • 9. Styling the Features Section and Footer

      2:34
    • 10. Making it responsive

      1:14
    • 11. Adding gallery

      1:49
    • 12. Styling the gallery

      1:37
    • 13. Adding social media icons

      2:21

About This Class

Welcome to Create an indie game landing page from scratch.

As an aspiring game developer, you are now ready to share your creation with the world. You can do this by creating a landing page for your game and adding it your website.

Throughout this course you will learn:

  • Research for your website

  • How to layout a page using HTML5 Syntax

  • How to style the page

  • How to you CSS Flexbox and Grid system

This tutorial will to help you make your own from scratch with no external libraries just plain old HTML and CSS. Without further ado, let’s jump in....

Transcripts

1. Intro: Hello. My name is pretty poor. I'm a self taught where begins develop old software developer on I started so for development in the early two thousands I specialize in what design? Web development neighbor games to run of mint and, among other things, some of the technologies that I'm proficient in all html CSS, JavaScript, api, jsp PHP my sequel no more. So, Navid in the game Hobbyist developer s I have no unity and I'm off. See shop level design picks a lot. I count to design good design I've created, developed and designed many websites, mobile games and applications on If you need to refer to my website www dot petty quad occurred at UK. Do you have any questions, comments, concerns cause or about me? Please don't hesitate to contact me. So that's all about me. Now let's find out what you will know in this course 2. Course Introduction: So this is create within the game landing page from scratch Discourses Full Begin and the website developers looking for a friend project Teoh should kiss the new skills or in the year of developers who are looking to create a landing page with a game. So is a cell phone calls, and they will drink. So what we're going to learn is how to research game websites, what to look at on, how to mimic. There's excellent styling, but making a run by that What wax? You know, a game website aan den. We don't lay out the page using HTML five on, but then we're going to have to style it of CSS. And we're using patient Mel five syntax tags on CSS Flex box and grid. That's those are the kind of things that we will be doing and next we'll show you their finished product as to what is exactly your making in this course 3. Researching the layout: Okay, so this is what we're going to create. We are creating a indie game website page landing page. And as you can see, we have the head, uh, a call to action section, a feature in a lot of different creatures of the game. Also again play image in an area where we can have some media and then the future of the bottle. Now, this is a mock up design. Um, Now, the written section for this is actually on my website to Petty Quad occurred in UK under the section created the game landing page. Get the source code and you can follow along with the pdf here. But now what we're going to do is just take a look on. Do I look of researchers to other games and how they lay out their page? I won't see why I went off this design, so I start off of candy crush. So you like candy crush here. And as you can see, you have a navigation ball. We don't mean that for all website, but you have a navigation, but, um head, uh, image and I called to action plane. I was right there is ready for you to go a section talking about what the game is and where are also two down now Dio for squirrel Forever down. We've got some videos Screenshots, as some social media links and also the bottom got the footer with all the information. So then that's candy Crush. Now let's take a look at another one. Let's look at Heyday heydays, another mobile game. It's a landing page. So when we think of again a huge header, we know directly what it's called and everything. And as we scroll down, we'll see again and that the court action section, where you've got all these lengths to where you can actually get the game video again, a section all about what the game is all about. The nice image in a few screenshots as to the gameplay and again social media links and footer at the bottom. Now turn to one of my games. This is one of my indie games called Milk Switch and hey, straight away, you've got what ISS on which download it. You published it. I've got a trader here about the game and some of the features and some media links us to like all the Twitter feed basically and office 4. Creating the Header: Okay, so we've created a file called index dot html. What we want to do now is create a basic ation oflife template. Well, I'm using visual studio code so that on also plugging called limit when I talked html five , I have a template ready to get and in the title just indeed. Okay, now next, we want to focus on of the body. So inside the body, we want to create a main Section four. Now we're using the HTML five type off main. I didn't said that will now create head out. Obviously, that's what it says the page on. We will put in an image I haven't image. I'm getting a placeholder image from a website called the placeholder dot com on. I would like that 9 20 by 400. I haven't given it a name off Cape. It save that preview game had an image is huge, but that is the kind of size that is very good for a game 5. Adding a Call to Action section: next, we will start work on, uh, call to action section divided by. So now we get the use html by it's intense called section. And what you're gonna give it class? We will references. You know, CSS inside this court action you want T o h hey h one each one and hate three with that's we want to add a a link. So at the end of it, But it could be Blanca's Well, that's we'll make it look good. You are on. We'll say now that saved that section that refresh. Here we have a section cold. The court actions, I said, That is another thing. Don't. 6. Making the Game Features section: no good at a game details section and give a class. Well, maybe, actually quite game now in the section we can now have articles. So article again. This is another division on, basically, is a section on Andi Wigan Teoh aren't to cooled. Okay, paragraph text. Next A list. So this is where you would put features about your game now, just before just often gaming. Then we're gonna actually add Yes, this is where we're gonna image. But we want the image flights were gonna We're getting Teoh html five text figure. This usually is working with source. I give it to say the same image as before this time. Maybe small image like 300. And here is where you probably want it to. I have the screen should the game, game, place. And inside that figure, you also want to add think captured and the caption will be okay. Play. You say that. Let's see what we have so far. Excellent 7. Adding the footer: Okay, so now we've got made head of call to action section. We've got our game in first section, and now, outside of the main we want to add in this foot, we'll add a copy, right. You could also add a It also had a link to even address or off sections of the side privacy policy. What is 10 things and that will be yet spend? Doesn't have to be. Could you refresh for school? Right down to Bob. We have this all right section here. 8. Styling the Call To Action: that amendment is looking for a Hadley. Um, many standing. But we've got the layout sorted. Now you will. All main Nazi SS file. Let's see if we could get some styling done. I've gone Teoh Google wants, and I'm gonna import a CSS foot. Thanks. Now we're going to all main section. I'm gonna make sure family one of the funnest used amusing coining just one hand coining to save that. Police left something difficult to it Set in your index site. Make sure it's a link star shaped right. And so now that's actually connected. I should my body. And now we also add margin Zero. Just makes sure I like it. Very, very. Everything is flush now. We also want to make sure with always filled the screen and thats so this image. So I'm gonna make sure that the image se there's a what percent that way always fit the screen. How big? Okay, let's continue with call to action section. Now that section get back to, uh, section class in html. But this one had cooled toe action to save reference it. He So what do you want to do? Um, What we want to make the tech center only when a background I'm gonna use dark blue. She's basically this 00008 b, and he used this text that looking, Maybe add simpatico. These not really up to you, you styling give. Let's just make sure flight number exceeds 200 pixels. So good for my lunch with Allied in Texas Center. Making that background kind of blew at in some patterns. It's the Texas pushed in. We're making it white because the background is it's not blue. Well, I did a front size and we're making sure that the hikers boys at least 300 pixels. Therefore, refresh this page. We should see. Okay Said It's very nice, isn't it? We head out now 1/4 action section. Now, while we're here, we went well, style this link because that you can see it. So we're gonna style on. We're gonna make sure that even however it's visited, it's linked. Where is on the way? We don't want this. I saved it. Text decoration on getting background color, right? You basically need me to choose text color. We have some part of us having 10 pixels that's form anything within that the attack with up case case changed that way to see if I'm allowed aboard a rating. So this will make the scythe way. Have it? Damon is now a beautiful but but as you can see, asked me forever. You concede the hadn't curse in there, but it be nice if it could actually signify. So you do that with this cross hit? A. So when you call for a enemy, this is what's going to happen for the changes, background to using like will change color off the text point changed margin. It close changed 50. This is the result again that the styling is it? 9. Styling the Features Section and Footer: Okay, so now that we have section sort it, we are going to section. So we called the game playing with game feature section. We called it Game On are going to next do gaped infrastructure. So that would, like is for the game play image and this actually float next to each other. Something changed display used to Blacksburg next time. What? 10 fixes If we look again, they're not indexed rage to Now we'll see that in the game for a section two articles. So we want to make sure. Okay. You look if you want it, Teoh, it's save that briefs and him. So you got this taking up this part of the screen? Okay, Seven out of style for that. We want the call to Action White heading to be pixels. What size changed? Two times. Well, so way fresh that we'll see. No, I have this lovely, but 10. Making it responsive: Okay, so now we're gonna make sure that so the small screen, instead of being switched up together, stay. If we did this, then wearing the same media, get necks like I would say to make sure anymore. They you We changed gaming. Thanks. All right. Next line. If we know. Yes, we could see gameplay image. 11. Adding gallery: Okay, so now that we have a lovely page mate, last separate these two sections by adding class of sentence. Gonna say years? I said that supports that little bit more. And down here, every last section tag. I never wanted a custom center. This'll one what we were doing create another section after it. Oh, God. So this is what our economy will be. So we're going to basically have a quantum three and this many verses you want. Really? And we're going to have a figure. I'm going to just image caption Been a cook in the image and just full sake. I beg you to have your images that you used. Refresh the page you game features that and there's the media. And there's a screenshot with Excellent. So I will help you this figure a couple of times. 12. Styling the gallery: Okay, so now in our main dot CSS file, just before the media's query, let's first do consenting to center class. So the scent of flowers we wanted and live the text It's a text line since we refresh now media Andi in features with that class Oh, now consented. I want to do something as well to this think caption. So that's starting to ground color Likes blue Nothing to me Last looking thing. So now we will dio gallery basically just display Like you said, it's gonna get rid. Well, what we would like is for Greg template problems to be 33% aware Kloss Three columns and the Rose to sing that looks like 13. Adding social media icons: Okay, so this is it. Now, if we wanted to add images, Millicent who come back only refreshed. That's whatever. Just so they go, there's a nice image, Gunnery for you. That and we're gonna add some social I, Consul for two now. And for this, we are going to use a slash. She called for Wilson on IHS awesome dot com. Start using free. I'm going to copy this code and paste it not indexed on page two. You know, it's a style sheet that allows us to use these lovely icons, and in a way, so we will now have a three. Okay, three. Okay, So inside office, man, we will added, I clocks be okay. I'm getting these from the front. Awesome website. Something you have Twitter. I created this. E Think face this. Yes. Okay. Lets trick again in front or send icons. It's just f b. This book