Pin Generator Using HTML, CSS, Fontawesome & JavaScript

Pin Generator Using HTML, CSS, Fontawesome & JavaScript, available at $19.99, with 31 lectures, and has 7 subscribers.

You will learn about Students to learn how to create HTML structure and link Font-awesome, CSS and J Students to learn how to use the DIV Tags by adding IDs to them Students to learn how to add Font-awesome icons in HTML Students to learn on how to use inline styling in HTML tags Students to learn on how create input tags and how use it's attributes such as placeholders,id,button and disabled attributes Students to learn on how to use the footer tag Students to learn on how to use CSS styling such padding, Fontsize, text-alignment, background, box-shadow, display, fontfamily, height, width, boxradius etc Students to learn on how to use and add a hover feature Students to learn on how to add Javascript methods in Html and call them in CSS Students to learn on how to use the new Date() keyword to make a clock Students to learn on how to use the checkTime() method to add zeros in front of numbers less than ten How to style using Javascript methods How to generate the pin sequence of safaricom, airtel and telkom How to make an element appear and disappear using HTML, CSS and Javascript This course is ideal for individuals who are The course is for begginers in html It is particularly useful for The course is for begginers in html.

Enroll now: Pin Generator Using HTML, CSS, Fontawesome & JavaScript

Summary

Title: Pin Generator Using HTML, CSS, Fontawesome & JavaScript

Price: $19.99

Number of Lectures: 31

Number of Published Lectures: 31

Number of Curriculum Items: 31

Number of Published Curriculum Objects: 31

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Students to learn how to create HTML structure and link Font-awesome, CSS and J
Students to learn how to use the DIV Tags by adding IDs to them
Students to learn how to add Font-awesome icons in HTML
Students to learn on how to use inline styling in HTML tags
Students to learn on how create input tags and how use it's attributes such as placeholders,id,button and disabled attributes
Students to learn on how to use the footer tag
Students to learn on how to use CSS styling such padding, Fontsize, text-alignment, background, box-shadow, display, fontfamily, height, width, boxradius etc
Students to learn on how to use and add a hover feature
Students to learn on how to add Javascript methods in Html and call them in CSS
Students to learn on how to use the new Date() keyword to make a clock
Students to learn on how to use the checkTime() method to add zeros in front of numbers less than ten
How to style using Javascript methods
How to generate the pin sequence of safaricom, airtel and telkom
How to make an element appear and disappear using HTML, CSS and Javascript

Who Should Attend

The course is for begginers in html

Target Audiences

The course is for begginers in html

HTML & FONTAWESOME

1.Introduction

This is a PinGenerating Website using HTML, CSS, Fontawesome and JavaScript.

2.We shall create a HTML Structure and load it to the Web Browser and learn on how to change its title

3.We shall create a main DIV for that is going to display the clock. We shall also make another DIV that is going to display the warning message.

4.We shall learn on how to add the exclamation triangle using the Fontawesome in the paragraph tag under the ID of ‘warn’.

5.Creation of the Input Tags

We shall look on how to create the input of Safaricom, Airtel and Telkom. We shall add an inline alignment of type ‘center’. We are going to create a main DIV and this is where we shall make it to have a center alignment for all of its items inside. The title of Safaricom will be held inside a paragraph tag and its ID is going to be ‘line’.

The INPUT will contain a placeholder of XXXX-XXXX-XXXX Pattern and they will be disabled to avoid any form of input and just be for the display purpose only. Their IDs are going to be Safaricom, Airtel and Telkom respectively.

Lastly, we shall another input of type Button. The value will be ‘-Generate-’ and the ID will be click.

6.Lastly, we shall create a footer

CSS

7.Styling of the entire HTML Structure using various CSS Features

In this we are going to style the PinGenerate using various styles. We are going to start from the body to the footer tags. We are going to apply styles such as padding, border, margin, background-color, font-family, box-radius, font-size, height, width, color, outline, cursor, hover and many as we can in CSS.

JAVASCRIPT

8.Adding JavaScript Methods in HTML and JavaScript

Adding JavaScript Methods in HTML to the body tag and button input and calling them in JavaScript File.

We shall add an Onload Method and the function will be startTime () to the body tag. We shall also add onclick to the input of type button. The method is going to be start ().We are going to use the Arrow Functions in JavaScript.

We are going to use the new Date () to create and define the date. We shall use the get Hours, get Minutes and getSeconds methods to create the digital clock. We shall use the set Timeout method to make the clock run. We shall use the check Time Method to make the clock have zeros Infront of numbers less than 10.

9.We shall style the clock from Javascript.

10.Generating the Sequency for the pins

We shall set and declare the sequency for the pins of Safaricom,airtel and Telkom.We shall also make the buttons disappear when clicked and appear when refreshed.

We shall make the warning sign appear only when we click on the button and disappear when we refresh the website.

10.Conclusion

Here we are going to conclude this tutorial…..

THANK YOU

Course Curriculum

Chapter 1: Intoduction

Lecture 1: 1. Intoduction

Lecture 2: 2. Intoduction To Website Parts I.e HTML, CSS, Font-awesome and Javascript

Chapter 2: Creation Of the HTML Sructure and Linking With CSS,Fontawesome and JavaScript

Lecture 1: 3.Creating the HTML Structure and Changing The Title

Lecture 2: 4.Linking HTML File with CSS, Font-awesome and JavaScript

Chapter 3: Creating HTML Elements and Components Fontawesome icon and Inline Styling

Lecture 1: 5.Creating of DIV Tag That Will Host The Clock

Lecture 2: 6.Creating The Warning Message in HTML

Lecture 3: 7.Adding Exclamation Triangle Using Fontawesome

Lecture 4: 8.Creation Of Input Of ID Safaricom

Lecture 5: 9.Creation of The Airtel and Telkom Input Tags

Lecture 6: 10.Creation Of The Input Of Type Button

Lecture 7: 11.Creating The Footer

Chapter 4: CSS Section

Lecture 1: 12.Introduction to CSS and Styling of The Body Tag

Lecture 2: 13.Styling Of The Warning Sign in CSS

Lecture 3: 14.Styling Of The Title Of ID Warn

Lecture 4: 15.Styling The Inputs Of Safaricom,Airtel and Telkom

Lecture 5: 16.Styling Of The Paragraph Of Safaricom,Airtel and Telkom in CSS

Lecture 6: 17.Styling Of The Value Of The Input Of Safaricom,Airtel and Telkom

Lecture 7: 18.Styling Of The Button In CSS

Lecture 8: 19.Adding a Hover Feature To The Button

Chapter 5: JavaScript Section

Lecture 1: Adding Java20.Script Method in HTML Body Tag

Lecture 2: 21.Define and Declare Date Methods

Lecture 3: 22.Making The Clock To Run

Lecture 4: 23.Adding Zeros In front Of Of Numbers Less Than Ten

Lecture 5: 24.Styling Of The Clock

Lecture 6: 25.Set and Declare Sequence Of Safaricom

Lecture 7: 26.Set The Sequence Of Airtel and Telkom

Lecture 8: 27.Making The Button Disappear When Clicked

Lecture 9: 28.Making The Warning Message Appear Only When Clicked

Lecture 10: 29.Generate The Sequence For Safaricom

Lecture 11: 30.Generate The Sequence For Airtel and Telkom

Chapter 6: Conclusion

Lecture 1: 31.Conclusion

Instructors

Cliff Mainye Mwebi
Web and Software Developer

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 0 votes
4 stars: 0 votes
5 stars: 0 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu