Building a basic portfolio website using HTML, CSS and JavaScript | Simon Rose | Skillshare

Building a basic portfolio website using HTML, CSS and JavaScript

Simon Rose, Software Engineer and Educator

Building a basic portfolio website using HTML, CSS and JavaScript

Simon Rose, Software Engineer and Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 24m)
    • 1. Introduction

      1:55
    • 2. Installing software

      3:37
    • 3. Getting set up

      2:08
    • 4. Creating our project

      7:55
    • 5. What is HTML?

      6:25
    • 6. Adding HTML to our page

      10:21
    • 7. What is CSS?

      9:41
    • 8. Adding our CSS

      14:21
    • 9. What is JavaScript?

      5:39
    • 10. Adding our JavaScript

      6:59
    • 11. Finishing touches

      11:02
    • 12. Getting our website online

      2:17
    • 13. Thank you and next steps

      1:33
  • --
  • 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.

21

Students

--

Projects

About This Class

Ever wanted to create your own website but don't know where to begin? Start your web development journey here with Dr Simon Rose.

In this free practical class, you'll build and publish your own portfolio website from scratch in under 2 hours using HTML, CSS and JavaScript. The class is taught by a university lecturer and is adapted from an Intro to Web Development university module. It is designed for absolute beginners and covers the fundamentals of web development, including an explanation of each technology and how they fit together, it then walksthrough step-by-step how to create and publish the website.

Please post a link to your finished projects below and feel free to ask questions in the discussion section. Enjoy!

What you will learn in this class:

  • Visual Studio Code
  • NodeJS and npm
  • How to serve websites locally using http-server
  • HTML document structure, elements and attributes
  • Emmet
  • Using the Google Chrome inspector for web development
  • CSS selectors, classes, IDs, properties and values
  • Box model
  • CSS positioning
  • CSS colours
  • CSS rules of precedence
  • JavaScript introduction (functions and variables)
  • Domain Object Model (DOM)
  • Favicons
  • Icons using Font Awesome
  • CSS animations
  • Deploying websites using GitHub pages

Meet Your Teacher

Teacher Profile Image

Simon Rose

Software Engineer and Educator

Teacher

Hi, I'm Dr Simon Rose.

I'm a freelance software engineer and university lecturer in computer science from Sheffield, UK.

I'm passionate about computer science and education. I have a Masters in Software Engineering, a PhD in Computer Science and have been developing software, predominantly for the web, across both industry and academia since 2013.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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.

phone

Transcripts

1. Introduction: Hi, I'm Simon Rose. And welcome to my SkillShare course. In this course, I'm going to be teaching you how to create a basic portfolio website using HTML, CSS, and JavaScript. But first, a bit about me. I'm from Sheffield in the UK. I'm a software engineer with a PhD in computer science. And I've been developing web applications in both industry and academia for around eight years or so. This course, It's an abridged version of an introduction to web development module, the I ran as a lecturer, Sheffield Hallam University. Firstly, let's go over the course. What will we've created by the end, we're going to create a portfolio website for character of your choice. This could be you, a friend, a relative, a celebrity or sports person, or a character from your favorite book or TV show. This will be a basic website, including a profile image, name, some text and links to social media and a CV. Next, what will we learn? We're going to cover the foundations of the three main web technologies, HTML, CSS, and JavaScript. We'll also learn to add icons for social media, a favicon, and some simple animations, we will then publish our site to the internet for free using GitHub pages so that you can share it with your friends and family. This course is designed to be the first step in your web development journey. What do I need? Most importantly, a computer. This can be a PC or Mac and an Internet connection. You also need a PDF, some social media links, and a picture of your character. If you don't have these then samples have been provided below. Next time. In the next lesson, I'll show you how to install the software that you need for the course. 2. Installing software: What software do we need. For this course we'll need 3 pieces of free software, Visual Studio Code, which is an IDE, which stands for Integrated Development Environment. For writing our code. Google Chrome, a web browser for viewing the website. You can use a different web browser if you'd like, but I recommend Google Chrome as it has more features for web development that will help you as you continue to develop your skills after this course, you will also need NodeJS, which we'll use to run our website on our computer. More on this in the next lesson. We're going to start by opening the default browser on your computer. I'm using a fresh profile on windows just to demonstrate how you do this on Windows. But the process is similar on Mac. On Mac you'd open Safari, I'm going to open Edge. And first we're going to install Google Chrome. So we will search for Chrome. Download Chrome today. Download Chrome. Once that has downloaded, you open the file, which will download Chrome and install it on your computer. So I already have Chrome installed. But it may install again. There we go. I'm then going to open Google Chrome. We'll do the rest of this lesson in that. So if you're wondering what I'm doing there, I'm pressing the Windows key and then searching for Chrome. Or you could click on the Start button and find it in the list. We've then got Google Chrome open. So we're going to search for Visual Studio Code. Top link. We're going to download for Windows or Mac, if you're on Mac. That's going to download an executable file in the same way, that we just did for Google Chrome. Once that's downloaded, install it. Following the installer. Now I already have it installed. So I'm not gonna re-install it, but you just follow the instructions. Very simple. And then you'll end up with Code on your computer. And the last one we need to do is to install Node.js. So I'm going to go on Chrome again, search for NodeJS. Install NodeJS. We want to install the LTS version because this one is going to be more stable, open that, and follow the installation process. I also have this installed as well. So I'm not going to do again but you'd follow through all the instructions. And eventually you will install it. Very straightforward. Just use all the default settings. And then we will have NodeJS installed on our computer, and that's it. In the next lesson, we are going to go through getting set up and creating our project for a website and going through some of the first steps in web development. 3. Getting set up: In this lesson, we're going to cover creating our website folder and opening it in Visual Studio Code. We will then go over the file structure that we'll use for the website. And I'll give you a quick explanation of how we're going to use Visual Studio Code to create our website. Throughout this course, I'll be giving you some handy tips for how to use Visual Studio Code more effectively. We'll also cover running our website locally using something called HTTP server. And this requires a bit more explanation. So HTTP and serving our website. So websites are served over the Internet using something called HTTP, which stands for Hypertext Transfer Protocol. You don't need to know too much about this, but it's worth having a brief explanation. Simply put, this means that your web browser, which is what's known as a "client" in web development jargon, which could be any of these examples here, we've got Chrome, Firefox, Opera, and Internet Explorer, that makes a request to a "server". And the server exists somewhere else other than where you're using the internet. And there are several technologies that you can use to run servers, which have been given here. That server, it receives your request and it returns a response. And that response contains the website content which is then shown in your browser. So typically, that server will be used to serve websites for multiple different "clients". So if two different people try to access a website, the same server will be returning those websites. That's typically what happens. Because we want to work on our website locally, meaning that it exists only on our computer. And nobody outside of our network can access it. We need to set up a local server, as in local to our computer. We're going to do that using NodeJS. Don't worry, this is a straightforward process which I'll talk you through how to do in the next lesson. 4. Creating our project: Okay, we'll now go over setting up our project and going over the project structure and getting that running on our computer and served locally, which we discussed in the last lesson, what that means. So first thing to do is to create the folder. So in my documents here, remember this process is very similar on Mac and I'll talk you through any differences there. So we're going to create a new folder called, "my-first-website" And in there, this can be empty for now. We're now going to open Visual Studio Code. Which I've got here. I'm going to open the folder. So you'll have this welcome window. If you don't have the welcome window, then File > Open Folder will do the same thing. You're going to then find the folder, "my-first-website". You can either click it and then select folder or go into it and select folder. As long as this folder here is "my-first-website". That will then open this. So, now we've got this Explorer window that has appeared on the left-hand side of Code. And we can view our files here. A few things to note. On this menu on the left-hand side where we've got search function. And the other three, don't worry about for now. These are, you'll understand these as we kind of move forward and your web development knowledge grows. So in the Explorer, which is what we want, we're going to create the basic project structure for our website. And this will be similar across your first set of websites that you create. So we want to sort our project by the kind of files, the file types that we're using, so we're going to create some HTML which will just be in the root. I'm going to create some CSS. We're going to create an image folder, which will hold our images. A docs folder, which if you have a CV, you'll put in there. Remember I'm I'm clicking off the folders each time. So that they're created in the root, otherwise they'd be created in the other website. And we've then got JavaScript. What I'm then going to do is to copy the image that I want. So if you're using one of the sample characters, you can copy their files into here, just the image file into here. I'm going to create one for myself. So I'm going to copy my profile picture into the image folder, and I'm going to rename it using our naming convention. So our convention we're using is hyphenated words. But you could use some other casing as long as there's no spaces. Because spaces get upset when you load them into your website. The browser doesn't like the fact you've got spaces in there, which we'll see when we create the index. I'll demonstrate that for you. Okay, we're now going to install HTTP server. Using npm, which comes with Node.js. So this is quite complicated, but I'm going to talk you through it. You don't need to understand it particularly. You just have to get it to work for now and then you'll develop your understanding as you progress. So we want a command window open first, now this normally needs to be an administrator window. So it has to have administrative privileges. So I'm going to search for "cmd". And I'm going to right-click on command prompt and click Run as administrator. You might be asked for your password here. And then we've got this window that should say administrator command prompt. So I'm going to run this command which will install HTTP server on my computer. So I want to do is type "npm install http-server". And I want to give it a global flag because I want it to be installed on the whole computer and not just on this directory. So that's hyphen g. Don't forget that. And now wait for this to install. There we go. So I already had it installed, so mine just updated, but yours would run, have a bit more text there. And it should say successfully installed, HTTP server the end, we're now going to go back onto Visual Studio Code. And we're going to open a terminal window. Now there is a terminal button, that terminal option at the top menu, we're going to do new terminal. And that'll open a terminal at the bottom here. So we've got our file structure on the left. We've got our terminal at the bottom, and then this will be any files that we have open here. I'm now going to run HTTP server, so we just do HTTP server. Enter. And that starts our web server. Simple as that. If we now go on to Chrome, we can copy one of these links. So I'm going to copy this second one, 127.0.0.1. Press enter. And as you can see that is now giving us our directory, our project folders. You can see have got the same files that we have here. You can also just do this by using localhost, which is the name that your computer uses for locally served websites to put it simply. So we want to load an index don't we. We want to load a file there. So what we're going to create a new file. So in the root, new file, index.html. And we'll leave that empty for now. Next lesson we'll go through and add things to it. But we can close this. If we refresh, we're now loading the index HTML. So if we go back on here, we've got a get. And it's telling us that we've got a request from our browser. And our index has been served because we can't see our directories. In the next lesson, we'll go through adding things to our HTML page. If you get an error saying that HTTP server cannot be loaded because running scripts is disabled on the system. Then these are the steps to fix it. So we want an administrator PowerShell window. So we're going to search for PowerShell, right-click and PowerShell and click Run as administrator. Enter the system password. And we're going to run a command set hyphen execution policy unrestricted. And you want to say yes. So "Y" and once that's done, we can look at execution policies. Get execution policy list. We can see local machine is now unrestricted and this should solve your error and you should then be able to run HTTP server. Bear in mind, you might need restart your computer before this would work. 5. What is HTML?: Okay, what is HTML? Html stands for Hypertext Markup Language and is used to define webpages. It comprises of a set of standard elements that browsers interpret and display to the user. And it fits into our web development diagram as defining the structure of our webpages. These have to be standardized. So HTML has to be standardized in much the same way that normal languages, such as English or Spanish, are standardized. So that different people, or in this case, people and browsers can understand and interpret them. They also have to make semantic sense so that someone reading the code of a HTML page can understand what each element is doing without having written it themselves. So, what is a HTML element? So I just mentioned those on the previous slide. A HTML element defines something on the webpage. These normally have opening and closing tags. And here are a few examples. So you can see the semantic nature of the HTML tags. For example, we can tell that H1 is a header 1. So these go H1 all the way down to H6, which is the smallest header. We've got paragraph tags, we've got strong tags which make text bold. We've got div, so divider, logical division of the page. And we've got footer, which is the footer of the page. So you can kind of see that these are building up kind of an understanding of what's going on in our webpages. HTML elements can be split into three categories. Structural elements, block elements, and inline elements. Be aware there is some crossover between these. So structural elements tend to be block elements as well. But it should help you understand how HTML pages are formed. So, structural elements are used for basic page structure with the content in the middle of the tags being other HTML elements typically. So here we have a basic HTML page. With a head and a body. And these go inside the HTML tag. So we build our pages up by placing tags inside tags. And this gives us this page structure. And we'll go into more detail on that in the next lesson when we actually add page the HTML to our pages. And you can also see we've got a title tag here as well, which is the title of our page. Quick note the body is the visible bit of the webpage and the head is kind of meta information about a webpage itself. Okay, block elements appear on a new line by default. In blocks. Understanding what a block does is also important when we get to adding CSS. Block elements are used for things like formatting, headings, lists, and tables. So we'll go through a few example elements. So formatting, we've got paragraph, div and line breaks. So that's the format our pages. We've got headings, which I mentioned earlier, which is H1 down to H6. We've got lists, so we've got unordered list. You can have ordered list and then we've got list items inside the lists and tables. And you've got several elements for describing a table. As we'll see, browsers have a default styling for each of these elements. For example, paragraphs always appear with a gap above and below. You can obviously overwrite this with your CSS. Divs are important to note as they're commonly used a format HTML pages and are one of the most widely used elements. And the line break tag is special in that it doesn't require a closing tag. So remember we talked about opening and closing tags, for HTML elements. All these other ones need to have closing tags whereas a line break can be closed itself, as you can see with the forward slash next to br. Okay, inline elements. So inline elements do not appear on a new line. They appear on the same line. And they're used for things like text decoration and styling. For example, strong, we've got emphasis, which is italics. And we've got span, which is like a div but appears on the same line. We've got hyperlinks, which is the anchor tag, or the a tag, and we've got images. So these things by default all appear on the same line. And these are often used inside a block and structural elements for things like styling, links and images. Okay, attributes. This is quite an important part of HTML. Attributes control our elements behavior. They allow you to assign information to elements. For example. An anchor tag will require a href element to tell the browser where to take us to when you click that link. So for example, this one will take us to the aboutus.html page when we click on it. Another example is image elements that require an src or source. Attributes tell the browser where to load the image from. Without that, you're not going to have an image. They can also be given an alt tag on alternate tag, which is very useful, which will display for screen readers. So for accessibility and also will display if the image itself doesn't load for some reason. We can also specify width and height attributes on images. And there's all sorts of attributes we can, we can provide to HTML elements, which we'll see in the next lesson. The next lesson will be adding HTML to our page. 6. Adding HTML to our page: We're going to apply what we went over in the last lesson and setup our HTML page structure. I'll explain the different types of elements we're going to use. And then we'll view that in the browser. I'll also go through some Visual Studio Code tips that will help you to kind of streamline your workflow when using it and make it easier to use. So, the first thing to do is to reopen our website. So you should see your website open in the recent list when you open View Studio Code. I've also got Google Chrome open and this is the URL we we're on last time, but you will see a new tab. What we're gonna do is we're going to run HTTP server, which we covered last time. And then if we refresh our page, or if we go to localhost 8082, which is localhost plus this port number here. Then we should see our empty website. Okay, we're just gonna do a quick Visual Studio Code tip. So you'll see here this welcome window is in italics. That's because we've got preview mode switched on. Which is when we open files, we have to open them, double-click them, to open them properly. Now I don't like this. You might like this, but I'm going to switch it off. So we'll go preferences, settings. We're going to search for preview. And then we're going to disable workbench editor: enable preview. And that will mean that we can open our files without preview mode. Okay, so now we're going to set up our HTML page. Now in Visual Studio Code, there is a package included called Emmet. And this lets us use shortcuts to define, HTML and CSS things. So, if we type exclamation mark and then press tab, and you can see here we've got this Emmet abbreviation. That will create a basic HTML page. So we've got a HTML tag here, opening and closing, and inside we've got head and body. So these are some meta tags. Just ignore these, these are to do with defaults for the viewport. And then we've got a title. So what we're gonna do is to set our title to my portfolio and then whatever the name of your character is. And if we save that and go back on Chrome and refresh, control R on Windows. You can see that the title has appeared on the tab at the top here. So we can see that it's connecting and it's working. So we're now going to set up the different types of elements that we're going to use on our page to get our basic portfolio structure working. So the first thing we're gonna do is to define a header. So this would be the bar at the top. So with Emmet, we can do header and tab. So if you see these Emmet abbreviation, you can do this. And that will create the opening and closing tags. Or you could just write that out. And there I'm going to put H1 with my name in it. We're then going to create a div. So this would be a div for the main content of the site. And we'll apply some classes and IDs later on, which will let us define styles. So we're gonna do an image, so if I do img on Emmet that gives us the attributes, source and alternate. So we've got our image here, which we copied across in the last lesson we did on here. So image Simon profile and it will fill itself in and then Simon Rose profile picture. We're then going to put in a H3, which is going to be welcome to my website. And the code that we're expected to reach the end of this session will be in the course documents. So you can look at it there. We then want a paragraph tag. So I'm going to just write a quick bio. So you can either use the ones from the course documents or you can write your own. I'm going to leave a little message. And now we're gonna do the social media links. So if we save that, so you can see I've got one unsaved here. Quick note about Visual Studio Code. If you open "open editors" that will tell you the files you have open across the top. So if I save that and refresh, there we go. We've got the start of our basic website. We've just got a couple more things to add. A couple more Visual Studio Code tips. So if you want to open a file, you can do Control P, which is go to file. Which you can see on the screen here and then search for it, or it will be in previous files there, and you can close them using Control K, W. Okay, so we've got our basic profile in there. We're now going to add some social media links. So we're going to create another div to divide our page up. We are then going to have some anchor tags to link to this. So I'm going to type a and tab. And I currently don't have a PDF saved in here for the CV, so we're going to leave that blank, but this will just be in case you wanted to add one. So I'm just going to write CV there. And we'll then do another one, anchor tag. And we'll do... this would be the link to an Instagram page. I'm going to leave these all blank for now. So we'd put Instagram. So that a bit in the middle of the tags is what will appear on the screen. And then we'll copy and paste that. So on Code you can copy and paste by line so you don't have to highlight it all. You can just copy the line and then paste it below. And we'll add one for Twitter. The last thing we're going to do, The last thing we're going to add to a page is a footer. So we're going to make sure that is the footer tag and a paragraph, and we'll add the copyright symbol, which is copy, which is HTML. HTML understands what that means. And we'll do Simon Rose 2021. We'll save that, refresh. And there we have our basic website. One final thing to note is a quick tip for Visual Studio Code. If you want to auto format your websites, this is nicely formatted at the moment because Emmet has been doing that automatically. If you wanted to make sure it was auto formatted. If you do Alt Shift F, that will format the page using Visual Studio Code's auto formatter. And then we'll save. One final thing. We're just going to cover relative and absolute paths. So a relative path is relative to the current location of our current file. For example, our index for the moment is in the root of our folder and our image is in the image folder. So we have to give it a relative path. So if this image was in more folders, we would include more folders in this path. If our index was in a folder, we'd have to go back out of that folder and then into the image folder, which we could do using the dot dot, dot, dot and then forward slash, and that would go out. So for example, if we were going to include a CV, which I'm guessing you will if you have a CV ready or if you're using one of the sources, I've included a blank PDF for you to use for this. So this would also be a relative path of docs and then CV dot pdf. Whatever you wanted to put in there. The social media. These are going to be absolute file paths because they're not going to change depending on where we are, where the index is. So I will put two of these in. So we'll put in Instagram and Twitter. And you can see these are full links. So if I click on that full link, it's going to open the Instagram or Twitter page. Whereas this is relative to the current page. Hopefully that makes sense. I'll just show you how we could make these relative ones absolute, which you shouldn't do. But I will just show you for the purposes of this explanation. So if we go to our website and we copy out the URL and we add that there, save it, refresh. The image is still there because it's still being loaded, but it's being loaded absolutely. So when we deploy our application later on in the course, this will no longer work because it's expecting this Simon profile image to be at localhost 8082. And it won't be, it will be at the URL that we've given it through GitHub pages. So this is just worth remembering and you might come into some issues with this and this is worth remembering, as I said. And there we have it. That's our basic website using HTML. 7. What is CSS?: Now we'll cover CSS. So what is CSS? CSS stands for Cascading Style Sheets and is used to apply styles such as colours, fonts, and positioning to our HTML pages. CSS comes in the form of rules that can be applied to one or more selectors. More on this later. CSS rules can be in their own files or within our HTML pages in style elements or even inline as attributes of other elements. However, as we'll see, we need to be wary of the rules of precedence of CSS. This is where cascading comes from, where rules on the same selectors will overwrite each other depending on where they are. So you might have a rule, that will be be overwritten by another role you've written. And you need to figure out which one of those will have precedence over the others and which one has been applied. In our diagram of web development technologies. CSS defines the appearance of the webpage. So we have the HTML for the structure and the CSS for the appearance. Okay. The first thing we'll cover is what is a CSS rule? So CSS rules have three parts. A selector, then one or more properties. And those properties each have a value or a set of values. In this example, the rule specifies that all the H1 elements in our HTML will be red, such as this. So the first bit of that, a selector, what is a selector? So selector selects, as you could infer, the elements to apply the CSS too. There are a wide range of possible CSS selectors because there's a lot of range and scope on what we might want select on our page. So for some examples, these could be HTML tags such as H1 or body, or paragraph, etc.. And those will apply to all the instances of that element in our page depending on where we have the CSS. Classes and IDs can be applied in HTML through the class attribute or the ID attribute. And we'll go into more detail on that in the next couple of slides. Other attributes can also be used as selectors. So for example, we could use the alt tag to select an image tag, the alt attribute, sorry, to select an image tag. We've then got pseudo classes which are quite widely used. So these ones to be wary off, these could be hover or focus on a form. So if you hover over an anchor tag element, we can apply a class only when the user is hovered. And these are denoted with the colon syntax before the pseudo class. So we will use these in our portfolio. Okay. Classes and IDs. So classes can be applied as attributes. Classes and IDs can be applied to as attributes to any HTML element. They enable easy selection of single and multiple elements. So they are very widely used and something that you need to be aware of. As a general rule, classes can be used multiple times. And IDs should only be used once on a page. So that's the difference between the two. For example, a comment section would have an ID for the comments element. And classes would have IDs for each individual comment. So here we're using the div element to divide up our page. So we've got a div with ID comments, and there's only one of those on the page. And then we've got multiple comments. This example uses divs, as I've just said, which are commonly used for parts of the HTML page not described with semantic tags such as header or footer. Selecting classes and IDs. So how would we define a CSS rule for class and ID? And I'll show you here. So back to our example for the comments, we define rules for classes using the dot prefix. And we define rules for IDs using the hash prefix. This is very important to remember, and we will also use this when we move on to our JavaScript. So dot is for classes and hash is for comments. We could also be more specific and make sure our rule only applies to comments within the comments id. So we might have comments elsewhere on our page. And this selector, which is called a compound selector, makes sure that only our CSS is only applied to those. And you can end it with compound selectors that have a lot of, of elements in them to make sure our CSS is very specifically applied to some elements on our page. Okay, properties and values. So as I've said, each CSS rule can have several properties. There are loads of these, and each of them has a set of values that it can have. These can be measurements or they can be preset text values. For example, the text align property can take these three values and more, but I've included these as an example. In this scenario, only the last one, so only justify will be applied because right and center will be overridden by the last one. But this is just an example of the different values that we can have. So you will be, you'll be aware of text aligning in, in word processors such as Word and this just does that to the text in CSS. So we'll go over some examples of properties for when we want to position your HTML elements and to colour them. And we'll then add these to our website in the next lesson, along with some other ones including a font. So, positioning. One of the main uses of CSS is positioning in HTML. To make sure that our elements are positioned on the page. Websites don't look very good without this, as you've seen in the previous lesson when we were just doing our HTML, we need that CSS in there. CSS and web browsers both use the box model. And this works as follows. So you have your content. And this is a HTML element such as a div or a footer or a span. Outside of that you have the padding. So all of these things I'm talking about, the content obviously could be 0, but you wouldn't want it to be 0. But the padding, the border and the margin can all be 0. And they don't have to be visible on the page, but they are still there. They are just 0. So we've got padding, then we've got border, and then we've got margin. So you can use this box model to position elements quite nicely on the page, as we'll see. Okay, colour. So there are several ways to define colour in CSS. The simplest is by name. So we can just give it red, yellow, orange, etc. We can also use hexadecimal values. Now you don't really need to learn where these come from because there are plenty of generators for these that will give you the hex values for colours that you know and you can use colour pickers to decide. An example is this one which is red. You've then got RGB or RGBA, red, green blue or red green, blue, alpha. So alpha allows you to control the opacity, so transparency of your colour and the RGB is commonly used in graphic design applications. So you don't need to remember these, you can always just get them from colour pickers, as I've said. Okay, where do I put my CSS? So I mentioned at the start of this lesson that there are several places you can put it. And we need to be aware of the order of precedence of those locations. So inline styles are the most important, as in they will override the next two I'm going to give you. For example, if we have a paragraph with an id of main content, and we give that the style of a colour of grey. So even if we style the main content somewhere else, that gray will always be applied unless we use the important flag, which is something I will talk about in the next lesson. Document level. So this is where we add a style HTML element into our HTML page, and we then include our CSS in there. And that's the second most important place. And the final one. So the least important is external style sheets. So this is where we would link it and have it in a separate file. And this is what we're gonna do. This is the main way that you will see CSS used because it allows you to reuse CSS files and is the standard approach when using CSS. Next time, we will be adding CSS to our website. 8. Adding our CSS: Welcome back. We're now going to add the CSS to our website. So we'll first get the site running again. So we're going to start a HTTP server as we did before. And will then navigate to localhost 8082. And now we have the website that we got to the stage. We've got two In the last lesson that we did to the HTML. So now time to add the CSS. So the first thing we're gonna do is create a CSS file. So I'm going to right-click in the CSS folder on the left side of which Studio Code create a new file. I'm going to call it main.css. It's got a dot CSS file because it is CSS file and are now, now it's open. A quick shortcut. Visual Studio Code is if you want to open this in two windows, so I want the index on the left and the main CSS on the right. I'm gonna do Control Alt and right arrow key, and that has moved over the right side. So we can now drag this out and we can work on both at the same time. Now it's fingers to include our CSS file in head of our HTML document. So what we're gonna do for this is use a link tag. As I mentioned in the last lesson and as an MFA shortcut for this as well. So link tab. So we get link rel stylesheet, we get H ref, and we're gonna give it a CSS slash, main.css. Save that. And now I'll CSS file should be included in our HTML document. To see where that has happened or not, we can refresh our website. And I'll now show you the developer tools on Google Chrome, which is one of the reasons why I recommend Google Chrome. I'm going to press F2. Or you can access this by right-clicking and pressing inspect. It's Control Shift die that opens the Developer Tools. Now here we have the hazmat elements on our page. This is our DOM. If I go on the Sources tab and click on CSS, I can see that the main CSS file has been loaded into upside. So this is always a good debugging tool. If your CSS isn't working, you can always check it using this method. Okay? We're now going to have to add some classes and IDs to our document so that we can access them using CSS rules and the selectors provided in those. So what I'm gonna do is I'm going to add an ID to our main div here called Content. And this will all become clear when we actually start adding the CSS rules. And then going to add an ID for our links. I'm going to add a class for each of the links themselves and a call that link. And I'm going to copy that and paste it in each link. So we can style these individually. And because also add an ID for the profile picture. And that should be it for now. So let's start adding some rules for these then. So in the CSS file, we first one a rule for the header. So do the head roles would be the content rules, kinda middle bit and one of the first rules. And then I'll talk you through some more general things that you need to help you understand the CSS, including the sticky footer, okay, if we color schemes, I will do adding a font with Google Fonts. So header, this is a HTML element. So I don't need any dots or how she's before that. That's what the selector is called. We're gonna give it a background. So this is where you'd use the color schemes which are given in the course documents below for each individual account. So come up with your own, and you'd come up with your own. This is why I recommend. So Google Chrome, new tab, the website called colors. Cool loss, which is really easy. It gives you a color pallets semi press Generate. It'll give you a random one and you can continue to generate color schemes pressing the space bar. And you can use whichever one you like, or you can go and explore and find a color scheme that you like that's already been, already been created. So I'm going to use mine Cholesky. So I'm going to use a light blue for my header. And Lincoln have a rule for my H1, which is the name that, and I'm gonna make it a color, which is the text color white. So FFF. Now if we save that, make sure you say you've profiles and we refresh the portfolio. You can say that we've now got a background and the text color. Now to refresh CSS files because they're loaded in and cached by Google Chrome, you might have to do a hard refresh, which is Control R or Control Shift. Control Shift down, sorry, or Command Shift on a Mac. Okay, so dairy free the colors first. So that's for the header. Now, I'm also going to be some positioning actually for that. So I want the text to be aligned in the center. So CSS is all about learning the learning the pool, the rules and properties, and then authorities in the values, and then just been able to regurgitate them basically. So you might it be quiet, steep learning curve where you turn. Remember, wait, what does walk? But that's fine. Everyone goes through that stage. Muslin, give it a padding of five pixels. I'm event for the box model in the last lesson. So the padding for inspect the element itself. And we go and compute it. We can see the content is this light blue thing on screen. And then the padding is the five pixels in green that appears over here on the edge. So it just separates it slightly. Okay, Before we go on any further to the main content, I'm going to add a couple of rules for HTML and body. I'm going to give it a margin of auto. Because by default, browsers give the body, as you can see here, a margin around the edge, which we don't want mask because it doesn't look particularly good. So I'm gonna give it a margin of auto, which is going to make it 0, essentially. There we go. And I'm also going to give it a font color. So the whole body mama default color to be a shade of dark gray. So that is a dark gray shade. Maybe semi-colons refresh. So just making sure that all this is the right color. And we've also got this one padding around there, which I'll talk about and fix later on. Okay, the content. So for the content, once add a rule for our profile. So I want the profile image, which by default is an inline image, which we talked about. Inline elements are block elements. I will not to be to have a position which I can define using relative positioning and give it a margin top of 25 pixels, width of a 100 and 50 pixels, border-radius of 75 pixels, which is going to do the circle. So you can always just do 50 percent for this and I'm 50% of the width. So hard reload. There we go. So we've got circular image sound to look a bit better there. The next thing that we want to do is to add a content rule, padding. So I want, this is going to be using the shorthand for padding and margin, which is top, right, bottom left. So you can give it four values. We can give it two values. And I'd be top and bottom and left and right. So I want to top, bottom padding 0, left and right padding to be 20. I want it aligned center. Again. I want to max width. So this is our maximal variety website to be 960 pixels. So this is a design decision where I want all the content centered and only filling that portion and the rest of the website is empty space. You can have websites that fill all the space. Is Italian for the, for the, for this course, we're gonna do that. And what the marginal tos ask Ms. center it in the middle of the page. There we get seeing start to see the website coming together. Analysis is centered all our content in the middle. So if I can contact, you can see, given a padding and then we've given it this margin and it works out in the margin, there has to be the center. It. On the left and right sides. Okay, the footer. So the footstep. We're going to make this a sticky for pterosaurs is going to stick to the bottom of the page all the time, unless his content that pushes it further down underneath bottom of the page. So this is CSS for that. So we want position fixed and move it left or right wall type, alternate 0. So if some elements, elements that are given the relative, you can give them these left, right, bottom positions. And that's relative to the actual parent element. So you'll have a back ground, wants to be a slightly darker blue to the one. I've got the header, the width to be a 100 percent. And I want that also to be text aligned center. Okay. So they had refreshed, didn't load it. I have to do a hard refresh control shift. Our there we go, and it goes to the bottom. Missed one thing that I want to make the text white as well. There we go. So our website is really starting to come together here. The next thing that I want to do is to just give the links bit of styling. So we have the link, I want the link. Each of our links to have padding left and right of ten pixels, we're going to do 0 for top and bottom and 10 for lifting line. Save that, refresh. And that just gives them make some bit, a bit wider font. So we've fonts. You can use Google fonts for free, which is going to easiest way of doing it is I wanna show you how to do that. So such Google Fonts, we can go fonts dot google.com. The one I want to use is Open Sans, Serif and Sans. I'm going to click on the style, but I want, so I just want regular. And that's what gave me this instructions on how to use it on the website. So I'm going to use an import link. And we're going to add that to our style sheets. I copy that. Think of in the style tags. We're going to add that to the top. And then we're going to set the font family of our HTML body. So all of the content on our website. And to Open Sans and then make sure we want that. That's sans serif. Save that. Okay, I've just spotted a slight mistake here. So it's actually the header that we want to have the padding and the text align on. So I'm going to move those up, put them in a Header, save. And there we have it. That's our website. We have some basic CSS. In the next lesson, I'm going to show you how to use JavaScript. And we're gonna do some very simple JavaScript to set the year, copyright year to the current year. 9. What is JavaScript?: In this lesson, we're going to cover JavaScript. So the basics of JavaScript before we use some in our portfolio website. So JavaScript is a programming language that can be executed in web browsers. It allows us to add interactivity, to our webpages and even create fully fledged web applications. But that's beyond the scope of this course. This is done by accessing the DOM or domain object model, which contains the tree structure of our HTML page with each element nested inside its parent elements. More on this in the next lesson. Javascript can be put in dot js files, or it can be put within our HTML files. In our diagram of web development technologies. We've got HTML, which is the structure. We've got CSS, which is the appearance. And we've got JavaScript, which is the behavior of our page. Javascript is very powerful, but for this course we will cover only the basics, the very basics, just to introduce you to what it can do on a webpage. Firstly, we need to cover some programming basics. So this course has been written on the assumption that you've done very little to no programming. So there's a couple of things that you need to know about programming that are going to help you understand the way that JavaScript works. So the first thing is functions. So a function is a piece of reusable code that lets us perform an action. And this can be called multiple times with different bits of data. For example. Here we have an add function that's been written in JavaScript. This takes two numbers and returns the sum of those two numbers. Now in JavaScript, this doesn't have to be numbers. This could also be used to give, to supply, two strings and concatenate them. But for the purposes of this, we will assume that it's numbers. The other bit we need to know is that variables are where we can store and save data. For example, we're going to write some JavaScript here. The first line there that let result one, that is a variable definition. So I'm going to say let the variable called result one equal to the result of the add function with 3 and 5 passed into it. And they are what's called parameters. So the 3, a becomes 3, b becomes 5, and the function returns 3 plus 5, which is 8. So result one will now have 8 in it. And we can then use that result one variable to do other things in our application, we could update the variable or we could just use it. And we've then got result 2 and 3 that are being called with different numbers. Now they'll return different results and we can use those results as well. So this is very, very basic. Two things that we use in programming all the time that JavaScript uses because it's a programming language. So if this doesn't make sense, don't worry, it's not essential at this stage to understand it, but I thought I'd cover it anyway. Okay, accessing the DOM. So this is what we're going to use JavaScript for in this course. So JavaScript has functions, and these functions are embedded within the web browser so we can just use them without having anything else, any kind of pre definition. So it has functions that let us access elements on our page, these are called on the document objects. And the document object contains our domain object model. So it has information about all of our, all the elements on our page. So here we've got some example code. So we've got let element. So I wanted to define a new variable with the let keyword, call it element, that's going to equal to the what's returned by this document dot query selector function. That function takes a single parameter, which is a string. So a bit of text, and that is our selector. So we talked about IDs a couple of lessons ago. This is going to get the content ID. So get the first element with the ID of content. And it will store it in the element variable. As long as that exists on the page and isn't null, we can then use some properties, we can change the properties, of that variable and style our selector. So we've then got the element dot style, which this is just the way that the objects work in JavaScript. So you don't need to really understand this. But what that's gonna do is it's going to change the background of the HTML element that the query selector returned. So bear with me, and that's going to change it to blue. So hopefully that makes a bit of sense. In the next lesson, we'll also cover libraries. So libraries allow you to... So here we've got vanilla JavaScript. And there are libraries such as jQuery that make it a bit easier to do what we're doing here. But that is something for you to look into after this course and something that I might do a future course on. Okay, In the next lesson, we'll be adding JavaScript to our website. 10. Adding our JavaScript: Okay, let's add the JavaScript. So I've got my project open in Visual Studio Code here. And we're going to do the same steps that we've done at the start of all these application lessons. We're going to open a terminal window, which I've already got open here. If you've forgotten how to do that then terminal, up there. I'm going to type http hyphen server. That's going to start our server. And we can then navigate to localhost, colon 8082 on Google Chrome. And that's going to bring us where we've got to so far with our website that contains CSS and HTML. Now what we're going to do is add a JavaScript file into our JS folder that we created in an earlier lesson. So I'm going to call that scripts dot js. So we've got main dot css. I'm going to call it scripts dot js, which is going to save all scripts in. We then need to reference that in the HTML. So what I'm going to do is include it using a script tag and we'll see how that works in a minute. So we want to do this at the bottom of our HTML because we need to make sure that the DOM has loaded before the JavaScript gets called. So I'll demonstrate this. What we'll do is we'll put it, well, we'll put it in first, then I'll add our JavaScript, and then I'll show you what happens if you move it to the top. So what we need to do is to include that in our body, as I've just said. So we're going to add a script tag below the footer. Remember if you've got Emmet installed, you can just type script and enter or tab, and it will select one of these. I'm going to do script src and that's going to put me inside that src and we then want to direct that to our JavaScript file. So js slash script.js and we'll then add our JavaScript to here. So I'm going to open this on the left-hand side. Control, alt and right. That should open it so we can see both at the same time. Okay, so what I want to do is to, first, I want to find, well first I want to set the year, that's what we're going to do with this. I'm going to create a date object. We're going to get the year out of it. We're going to set that. So we don't need to update the year of our portfolio year on year. So instead of having this 2021 here, we're going to add a span, which if you remember, is an inline element. So it's not going to be on a new line. It's going to be on the same line as this. Give it an ID called current hyphen year. And make sure we got our closing tags there. And we're going to put the year inside this span. So if we go on our scripts, JavaScript, first thing we want to do is to get that span element from our DOM. So we're going to do, let year span equals document dot query selector. And we want the current year. So hash current year, which is the ID I gave it here. As you can see. Make sure you add a semi-colon at the end of that. We're now going to get a, we're going to create a new date object in JavaScript. So it's going to be constant, it's not going to change. Current date equals new date. So you don't need to worry about the, kind of, syntax of this. This will just give you a date and it'll store it in the current date object. And that's going to be right now to the millisecond. We don't want to get the year out of that. So new variable, const current year equals current date dot. And now we've got all these functions or methods that we can call on that date object. So I want to call get full year, which is going to give us the full year, which in this case is 2021. The last thing to do is to use our year span object and set the inner HTML, which is the bit in the middle here, to the current year. And if we save that and we refresh our page, won't see any changes because we're still setting the year to 2021. So what we'll do just to give you a quick introduction to debugging is we're going to press F12 to open the inspector, we'll click on Console. And what we'll do is we will use a console method to log out some information to the console so we can see what's happening. So I'm going to log out the year span. Console dot log year span. I'm going to console dot log the current year. Just show you what's happening behind the scenes. So this is very useful for debugging. We can use the debugger within here, but that's something for a future course. If I refresh the page, we can see here that we've got on scripts, line 2. We've got the console dot log year span. And on scripts line 5, we've got 2021. So that is being set correctly there. So I'll quickly show you what happens if you don't have the script tag at the bottom of our footer to make sure the DOM is loaded. So if we put it in the head, save it, go back on Chrome, refresh, we find that it breaks and if we go and our console, so F12, we've got an error, a type error, where we've got a null, a null variable. Because this year span, this document dot query selector, that is not returning anything because it hasn't yet. The browser hasn't loaded the IDs. So there are ways around this, but for the purposes of this course, we'll just put it at the bottom. So make sure your scripts always go at the bottom of your body. And that's it. That is adding a year or our bit of JavaScript to our website. In the next lesson, we're going to go over adding some extras. So we're going to add some icons. We're going to add a favicon, and we're going to add some CSS animations. I'll see you then. 11. Finishing touches: So now we've got our basic website up and running using HTML, CSS, and JavaScript. We'll now add some extras for our social media and CV icons, a favicon and a couple of CSS animations. So that's icons, favicon, CSS animations. So first, I'll talk a bit about each, each of these, before we go on and do that. So for the icons, we're going to use Font Awesome, which lets us add icons as a font. This means we don't need extra images and our icons can be coloured and scaled really easily. For the favicon or favicons in general, favicon is short for favorite icon and is the image that appears next to the HTML title on a tab or when you bookmark a page. For example, this little icon that I'm going to set, or I have a my own portfolio website here. And they also appear on bookmarks, as I've just said. So we're going to add our own one of those. And that would just be our profile image scaled down. Okay, CSS animations. So CSS is good for simple animations. Animations used to be done using JavaScript, which you can still do. But all animations had to be done using it. And now we can use CSS to do some simple ones, which is straightforward and widely supported in most browsers. Simple animations are done using keyframes, which specify the styling that we want at certain stages of our animation. In this example, we want to fade in our element, meaning that it's transparent at the start of the animation and opaque at the end. So there we have a keyframes, and this goes in our CSS file, I've called it fade in. At 0% of the animation it has opacity 0, so it's transparent, and at 100, so the end of it, it's opacity is one, and that will fade it in. We then use the animation keyword or property and specify our keyframe animation, so fade in. The speed curve, and there are a few options for this, but I'm not going to go into those now, and the duration to two seconds. So we're going to add two animations to our website. We're going to fade in the page when it's loaded. And we'll make the profile image expand on hover. Okay, the first thing we're going to do is to add the icons. So this involves using a, a library called Font Awesome, which we can use to get our icons as a font and display them the page. So we don't, we're not relying on any images, we're just using a font which is loaded in and works on any browser. So if you do a quick Google search for Font Awesome, font awesome dot com, this is what we're going to use. So you've got all these icons and we can search icons for Facebook. And that'll give us the Facebook icons. So we can use these for our social media. And the CV. Now to get this to work in our website, we need to include Font Awesome as a CSS file, which what it gives you, in our head. So you can install this, there are multiple ways of installing this. And Font Awesome and some information on how to do that. We're going to use a CDN, which I'll get it from another website. So we're going to type Font Awesome. And a CDN is a content delivery network. So it just allows you to include any sort of libraries within your files without you having to store the files on your own server. There stored somewhere else and they're just loaded in. Which for the purposes of this course is perfectly fine to do. So, we want a link that's done automatically with Emmet, a style sheet and in the href I'm just going to paste the link to the Font Awesome all dot min that I've just copied from here using the copy URL. We'll now save that. Now we need to find the icons that we are after. So I first want a icon for my CV. So I'm going to type in file, would be a good one. Okay, here we go. So we've got lots of options here. I'm going to choose this file alt one, so I'm going to click on that. And then what we're doing is we're copying and pasting this HTML tag here. This I tag. So click that to copy it, back to Visual Studio Code. And we're going to paste that instead of this CV text here. Save. And then we'll go back onto our website, refresh. And there we go, we've got this file tag and we'll add some CSS for those in a minute. So the next ones I want our Instagram and Twitter, so we'll just use the Instagram one. Copy that. Back to code, paste it and we want one for Twitter. So depending on the social medias that you use, or that you've got, you can use, you can find icons for loads of different things on Font Awesome. So don't feel you have to have Instagram and Twitter. There we go. Okay, so we'll just add a CSS for those. So we want to add a rule in our main dot css for, those are links aren't they, so we've got this link class here. So I'm going to add font size. I'm going to make those 30 pixels. And we'll also add a rule for anchor tags, which we didn't do before. And we're going to make those my primary colour, which is this the colour for the header background. And refresh. There we go. And we've now got these here. You could also make them black or any colour that you want. I'm going to actually going have mine black. There we go. And if you add in your hrefs to those, you'll be able to open them in different, different. Open, have them as links that work properly. Okay, the next thing to do was to add the favicon image. This is very easy, just one line of code. We're going to, as I said, use the profile image. You can use another image. It's up to you, it's your website, so we're going to do link. And this time we want a favicon. So we're going to do colon favicon, using Emmet abbreviation, press Enter. We want to use image slash simon profile for this one, and it's not an X icon it's an image png. Yours might be a JPEG or another image format. Just make sure these two match here, okay, and save. And you can now see in this top corner that the favicon has become the profile picture. Okay, the last thing we're going to do is to add the CSS animations. So on our main CSS page, we're going to first add the keyframes. So we want keyframes. And we'll do our fade in first, so fade in, open out those curly braces, we want 0 percent, curly braces, opacity 0, and the format is very important and so make sure yours matches mine exactly. Opacity 1. So opacity is a CSS property. So you can use it anywhere, but we're going to use it within this animation. And then we will add to our body using the animation property, fade in, ease, and we want it for 2 seconds. So lots of options here for this middle value. I'm going to use ease for now. So we will refresh. See you've got a fade. That fades in there. Okay, now the enlarging the profile one, which is just an example you can play about with these and get ones that you prefer. So keyframes scale. And this is going to have just a to property in it and transform. And I want to scale it by 1.2. And I've not spelt keyframes correctly. There we go. Now on our, I'm going to put this on profile. So we need to a pseudo tag here, profile hover. When the user hovers over the profile, we'll do an animation. Scale. 1 second, ease. Let's put that the right way round, it will work the other way round, but just for consistency. So if we refresh and we hover over our image, we've got this scaling up. And there we go. Those are our extras. One final thing I'm going to tell you about is CSS variables. Because these are very useful in terms of keeping your code maintainable. Very important in software development. So we're going to add a root rule. And in the root rule, we're going to add a primary colour. So when you do it, you have to prefix this with the two hyphens. We're going to add this blue here that I used. And then we've also got the secondary that we used for the, that we used for the footer. So I'll copy that one out. We'll create a new property called secondary. Add that in there, then to use those. We do var, open up brackets and then reference our variable. Primary. And down here we want secondary. And if we refresh, there should be no changes. There we go. In the next lesson, I'm going to talk you through how to put your website live on the internet for free using GitHub Pages. 12. Getting our website online: Okay, publishing our website. So first thing to do is navigate to github dot com. Now here is where you would sign up for an account, which is very easy to do. I'm going to sign into an account that I created for purpose of this course. What I'm going to do is to create a repository. So we'll go on repositories. We go on new and we'll call it portfolio. Leave it as public, and we don't need to initialize it with anything at the moment. Create repository. So if you see this screen here, what we're going to do is we're going upload existing files. And then we will go on our website folder, we will drag and drop all these files into our repository. Wait for that to upload. And here is where we do a commit. So add files via upload is fine. Commit changes and then we wait for it to process those files. So you don't really need to worry about the way that GitHub works. For the purposes of this project, you can just continue doing this to your website and uploading files like that. We'll then go on settings and we will scroll down to GitHub pages. We want to choose the main branch at the root and save. Now if we scroll down and we click on link here, this may take a couple of minutes, but I'm going to open it in a new tab. And we can see that our portfolio is live this URL. If you have a custom domain, you can also add that into here. And in a future course, I might talk about how to, how to do that. But there we have it. A portfolio website that is live on the Internet and you can send that link to your friends, you can post that on your social media platforms. And there you have a website to market yourself. 13. Thank you and next steps: And that's it, well done for reaching the end of the course. Hopefully it's been useful and you've enjoyed it. There's so much more to web development. And in the next slide, I'll be mentioning some things that you could do to our portfolio website to enhance your skills. But there are so many more resources out there that you can use to further your web development journey. Don't forget to post a link to your site below, so I can have a look. And if you've got any questions then feel free to ask. Okay, so next steps. As I just said, this is the first step on your journey to becoming a web developer. There are plenty more courses on SkillShare and videos on YouTube that you can now go and watch. And they should hopefully make more sense in terms of the fundamentals of what you'll learn. I'll also be creating some more courses so you can continue your journey with me. Okay, some challenges for you to try and implement on our portfolio website, on your portfolio website. Okay, replace the name with a logo. Add a background image, and some more social media links. I'm sure you've got more social medias than just Instagram and Twitter that we used. And some projects below social media links. So creating HTML elements and adding images, maybe some content there. And just really building on the knowledge that you've learnt during this course. So thank you again for sticking with me and I hope to see you in the future soon.