How to CODE A WEBSITE from Scratch for BEGINNERS! - CODING 101! - Create A Website Today! | Millennial Creatives | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

How to CODE A WEBSITE from Scratch for BEGINNERS! - CODING 101! - Create A Website Today!

teacher avatar Millennial Creatives, Learn Skills from the Future

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

14 Lessons (26m)
    • 1. Coding Your Personal Website - Welcome

      0:52
    • 2. Before you Code and Create...

      0:31
    • 3. Apps Required to Code your Website

      0:48
    • 4. Setting Up Visual Studio

      1:26
    • 5. Coding a Website Header

      2:57
    • 6. Customising your Website

      3:25
    • 7. Coding a Image onto your Website

      2:11
    • 8. Adding a Title on your Website

      2:40
    • 9. Coding Columns and Colours

      4:34
    • 10. Adding Links! (KEY!!)

      1:47
    • 11. Coding Paragraphs and Information

      1:21
    • 12. Coding a Contact Button

      2:14
    • 13. Thank you!

      0:21
    • 14. Are You Stuck? Bonus

      0:49
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

297

Students

--

Projects

About This Class

Coding for Beginners! In this class, you will learn how to code a website from scratch in a free coding software called visual studio by Microsoft. This is an easy, beginner-friendly on Coding a personal Website to showcase anything you would like on the internet. This class includes how to add code to create that includes text, images, links, and different elements. To code the website we used HTML and CSS.

This class is a step by step guide on how to create a website and how to code a website. Coding can seem hard but today we teach you how to code a personal website as a beginner. Jacob is a software engineer and he is the teacher of coding for beginners in today's class.

Creating and coding your own personal website is a lot easier than it seems and todays class shows you exactly how to do it!

Meet Your Teacher

Teacher Profile Image

Millennial Creatives

Learn Skills from the Future

Teacher

Hey, we are the Millennial Creatives. All the skills we have learned growing up with tech, from our university degrees and life experience will be shared in this platform.

A collective group of Millenial Teachers teaching you a wide variety of key skills.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Coding Your Personal Website - Welcome: welcome to the creative Millennials Channel. And in today's class, we're going to be showing you how you can build your own website from scratch Now. Recently, I asked my friend Jacob if he could create this website for me to showcase all of my current projects like a digital CV. And I wanted the website to look like, really professional and clean and this was the final product. So everything we did in order to build this website is gonna be broken down into simple and easy to follow steps so that by the end of this class, you guys can come out with with a website and skills to build a website like we have done on, be sure to check out the class project without further ado, I'm gonna let Jacob introduce himself. Hey, everyone, I'm Jake Open. I'm a software engineer. University of Leicester coated for about six years now today and we take any free website part by part, explaining really simply how to make works like create today. Make sure to follow along and let's jump into it 2. Before you Code and Create...: now I'm close on. We want to talk about planning and property tightening your code. So what, Me and do the first start Talking about what he wanted from the website on, he sent me an email containing on links he wanted on the images he wanted. The more he wanted the website to look like this minutes. So much easier when I was actually coding the website dis produced amounts family spent before you even start to code Smith, you have a clear tired in your head in a vision of what you want to find a poet to be gathered were quite images, text and minks and that's gonna go into the website. Make sure you have the whole of hand before we start actually pulling. 3. Apps Required to Code your Website: no. One class to talk about what programs and cellphone needs actually start making a website on. The good news is, it's easy on. A lot of programs are free to use. You can use that low different editors of tech senators, but alive has used its computer basic. It's a free software made by Microsoft is beginner friendly, and it lays out the code nicely. Nice organizing, structured way and very easy to work with. The other thing I need is an Internet browser that's going to be anything chrome safari. Firefox, just on the Internet browser on the computer should already have that. So once you have these two bits of software, you're good to go and ready to start coding. So I'm going down a visual basic now and get started. 4. Setting Up Visual Studio: no classroom. We're looking at actually setting up visual studio and get ready to start coding a website on my desktop here. Don't know that visual studio. So it's opened up now. Now I need to be opening in my folder, working on start adding the files in So I've made on earlier. So go open folder. I've called it Skill Show Website, so I select folder, I've broken the photo and I got a new file. I just called a file. Anything we want This is gonna be a hate html document. So I'm gonna call that skill share website, his team out at another one. My style. The process on the difference between news Teoh files is that HTML was going to be the main content and structure off the website. On the style my started CSS. It's gonna be the styling and how it looks and the colors and the layout off the website. It's really important that you end in dot CSS or dot html so that the browser knows what the fire was actually are and what they contain. So once we've done this stage were added only the image So what we can do is, I say the image into my image for the main home page one to my desktop in this drag and drop and drop it in there individual studio. Now we've got three files that we need to know that their picture for the home page, my started here, says on the school show website that hates him out. And these are the only three files that we need to be able to create a website. 5. Coding a Website Header: no class for we're gonna be looking at. I didn't the first Makoto website. We're gonna be adding this black bar here. The top top ball there completed. One side will meet working out how to code that. So the files that we created, the image, the star, she and the HTML document These all have made a new file in there in our fola. So or the files you made here all correlates the ones in this photo. So to open the website, we can actually just click on the chrome document and I just create a blank website and it's blank because we're not in any Kodiak or anything. So it's that you just displaying, displaying nothing. So as we work through another more code, we're gonna eventually end up looking like this. Now all these a Toro's. It's important that you copy the code exactly up why that's going to be errors. And the website won't look how it's supposed to look. So throughout the class, what we're doing is just copy and paste in the code into the document. So this way it's easy for you guys to see straight way how we've done it. I'm just talking for. So this first bit of hate mail here is how we lay out the HTML document. So we've got a doc type html. We set of language to English, and then we've got space for a header where some date is gonna go. This won't be displayed on a website, and we've got our body. And this is where all the content of the website would go so well, he's text will be displayed in this body by pressing enter on the keypad. We can move up and down through your lines in the head of the document. We've got some data, Um, some lines of text saying you put so this line here will make it compatible with Mobil's. So if you open this web site on your mobile phone, it would display how it should. We got a title. Is this good practice when it did memories fellows website on. But this could be anything. Whatever your website is gonna pay on this planet, cut here is very important. We've linked. Are CSX document to the hedge tomorrow document. So we've named it. We call it style Shit on the link towards it. Is this link here. My start of CSS and this will link directly to this folder here on Like I was saying earlier, This is where all the styling and the colors and make over Let's go a minute. What's that look nice algo in this photo up. Another contender going here in this hate HTML document. So our first line of text for the body is Well, let p for paragraph on, we'll add res on Fellows Corp. And this will just display a line of text at the top of the document. And for a reason, Federal court, It won't show any of the styling or anything yet because we've no actually added anything in the CSS document. It would just come out plain text so we can see by going back to our document will be opened. Refresh the page. Yeah. So we get reason, fellows, which is exactly what we talked in here onto the page, but likely saying no text or starting yet? No starting yet. Even what we're gonna add that in the next sculpture. So in this class, we've added the basic structure for have hated him out document. So we've added the header, linked it to a CSS starship. I provided the first line of text until website 6. Customising your Website: now in class five, we're gonna be looking at actually starting at the top of the head up. So these risk reason Fellows Corp here to get to look like how it doesn't they competed website. So in the previous school share class, we looked at getting a text into the screen. But now I'm gonna be looking at starting out in the color to it. I'm making it look a lot nicer. So the CSS file it's like a previous he said is where we have all the styling for to make it look how it how it should onda coloring and stuff. So this is the fire. It's already linked. We really linked it through this link here. Um, so, yeah, the basic structure is gonna have to hate your mail. And we had to put it on. We had the top logo Madison comments here, which don't do anything, but I just helped you guys and read it. So Kofler, basically out the html page, please, to the fonts, colors mayor off the body on top of the website. So here for the body, I've just copy and paste in the code to save you guys. Time to watch me type out. But what is talk you through what each line does. So the color we set toe What? So this would be the text off the whole body so any any text will be what we set. The front farm is what funds we're gonna be using. We set a background color to black which carried them for the rest of website on. We set margin zero auto, which means that the whole website everything will be sentenced. Andi said text align center to make sure the Texas not in the middle of the website and not to decide so professional set a high on whip off the body. It's 100% on what it means is it would just fill up the whole screen on. We set the overflow y two visible, which means that it is that there'll be a visible anything that overflows the screen size have a little scroll bar, school down, set, overflow, extra hidden so we won't have a scroll bar on going right. It should fill the whole screen. And now, for a code of top logo, we've added some padding into the top logo on class. I very little margin at the bottom. And what this does is you can see here. That is a bit of space between the text on where the actual image begins. You can see where topless dollars there's a little bit of space. Just just so it's not a crowd that looks a bit nicer. So now I think about two on page tomorrow. Document. This is the code of previous jihad, which makes the white text the text in the white screen. Reason Fellow Corp But now we've actually styled what is gonna look like what it works like basically websites going like So the next step need to do is make sure that the HTML knows that we're referring to this this section. So what we do is we add our costs. We go Dave Clasico stop logo and then shot this tag on Move the text. They've already talked out into this cause I was really important that we get a class name , right? Top logo needs to be exactly the same as the top Logan here off the Haitian Belgrano. Which section of the CSS were referring to? So now women refresh the website. It should look a lot more like how it has done here. So always be resold, missing the image and the rest of this text. But we've added our top logo off the reason for those court banner on the top here. So in this school share, we've learned how Teoh style the CSS style, hated him out on get a website looking a lot more professional. Another next steps are going to be adding in the image for the website. 7. Coding a Image onto your Website: now in classics will be looking at adding an image on a cool effect called parallax to the website. So we can see here that when you scroll down, it's got it's nice moving, effective it. And that's called a parallax effect. Mrs. C s s trick you can do where you basically move the image I slower rate to arrest a document. When it's cold up there. Just start off. We need ah hate Chmela document to add a header. So we just open up the head attack here and shut it here on the rest of it. We do in the CSS file, there's a few lines that we need to adhere. So in the HTML tiger, probably some more lines here. Um, this is a bit complicated. Understand? So what we've done is just copy and paste the code here. I'm going to give you a rough overview of what we've done on. Did you guys copy it? How have we done? You'll get the same effect on your website was added. Some lines of code here on this. What this does is allowed a freely effect happen and this is in the body. Put the tag on. The rest of the code we've added is in there ahead attack. So we opened up the head of here. Andi, we add our background so the rest of this again is a bit complicated. So in the head attack, you type in background coal on your l on a name off the image that you want. So here we want their image that we added earlier. So we just type it in word for word and thought J T. J and that will bring up the image on the on the Web page on the rest of it is just re sizing it and starting it so that we get a foot the cool scroll effects when we move up and down through the website. So this is how alive resized it. So I've transformed it here using the transform tag. I've set a minimum heights. It doesn't get too small. And I've said that the image to cover the whole of the screen again is quite complicated piece for beginners. But you are able to just removal this and used the background just a background image about effect. So just to confirm, if you do a background image by itself. You will have to live every sizing, but not quite as much is all this and only need that 19 attacks to get image on your website. So when I refreshed the page now we'll get an image without a text. We have another text yet, but we're gonna get the image. My website. 8. Adding a Title on your Website: Welcome back to class seven in this class. We're looking at Inditex into the top of the document. So right now we've added that image and scored. I'm nicely. We're just gonna walk out how to add in the text onto the top of the image. So forehead are in our head of section that we've already created. Add these two lines of code. Each one will be the big code future mothership. We've called ours Hayes to we could see brass epic in its here. And these are all in the HTML document that in a CSS document we've got a style these words to get on how we want them so the fallen besides the position, this is all done in the CSS. So before I 1st 1 we've done our head up. Hitch one, this is the page one in our head up, which we've done in the hate email already. So we've made position absolute, and this means that the text will appear on top of the image. We've aligned it to the center off the website and we've added 50. So I left 52 right to make it appear in the center, and we added a font size to be 200%. The same goes for headed to just done this same thing Position absolutes is going to appear on top of the image on, but just added a little bit further down to see the top 10% here I talked 25% here, Teoh, make it show below that title. We've also had some stein to fund here, so use font style italic, which makes it the italic from inside small, which makes it a smaller font size so full of smaller head up for browser beginnings. I wish you've written here. We need to make sure that hitch to links up to Diamond Head on page two. We don't say things that position absolute to make it appear on top of the image Takes a line to the center on. We've used left right on top, starting to make it pill appear in the centre things top thing had scented We change will move, uh, dump. What's that? I've also had some starting to the front here to make italic Andre set font size too small divorcees text transform here to lower case which regardless of what we write would transform all the text. Hello, case. Now, if you re freshly a website with the other text, we see that the text comes on top of that image. So when we scroll down on, we get the effect that we're looking out in the full website. So to recap in this episode, we've looked at how to style but headings off our text for main page of the website. I'm looked about heart position is on also had to get on top of the image. 9. Coding Columns and Colours: gonna be adding and this assets area here. So we got some links and we got three columns and I see laid up. Um, so to start off with a container in the HTML document. So we go, def cause container, Um, in this style, we've got it all container containing a position Absolute. So it's gonna be able to go on top of the body and we're just starting here. It's a color black line. Height foot. Wait, just a style How it's gonna work. So here we've set the college here to the background. Black starts gonna be the basics for the rest of the rest of the website. So we got some black here on. We've added Thekla Garay, so this would be the basic color off the document. So we've got some great text over here. Next stage is to add on. I have a container for the asset content, so this will be off the code right here. We've got a darker gray color and had some padding in here. This gives obits that set up heading left and right to 10%. Just this creates a margin between here and the other side of the screen here to valid some top heading here, which just gives a little bit of a break from the top of the screen. From the image on, we've added a whip 100% and that sets the container 200 center of the screen. I can see now, Andi said. A black guy and color here. Teoh. Shh! On a hex ref background color. So if you go online and there's different colors, correlate to these different numbers. So here have used to Thio Thio, which bases just a very dark gray, which you can see here. So once you've got a container containing the assets are next stages. Teoh, add these columns in here so we get a nice three columns side by side, and these columns are a sizable. So when the screen gets too small, they put back on top of each other rather than getting too tight and crowded and they stretch right hours. Well, to do this in this in the CSS, we got it some more content. So you go call him here to create three columns that float next to each other. Eso We set a column tuck when we set a color toe, White said. A basic color here will be business social, medium creative, diesel colored, white. We've set a background color to the same great as our asset content so that the columns merge in with the background. Andan. We've lined all the text in a content to be in the middle by center. We set a whip to 33% so we faked 3% of screen. Andi. We've really a parting of 10 to each side Teoh to prevent them going right to the edge. When we enlarge it. When they write Hegel screen just sort of in the middle. The high is also set to auto, which means however much content will add in there in the column. So if you had to add lows, the links, it wouldn't just thinks keep going down here over the back, texted the rest of the clones have spread out. This code here is what allows the clubs to resize. So when we re address the screen, they will resize nicely and pop until of each other. And this will be good for from no balls again, I haven't typed out in front of you just say you guys time. But if you were to copy what we've done a word for word here it would come up exactly how it is an honest now. So I just got a large, uh, the html here, but it is back in our hedge terror document. We've added some summer text, so text that you'll see in the website. So, um, the creative social media orders text here one more about links for now, but always text. Here is what's written in the HTML cause his tomorrow is where the content goes. Eso We've set the class two column, so this will correlate to hear so column. And here is exactly how we done for earlier in the videos where we did on the top logo. Andi, just write our techs. So we've got a history creative p development of human creative capital on these. It just texted we're gonna be on our website falls. You can changes. It also just need this hedge to starting here. Teoh, stall the text of their assets in the center. So when you refresh the page now, we should get three columns laid out nicely. We won't have the links yet because I'm gonna get add them in the next class, but yeah, we should other three columns. Yeah, so refresh the page. And here are three columns laid out on top of it, so we re size a document. 10. Adding Links! (KEY!!): now the last night we'll be looking at how Teoh either links into the into the columns. So we've already added in the clubs in in the last class. So now we're gonna be looking at the think So I want to explain this. The other think we basically want toe Just do a hate draft to the actual link of the actual website. So they're here. We've got didn't res photos dot com. And then there's this section here is what you want the Link Teoh heroes on the website. So I just got exactly the same works like name for you for the link. But if you scroll down on here like we've got a www should evoke sitcom and we decided to the podcast link. So on the website, the podcasts link will show up rather than the website euro for the column you've got you else on this basically makes it a list. Um so the links were appear in bullet points on Do what I've done is on this style type none on what this does is it makes their Robin having bullet points. It takes with bullet points from the link, and I've also added a bit of Ah, a bit styling here. So what it does is it controls the color of the link, So we set it. So when it wants to cliff that click a link, the color won't change. Sometimes you go out of dark purple when you visited living credit, but these ones were change. Uh, we said it's the color teal to match the rest of the website. I don't so we set the color when we hover over the the action. When we have over the links they are. They turned to the cut of what? So to recap, how we had links into the website. You go into the column class that we've already created in the last Class UL list on we just add the website links in as many as many as we want into each section into each 11. Coding Paragraphs and Information: So if it cost 10 we're going Teoh designing the war section of the document. So to do this in our HTML, we're gonna be setting up a new class awards content. We can add the title of our awards. We had a paragraph containing all the awards that was sent to be in the email. So we got a list of awards here. I'm just shut the paragraph, uh, and then we go into our style. So in the CSS, on awards content with Alison piling to the top just does a bit of space, we set a whip to 60%. So the width of this area will be 60% of the screen. We have set text aligned to justify what this does. Is it re sizes? So it will always remain symmetrical. It's in mobile modes or full screen mode. We set margin zero auto, which means that the pro golf will be in the center of the screen. We've also added awards contact Pete Uh uh will style the paragraph that we put in here on . We just set the color of that gray. So in this class, we've got how Teoh design that award section, so we've got how to center it on. We've learned how to make a new paragraph on top awards in on also style, the awards content. 12. Coding a Contact Button: so four costs 11. We'll be looking at how to make a button. What is busting would do is when we click It revealed a contact details for the website. Yeah, for the final section we've done is added little class rapper ritual basically styled the heart of bottom looks. So if you're going to my style right, the bottom we have added the rapper, which will centre buttons who've gone text alive Andi alyssum or code here to start buttons we've gone dot button is a background color till we've got the color is white we've got no border around it. We set the font size at the margin we set the turned appointed. When you click on the button on, we've also added some code where you hover over the button on It was slightly a large bill animation there on. To do that, we've added uses this word kit transform, which is basically this code here, which are the zoom animation and you can set the scale of how it starts and under scale. Teoh how end? So we set skeleton for so just enlarged its very slightly. When you hold her over now it's makes it a bit more interactive. So for the code about how what happens in the button is clicked on. So we said the input type is a button on on click. It will run dysfunction my function. And we just added a JavaScript into the boat. Moorthy Haitian Mel here, and that could be done in a separate document, but just gets a little bit. We just added the script into the same document as a HTML. So we basically said the variable is gonna get the email. Um, and then yes. So then when we click it again that, you know, we disappear. Andi email code can be seen in the CSS. We've, uh, yeah, displayed none. So it's not gonna be displayed until we click it. I'm just bit padding set a background color, the email sitting, margin talking, he said the fun of the email So we're about to document and collect contact. May pop up with an email off Dylan's email address. When we go to contact me can't originally see the email, but once you click the Contact Me button, it will pop up with Dylan's email address, and when you click it again, it would disappear. So in this cast we've looked over the website on We've worked out how Teoh, a button using driver script, reveal an email address and now we can see the completed website. 13. Thank you!: so thank you for watching that. Costs of how to make a website we've looked through how to make once I like this one. So using the poets effects and also styling. So I hope that gives you some knowledge on the HTML and CSS and JavaScript and how it works . Do you check out a class project where we would need to design a website similar to this? On the length of the code is in the description. If you get stuck at any point. Yeah. Thank you. 14. Are You Stuck? Bonus : Hey, just a quick bonus clip here. This is outside of Jacob's coding tutorials, but I wanted to say we decided to put the code that we used to create my website that Jacob is going to take you through today in the description so you can click the link in the description, get the code for the whole website, and then you can copy and paste that in on kind of see if you're following along with tutorials where you went wrong in your code on This is a really great thing. We decided for anyone who's starting to code as a beginner because instead of figuring out was trying to spend ages on where you went wrong, you can look at our code side by side with your code on, determine what area you made or you know, if you just want to kind of speed up the process of getting to the point where we did, you could also follow the exact steps we follow by adding in the code from the link below. So I just thought I'd let you know that we've added that to the description on Hopefully you guys enjoy