Learn HTML, CSS and JavaScript creating a Counter | Dr. Sahand Ghavidel | Skillshare

Playback Speed


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

Learn HTML, CSS and JavaScript creating a Counter

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

8 Lessons (29m)
    • 1. Intro

      1:36
    • 2. HTML part

      3:53
    • 3. CSS

      3:20
    • 4. Bootstrap

      2:55
    • 5. Font Awesome

      3:51
    • 6. Javascript

      5:55
    • 7. AddEventListiner method

      4:34
    • 8. Adding colors to the number

      2:31
  • --
  • 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.

730

Students

--

Projects

About This Class

Welcome to the course where you will learn the fundamentals of HTML, CSS, and JavaScript by utilizing the course's build a counter project feature. My name is Sahand, and I have over 15 years of programming experience.


I created this introductory course to share my experience with you.
This course is designed to help you become more familiar with the fundamental functions of HTML, CSS, and JavaScript.

You will be able to write basic HTML, CSS, and JavaScript codes by the end of this course, as well as build a simple but functional website that allows users to count up and down.


How to Get Started with VScode: This course begins with a simple, step-by-step walkthrough of how to set up and instal VScode and its required extensions.


The HTML portion will be written next.


After you've completed the basic HTML, you'll move on to the CSS and learning how to create a simple Bootstrap button.


This project will teach you many web design and development skills, such as how to use Bootstrap and Font Awesome, as well as essential JavaScript functions such as the addeventlistener method and style, which are commonly used on websites.


It is perfectly fine if you have no prior knowledge of HTML, CSS, or JavaScript before beginning this training.


This course provides a basic overview of HTML, CSS, and JavaScript, as well as in-depth coverage of these three fundamentals.


This course is brief but informative in that it will teach you HTML, CSS, and JavaScript while you build a simple but functional website.

Let's get started if you're as excited as I am to learn the fundamentals of HTML, CSS, and JavaScript and then build an amazing website.

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. Intro: Welcome to the course for learning the basics of HTML, CSS, and JavaScript, like creating a counter Project. My name is Hannah 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 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 let the users count up and down. This course is start with the direct and simple guide on how to install the VS Code and it's essential extensions. Then we write the HTML part. Once you finish the basic HTML, you will then begin to work on the CSS and learn how to make a simple bootstrap Batson, this project will teach you many skills like how to use Bootstrap and found awesome, as well as some essential JavaScript methods like add event listener, and a style which are being used in most websites. It is completely fine if you have no prior knowledge of HTML. Css and JavaScript is summary of basic HTML. Css and JavaScript is provided in this 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. HTML part: All right, Let's start creating our project. First, we open the VS Code. We close the welcome tab. In the View menu. We click on explorer. And here we open a folder. You choose the desktop. And we create new folder, the name the folder counter project. And the selected folder. We close the welcome tab again. And here in the left, we create a new file. We right-click select New File and become the file index.html. Here we can use an exclamation mark to have HTML boilerplate. So we'll write an exclamation mark and we click on the first atom suggestion. We changed the title tags to counter project. The title tag defines the title of the document. The title must be takes only and it is shown in the browser title bar or in the Pages tab. The title tag is mandatory in HTML documents. The context of the page title is very important for search engine optimization or SEO for short, the page title is used by search engine algorithms to decide the order when listing pages in search results. In the body tag, we create a main tag. And inside the main tag, we add a div tag. Inside the div, we add an H1 tag. And we write counter project. We save the file using Control S. And in order to check it in the browser, we just need to go to the desktop. We opened the folder that we have created, and we click on index.html. As you can see, now we have injected content project tag in the browser. Let's go back to the VS Code to continue our coding. Let's add a span here. We put the value 0. We are going to change this 0 using JavaScript later. After this span, we add a div. And we put all the buttons including increase, decrease and reset buttons inside this stuff. We had our first button. We just tried decrease. We copy these two times using Alt Shift down arrow. We change this to reset. And this phone to increase. We save the file with check the browser. We refresh the page. As you can see, we have the H1 and the three buttons. Okay, that was it for the HTML part. In the next section, we're going to start styling our website. So see you in the next section. 3. CSS: All right, In the last section, we have created the HTML parts. In this section we're going to start styling our project. Let's go back to the view scope. When a browser reads a style sheet, it will format the HTML documents according to the information in the style sheet. Two or three ways of inserting a stylesheet, external CSS, internal CSS, and inline CSS. With an external style sheet, you can change the look of an entire website by changing just one file. Let's create our style sheet. Here in the left, we right-click and click on New File. Recall the file styles.css. Each HTML page must include a reference to the external style sheet file inside a link element inside the head section. So let's go back to the index.html. In the head tag, just below the title, we use the link tag. And in HFrEF we write a styles.css. Because the two files are at the same directory, we just need to add the name of the salt that CSS. So we save the file, you just add a class here called value. We save the file again and we go to styles.css. First result, the body. Just five body open a set of curly braces. And inside the set of curly braces, we add margin 0, padding 0. We added the margin 0 and depending 0 to remove the default margin and padding, we change the font family to be sent serif. And we add the text align center. To bring everything to the center of the page. We save the file and check the browser. We refresh the page. As you can see now, everything is in the middle of the page. Let's go back to the VS Code. Let's change the font size of the H1. So we write h one, open a set of curly braces, the right font size for REM. And also we changed the value, which was the class we defined here. We open a set of curly braces and we change the font size to be six area. We save the file, recheck the browser, refresh the page. As you can see now we have bigger one and the number. In the next section, we're going to start the patents. We're going to use Bootstrap to easily styled the patents. So see you in the next section. 4. Bootstrap: All right, In the last section, we have salty one and the number. In this section, we are going to solve the buttons. We're going to use something called Bootstrap to style the buttons easily. Let's search Bootstrap. We click on getbootstrap.com. You scroll down a little bit and we click on Get started. If you scroll down again, here you can see the cell sheet link, which we can add to the head section. So we can use the bootstrap externally. So we copy this. We go back to the VS Code. We go to index.html. And above the style.css, we paste the link. In order to sell our buttons, we just need to add the Bootstrap classes. So here in the pattern section, we had a class. First, we call it btn and btn danger. We save the file, we check the browser. We close this tab. We refresh this page. As you can see now we have a beautiful pattern with red color. We want this reset button to be gray. So we add a btn secondary class. So let's go back to the VS Code. Here in the reset button. The other class, we call it btn. Btn secondary. We saved the file, we check the browser. As we refresh the page. You can see now we have a beautiful button here as well. Let's make this button green by adding PT and success class. Let's go back to the VS Code here in the increase, which are right round. So we will add this class here. We call it btn. Btn success. We save the file and we check the browser. We refresh the page. As you can see now we have three buttons styled by Bootstrap. The things I would like to do, instead of having decrease or increase forward, I would like to substitute them with plus and minus sign. We're going to add the plus and the minus symbol using Font. Awesome. So in the next section, we're going to learn how to use the Font. Awesome. So see you in the next section. 5. Font Awesome: Alright, in the last section, we have added this styles to the buttons using Bootstrap. In this section, we're going to learn how to use Font Awesome and import the symbols like plus and minus symbols to our project. Firstly, search Font Awesome. And we click here under the icons. If you scroll down a little bit. Now here we can search for any icons we want. For example, if you search plus, as you can see, there are plenty of plus signs here. For example, Plus, Plus circle, plus square or Google Plus officials. We just need to click on the icon we want, for example, this class. We scroll down a little bit and we copy this code. The code is only an I tag with classes FA and FA plus. We copy the code. Go back to the VS Code, and we change this increase. We deleted the press Enter to open the tag. And we paste here the Font Awesome icon in order to find us on to work properly. Similar to the bootstrap that we brought in, the Bootstrap CDN. You just need to bring the Font Awesome CDN as well. So let's go back to the browser. If you want to get the CD and from Font Awesome.com. First you need to sign up in the website, but we can find the CDN somewhere else as well. So we search here, CDN JS. If you scroll down a little bit, we click on city and js.com. And we can search for any CDNs we want. We search here, Font Awesome. We click here and Font Awesome. We scroll down a little bit and we click here to copy the link tag. We go back to the VSCode. Just under the Bootstrap CDN V paste the Font Awesome CDR is saved, the file is check the browser. We close this tab and we go to our website. We refresh the page. As you can see now we have the plus sign. Instead of having the word increase. We can do this similarly to decrease one as well. So let's go to the Font Awesome website again. We go back and here we search for the minus sign. We click undermined as we scroll down a little bit and we copy the code. Because the VS Code and here it deleted decrease. And we paste the Font Awesome code. We save the file, we check the browser. We go to our website and refresh the page. Now as you can see now we have the minus sign as well. Okay, That was it for AI styling our website. In the next section, we're going to start using JavaScript in our website. 6. Javascript: All right, In the last section, we have finished using Font Awesome in our project. In this section, we're going to start using JavaScript in our project. Let's go back to the VS code. And let's create a JavaScript file. Here we right-click. We click on new file because the file index.js. Let's go to index.html. Right at the bottom of the body tag. Just after main tag. We add a script tag. We click on the second auto suggestion, and in the source attribute we write index.js. This script tag is used to embed a JavaScript file descriptor element either contains a scraping ice. Let's save the file and we go to index.js. First, we need to create a variable for a number. We use lead and derived noun and firstly equal to 0. The reason we are using LED instead of counts is because the non-variable is going to change by tapping on the increase and decrease patents. The next thing we need to do, if you check the index.html, we need to tap to the element value inside index, such as using querySelector. The querySelector method returns the first element that matches specify CSS selectors. Please note that the querySelector only returns the first element that matches the specified selectors. To return all the matches, we can use querySelector our method instead. Let's go to index.js and we make a cut here. We call the cans value and we write documents. Third, querySelector. We open a set of parentheses and inside a double code, we write that value. This value is coming from here, this class. We also need to make another cons for all the patterns. So we write counts. We call this counts PET ENS, which stands for all the buttons. Equal document. Does querySelector. We open a set of parentheses. And inside a double quote again, we write that BT ends in this fabric going to tap to all the patents because all the buttons has the class BTN. If we go back to the index.js are here, we have a typo. We change it to equal. We save the file. And if we console log the TNS, it's saved the file. We check the browser, we refresh the page, and we open the web developer tools using Control Shift C and B go to console. As you can see, the only return a button, which is the first button. In order to have all the patents here, we just need to, instead of using querySelector, we use querySelector off. So let's go back to the VS Code. We change this query selector to call selector. We saved the file, we check the browser, we refresh the page. As you can see now we have a node list with all the patents. Actually, the querySelector all method returns all the elements in the document that matches specify CSS selectors, and return it as aesthetic node list object. The notes list object represents a collection of nodes and the nodes can be accessed by index numbers, and the index starts with 0. We can look through the buttons in this node list using forEach method. So let's go back to the VSCO. You delete this console log and we write BT ends. That. For each, we opened a set of parenthesis. And we write a arrow function here. So we open a set of parentheses, again, write a fat arrow, and we open a set of curly braces. Inside this set of parenthesis, we can have access to all the PTS. We write here btn. And if we console log the PTEN, we saved the file, we check the browser and refresh the page. As you can see now we have all the patterns separately. We just need to add the add event listener method to check if the user clicks on the patents. The event listener method attaches an event handler to the document. Let's go back to the VS Code to be delete this console log. And we add the add event listener method to all the patterns. We're going to do this in the next section. So see you in the next section. 7. AddEventListiner method: All right, In the last section, you have looked through the bit ends, which are all the patterns. In this section, we're going to add an event listener method to all the buttons. So we write btn. The add event listener will open a set of parentheses is inside the double quotes we right click. Which means if someone clicks on the button, it's going to trigger a function. So we add a function here. We open a set of parenthesis and we write a fat arrow, and we open a set of curly braces, and we write our function here. We can get the events here by writing event. For example, if you log event that current target, we fix this one and add the t at the end. If you save the file, we check the browser and refresh the page. If we click on any button, for example, this one. As you can see, we got the corresponding pattern here, which is btn-success. If we go back to the VS code, if we add a classless here, we seem to fall. We check the browser, refresh the page, and we click on the plus button again. As you can see now we have an array with btn and btn-success element. We go back to the VSCO. We copy this and we delete the console log. We create a cancer. Because the cancer styles equals and we paste the event. Now we add a if statement here, derived. If we open a set of parenthesis, we write styles that contains. The contains method checks whether its string contains a sequence of characters and returns true if the characters exist. So we write PT and danger. We open a set of curly braces here, and we write num minus minus. Which means if someone clicks on PT in danger pattern, this non-variable will be decrease. We add an else. If here. We open a set of parenthesis. Again, we write styles dot contains. But this time derived PTEN, success. You open a set of curly braces and derived num plus, plus. We add an else here. We open a set of curly braces. And we just say num equals 0. We save the file and we update this value here. So we write value that takes content equals num. The textContent property sets or return the text content after a specified node. This property is similar to the inner text property. However, there are some differences. Content returns the text content of all the elements, while enter tax returns the content of all the elements. We save the file, we check the browser, we refresh the page. If we click on the plus button, we can increase the value of the number. If we click on the pattern, we decrease the value of the number. And if we press enter, we set the value to 0. In the next section, we're going to change the color of this number when the user clicks on the patents. So see you in the next section. 8. Adding colors to the number: All right, In the last section, we have implemented the JavaScript to our project. In this section, we're going to add colors to do number when the number is more than 0 or below 0. Let's go back to the VS code. Just below this, we add an if statement, right? If you open a set of parenthesis and we write num greater than 0, we open a set of curly braces, and we change the style of the value. We write value dot style, dot color, and we set the color to green. So we write green. Here. We saved the file, we check the browser, we refresh the page. If you press on the green button, as you can see, the color of the number has been changed to green. Let's go back to the VS Code. We add an else. If here, we open a set of parenthesis derived num less than 0, we open a set of curly braces and we write value dot style, dot color equals red. We save the file, we check the browser. We refresh the page. If we press the red button, the color would be red. And if we click on the green button again, it would be green. Let's reset the counter. As you can see, the 0 is green as well. So we need to add elsewhere as well. So we go back to the VS Code. We add the else here, we open the curly braces and set the value dot style dot color to black. We save the file, we check the browser, we refresh the page. We tested again. As you can see now the 0 is black. That was it for our project. I hope you enjoy it and learn new things. Please let me know your opinion about the course and wait for the updates. I'm going to add more projects to the course later. Thanks again and see you next time.