Learn the basics of HTML, CSS, and JavaScript with a background video project | Dr. Sahand Ghavidel | Skillshare

Playback Speed


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

Learn the basics of HTML, CSS, and JavaScript with a background video project

teacher avatar Dr. Sahand Ghavidel, PhD

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

6 Lessons (34m)
    • 1. What you're going to get from this course?

      1:37
    • 2. Installing VScode and adding extensions

      3:54
    • 3. Start the project (HTML)

      4:54
    • 4. CSS styling, Bootstrap and Font Awesome

      10:24
    • 5. Adding functionality using Javascript

      6:21
    • 6. Adding a Preloader

      7:02
  • --
  • 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.

837

Students

--

Projects

About This Class

Welcome to the course for learning the basics of HTML, CSS, and JavaScript (JS) by creating a Background video project, my name is Sahand and I'm a web developer with over 15 years of programming experience. I created this basic course to share my experience with you. This course is made to help you get familiar with the basics of the HTML, CSS, and JavaScript.

By the end of this course, you'll be able to write the basic HTML, CSS, and JavaScript codes, and build a simple but practical website which has a background video. This course starts with a direct and simple guide on how to install the VScode and its essential extensions. Then we write the HTML part. Once you finish the basic HTML, you'll then begin to work on the CSS and learn how to make a simple Bootstrap button. This project will teach you many skills like how to use Bootstraps and Font Awesome, how to add and find a free preloader, how to find free background videos for your project and all the essential JavaScript methods like add and remove classes which are being used in most websites. It is completely fine if you have no prior knowledge of HTML, CSS, and JavaScript . A summary of the basics of HTML, CSS, and JavaScript is provided in the course. This is a short course that will teach you about HTML, CSS, and JavaScript while building a simple but practical website.

If you are excited as I am to learn about the basics of HTML, CSS, and JavaScript and build an amazing website, then let’s get started.

Meet Your Teacher

Sahand Ghavidel holds degrees in Mathematics, Electrical, and Computer Science, and earned a doctoral degree from Faculty of Engineering and IT, University of Technology Sydney.

Sahand has researched for more than 10 years about artificial algorithms and  optimization. He has won several awards for his outstanding research and has published more than 40 ISI journals and attended to many international conferences.

The number of people using and citing Sahand's publications is significantly high which is more than 1600 citations, according to google scholar (April, 2021). He was also awarded the outstanding reviewer in the international journal called "International Journal of Electrical Power & Energy Systems" with CiteScore of 5.79 in recognition of his contributions ... 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. What you're going to get from this course?: Welcome to the course for learning the basics of HTML, CSS, and JavaScript by creating a background video projects. My name is Hannah and I'm a web developer with over 15 years of programming experience. I created these basic forms to share my experience with you. This course is made to help you get familiar with the basics of HTML, CSS, and JavaScript. By the end of this course, you'll be able to write the basic HTML, CSS, and JavaScript code and build a simple but practical website which has a background video. This course start with the direct and simple guy and how to install the VS Code and it's essential extension. Then we write the HTML part. Once you finish the basic HTML, will then begin to work on the CSS and learn how to make a simple Bootstrap button. This project will teach you many skills like how to use Bootstrap and found us. And all the essential JavaScript methods like add and remove classes, which are being used in most stepsize. It is completely fine if you have no prior knowledge of HTML, CSS, and JavaScript. The summary of the basics of HTML, CSS and JavaScript is provided in the course. This is a short course that will teach you about HTML, CSS, and JavaScript while building a simple but practical website. If you're excited as I am to learn about the basics of HTML, CSS, and JavaScript, and build an amazing website. Then let's get started. 2. Installing VScode and adding extensions: Okay, In this section, we're going to install a text editor. To text editor I highly recommend is Visual Studio Code or VS Code for short. This code is currently very popular among web developers. It has a lot of useful and great extensions that make the coding easier and faster. However, if you prefer other text editors, Like Atom or Sublime Text, it's totally fine and up to you. But I'm going to use VS Code and I highly recommend it to everyone. Okay, let's install this code. Well, first we searched VS Code and we click on quoted Visual Studio.com, which is the official website, our VS Code. Then we choose the installer based on our own computer, which can be Windows, macOS, or Linux. In order to have the best performance, I highly recommend to choose the stable version which is much faster and reliable. My computer is using Windows 10 and I'm going to install the Windows installer. The Mac or Linux installation process is very easy as well. But as I mentioned before, if you have any problem in installation process, please let me know and I will guide you through it. So we click to download the installer. And after the download is finished, we click to install the VSCode software and we accept the license agreement. Click Next again, make sure to select add to path, and then click on Next. Finally, press on Install button and wait for the program to be installed. The installation process usually takes a few seconds to be finished. Okay, we can now launch the VS code and use it for our coding. Before using VS Code, I would like to introduce you some extensions that makes the coding much easier and faster. And I'm using them always in my project coding. In order to add extensions, you need to firstly opened the extensions from view menu. The first extensions we're going to install is prettier. Prettier helps us automatically format our code. So we click on Install button to install the prettier extension. Then we need to go in VS Code setting, which is in File menu preference. And then we search for format and save and select a format and save. This setting allows us to format our code as soon as we save them. Okay, we go back to the extensions menu again and installed the next extension. The next useful extension is auto rename tag. Author renamed tech extension changes the closing tag as soon as we changed the opening tag. Okay, similar to what we have done on previous installation, click here to install extension. The next one is bracket pear color iser. The bracket per polarizer makes our code firstly more beautiful and also much easier to read. It colorizes the matching brackets, which would be useful when we have many brackets, especially in JavaScript coding files. Okay, that was all the extensions we need for now. 3. Start the project (HTML): All right, Let's start creating our project. We open VS Code. We close the welcome tab. In the View menu. We click on explorer and be open a folder. We go to the desktop and we create a new folder. Because the folder background video project. We select the folder. We close the welcome tab again. And hearing the left, we create the index.html. So we right-click select New File, and we call the file index dot html. In order to have the boilerplate, we write an exclamation mark. And we choose the first auto suggestion. And here we just change the title to our name. For example, hands I needed for my name. Inside the body tag. We make a header tag. And inside the header we add H1 tag. And we write our name. We saved the file using Control S. We go to desktop. And in the folder that we have created, we click on the index.html. As you can see, we got our name here. Let's go back to the VSCode. Just above the H1 tag. We add the video tag. In order to have a background video, I'm going to use a website called pixels to download the free videos. So let's go to the browser and search pixels. We searched for pixels.com, and we click on the videos. We search for the video. For example, we searched time-lapse. We choose a video. For example, I choose this one. And click on here. You click on free downloads. We save the file and we drag the video inside VS code and put it here. Let's rename the file and colored background video. Let's go to index.html. And inside the video tag, we add SRC. And we write down the name of the video, which is background video, that mp4. We save the file, we check the browser. We close this website. We refresh our page. As you can see now the video is here. Let's go back to the VSCode. We add more attributes. For example, auto play and loop. We save the file. We check the browser again. We refresh the page. And as you can see, the video is playing and it's in the loop. Now, let's go back to the abuse go and add some styling. 4. CSS styling, Bootstrap and Font Awesome: So we create a file here. We call it styles.css. We add some styling to the body. For example, margin 0, padding 0. And found family Sans Serif. We save the file, we go to index.html. And just below the title, we add a link tag and be added styles.css. Here, we saved the file, we check the browser. As you can see before refreshing the page. We have a margin here. And after the refreshing, we don't have margin or padding. Let's add some styling to the video. Let's go back to the VSCO. We had a class here. The colored background video. We save the file, go to sounds that CSS. And just below the body, we add the background video class. We open a set of curly braces. And we set the position to absolute. And then we changed the top to 0 and left two zeros. Well, we change the width to be 100%, height 100 percent. We save the file, we check the browser. Refresh the page. As you can see, the video is much smaller now, we just need to make the video cover left and right as well. So we go back to the VSCO. The right object fit to be cover. We saved the file and check the browser again. As you can see, the video is covered all the browser. But the problem is the H1 tag is behind the video. So we have to change the Z index after video. Let's go back to the VSCO. He had a Z index here and make it minus one. The default C index is 0. So by changing the z index two minus1. The video should be behind the H1 tag, which has the 0 index 0. We saved the file, we check the browser. Now the H1 tag is under video. Let's make the video a little bit dimmer. Let's go back to the VSCO. We had a filter and we change the brightness to be 30 percent. We check the browser again. As you can see, the video is dimmer now. But the problem is we cannot read the H1 tag. So let's go back to the VS Code. We add some styling to H1 tag. So just below the body, we have H1. We add color white. You check the browser. As you can see now we have a white H1 tag. I want to show you a trek to how to change the font easily. We open the web developer tool using contour shifts. See, we click on the inspector and click on the tag. Here we click on fonts. We change the fine the way we live here. For example, we change the spacing here. And we change the size. Here. We click on changes. And we copy everything from here. We go back to the VS code and paste it inside the H1. We saved the file, we check the browser. As we refresh the browser. As you can see, the font has been modified. Let's print the tag in the middle of the page. Let's go back to the business school. We add the header tag here. We write min-height 100 vh, display grid and place items center. We saved the file, we check the browser. We refresh the page. As you can see now the H1 tag is in the middle of the page. We close the web developer tools. Now we need to add a button here to pause and play the background video. So let's go back to the VS Code. We go to index.html and we add a button tag here. In order to have a start button, we can use Bootstrap in our code. Let's search Bootstrap in the browser. We click on getbootstrap.com. Here we click on Get Started. And We copy this code, which is the CDN link of Bootstrap. Let's copy this. Let's go back to the VS code and paste it above the style.css. Now we can use the bootstrap in our code. Let's add a class here and derive btn, which is a button class from bootstrap and btn secondary. To have a great pattern. Let's save the file and check the browser. We refresh the page. As you can see, we have a button here. We just need to add an icon showing the Play button. Let's search for Font Awesome. We click on Icons. And here the search play. In order to have this icon, we just click on it. And we copy this code and paste it inside the pattern. As you can see, it's just the I tag with a class. If a and f a play. In order to have these classes, we need to import the city and of the Font. Awesome. So we go back to the browser and we searched for CDN ab.js. We click on the first flip side, and we search for Font. Awesome. We click on the first link. And we click here to copy the link. We go back to the view SCO. And just below the bootstrap link, we paste that link, is save the file, and we check the browser. We refresh the page. As you can see now we have the play icon. If you want to change this icon to be a path icon, you just need to change the class. Let's test it in the VSCO. Change the play to pass. We save the file, and we go back to the browser. We refresh the page. Now we have the Paths icon. Now it's time to add JavaScript to make us have the ability to pause and play the video and change this class from past to play and vice versa. 5. Adding functionality using Javascript: Let's create a file here and recolored index.js. We go to index.html. Just below the header tag. We add a script. We click on the second auto suggestion. And we write here index.js. We saved the file. Let's go to index such as and we had a cancer. We call the counts PTEN. The calls document. That querySelector will open a set of parentheses and inside a double quote, derived dot BTN. This is actually the class that we have in the button. If you check the index.html in the button tag, we have a class BTN. By using the querySelector. Here. We can choose the class BTN. Let's add another counts for the video derived document dot querySelector. And we tap to this class. Here, background video, we copy this. We go to index such as open a set of parentheses. And inside a double-quotes. We add a dot and paste the background video class. Let's use the method add event listener for this PTEN. Just below here, derived btn dot add event listener. We open a set of parentheses. We just say if someone click on the button, trigger dysfunction, we add a function here. If we go back to index.html, in the button tag, we have classes btn and btn secondary. We want to add a class name paths if someone clicks on the button. So in index.js derived if the btn class list that contains, we open a set of parenthesis and we derived pass. This means if the button has a class name, pass to this one. We open a set of curly braces and derived BTN. That classless dot remove the past class. So if the btn has a class of past, just remove it and play the video. Video that play. Otherwise. If there is no pass class derived btn dot class list, dot add. And we add the past class. Will also pause the video. He saved the file. We check the browser. If we refresh the page and we press on the button. As you can see, the video in the background has been passed. If we click on it again, the video is going to play. The only things we need to do is to change the icon from past to play icon. Let's go back to the VSCO. We add another const here. We call it Font Awesome document, dot query selector. And we choose this class here. So we write here dot FA. And just below this, we write F, a third-class list. Dot add a pass. We also need to remove FA play. So we copy this. We change this to remove. And we change this path to play. We just need to do the reverse in the else section. So we copy this, paste it here. And we change this f to remove. And this one to add. We saved the file, reject the browser. If we refresh the page. Now if we click on the button, we see that we have the play icon. If you click again, we have the paths are. The other things I would like to do is to add a freeloader in our website. 6. Adding a Preloader: Let's go back to the VSCode in index.html. Just above the header tag, we add a div with the class of preloaded. Inside the div. We are the image. We just need to download a pre-loaded image. We go to the browser and the search icons 8 preload. We click icons, a.com slash p loaders. Here you can find many free, freeloaders. For example, this one or this flower. The one I would like to use is this fidget spinner. We click on this. We change the background to be transparent. We change the speed. And also the size. I change it to be a 100 pixels. We click on Generate and download the picture. You save the file. And we drag it to be a skirt. We rename it. And we call it pre loader. We go back to the index.html inside this day. Via the image tag. In the source attribute, we add freeloader that GIF, and the Earth would be P loader. We save the file, we check the browser. We refresh the page. As you can see, the three loader is under top of all the website. Let's add some styling to the pre louder. Let's go back to the VSCO. In styles.css. Just below the header derived data loader. We opened a set of curly braces. And we write our styles. First, we set the position to be fixed. And we set the top left, right and the bottom to be 0. So we write top 0, left 0, right 0. And finally bottom 0. You change the background to be white. Display to be grid. Justify content center. And also align items. Center. We change the Z index to be one. So first we want the spinner to be in front of the website. And after the website is loaded completely, we want to change the Z index to be minus 2, which brings the spinner behind the website. Also, we need to add a transition. For example, 0.32. And linear. We saved the file, we check the browser. We refresh the page. As you can see as a default, the preload is showing and we just need to add the JavaScript code to bring this freeloader behind the website after the website is loaded completely. So let's go back to the VS Code. We go to index.js and just below this counts, we add another const. We call it freeloader equals document, that querySelector. And we select the preload or class. So we write that freeloader. Now just at the pattern deriving though, dot add event listener, we set it to be load. It means when the window is completely loaded, then trigger this function. We write a function. We arrived pretty loader. Dot style dot z in the x equals minus 2. We saved the file. We check the browser again. We refresh the page. As you can see, if we refresh the page before the website is loaded, we see a spinner. In order to see it better, we go to the web developer tools using Control Shift C. We go to the network, and we change this to GPRS. We refresh the page. Now you can see the spinner better because we are decreasing the network speed. That was it for our project. I hope you enjoy it and learn a new thing. Please let me know your opinion about the course and wait for the updates of the course. I'm going to add more project later to the course. Thanks again and see you next time.