CSS

Hello Guys! you will be glad to know that the basics of HTML in our tutorial is completed till HTML Form Submission now we are moving on CSS Section of this tutorial , It's very interesting and very easy as compared to HTML,So why are you wasting your time just read the whole introduction about CSS and remembered you should never be upset about some new things like CSS, because as you know that my purpose is to guide you from beginner to expert in Front-end Web development(HTML,CSS and JavaScript).So, keep learning with me you will find out all that you need in your Front-end web development career.

CSS Introduction

In this part of tutorial I will tell you about CSS,What is CSS,How can we use it in our HTML Websites ,CSS Text,CSS Font,CSS Background,CSS Links and a lot more things that are used to make our website more stylish.But before moving into these all things first, we should understand thatWhat is CSS

.

Section 2:Part 1

What is CSS?

CSS Stands for Cascading style Sheet,we can say that CSS is a plain text file to store properties,also describes the look and formatting these properties that how the content of our web page should be display on the website.By using CSS we have access control to make any type of global change and apply this change into our websites. In other words we can say that CSSis the key presentational technology that is used to design websites.

What is StyleSheet?

We can make nay part our website stylish like,fonts,colors,backgrounds etc, but one thing that we must need is a Stylesheet.The Stylesheet is attcah with our HTML code or we can say that it is acts as a partner of HTML code file,and it is used for taking care of all styling layouts, fopnts, colours and overall look of our website.

How can we make a CSS stylesheet?

Making a Cascading styleSheet is very simple,just like HTML file extension we should need to create a simple blank file in any ".text" extension like notepad or notepad++ and save this file with extension ".css" our Cascading style sheet is created.
If you ever decide to change the look of your site, you modify that one CSS file (your style sheet) and all the HTML pages reading from that file will display differently. This makes maintenance of our design much easier.

Tutorial-7(HTML Submission Form)

Welcome in Tutorial-7

Hello everyone! Hope so you are all well.In previous Tutorail-6( HTML Forms )we learnt about HTML Forms How can we make simple forms using different Input fields.Before moving into our new tutorail which is about Form Submission I want to tell you my purpose which I told in every lesson.

As you know guys my purpose is to guide you from beginner to expert in Front-end Web development(HTML,CSS and JavaScript).So, keep learning with me, visit on my previous tutorial you will find out all that you need in your Front-end Web development career.
Guys! today's lesson is very simple and interesting as compared to previous lessons
In previous lesson we had only read about some fields in our form,and not discussed about how the form can be submit,which is the only important part of form,the submit button.

Section 1: Part 7

HTML Form Submission

In every forms like contact,comment,survey type,we have seen a button like Submit,Click here,Send, and when we click on that button our task is completed and send to the destination where we want to send it.

After we can creating a form, a Submit Button is required for users of our website to click on that button and process data after filling out a form.This submit button is created using the input field as we used in previous lessons of type text,email etc just like that we used the input field of type "Submit"this Submit is a attribute of input field whose value is submit type.The value attribute is used to specify the text that appears within the button.

look into the image you can easily understand!

Now we put the above code in our previous HTML Form code

Output:

For today's lesson I think that is enough.
See you in the next Tutorail!

Tutorial-6(HTML Forms)

Welcome in Tutorial-6

Hello Guys! Hope so you are all well,stay home and save your life.In previous Tutorial-5(Tables in HTML) we read about in detailed about HTML Tables, discussed actual definition of tables,also learn about which Tags are used to make a table and also we discussed that How can we arrange our data in tabular form using HTML..

As you know guys that my purpose is to guide you from beginner to expert in Html,CSS and JavaScript so keep learning with me you will find out all that you need in your Front-end Web development career.

In today's tutorial we learn about HTML forms. As you know that forms are an important part of any websites,especially for survey,admissions in universities,or in any site that provide us registrations before using , and there are millions of websites that provide us registration forms,and forms are an important part of interaction between admin and users like comment section of any websites is a type of form.Comment part of our website is the best way for getting reviews(feedback) from visitors and it can be made using HTML Forms.

Section 1:Part 6

HTML Forms

Form is a type of document with spaces in which we can write or select,for a series of documents with similar contents.In other words,Form is the shape,visual appearance or configuration of an object.

How can we make HTML form

It's very simple to make a form in HTML.Just remember some important tags that are required, once you kept these tags in your mind, you can easily make any type of form, it's depend upon you.

HTML Form tags

In order to add a form in our website, the <form> tag is used. this <form> tag identifies that on which part of our web page, the control elements will appear.

Guys you should no need to confuse about Control elements, these are some elements that are used while making HTML forms.These Form elements are some input type elements,these input elements are as follows.

• Text fields
• Check-boxes
• Radio Button
• Submit Button

and so on.

The <input> element

The  <input> element is one of the primary element used to get text from the users of our websites.This <input> element uses the "type" attribute ,this type attribute defines what type of information is to be captured.The one of the most popular "type" attribute is text,which denotes a single line of text input.

Some input types are as follows:

Placeholder

The placeholder is a type of attribute, this attribute helps the user of our websites before they enters a value.Furthermore, in order to write a short hint that describes the expected value of an input field,we used placeholder attribute.The hint which we write in placeholder is shown to users before they enter a value in that field.

The <textarea> element

In HTML Forms ,there's another element which is known as <textarea> element, this element is used to captured text-based data and can accept larger passages of text than <input> element, another useful thing of <textarea> element is that we can easily make <textarea> field re-sizable.

Look into the image ,here a simple form structure .You can easily understand about the all elements.

Output:

In this output ,you can see  (your name,your email address) these are placeholders when we drag our mouse cursor on it and write something, it will be hide,it's just a hint for our users that what they need to enter in that part of field.

I think for today it's enough ,just read the whole tutorial twice , you will be able to make our form just within one minute.

See you in the next tutorial!

Tutorial-5 (Tables in HTML)

Welcome in Tutorial-5

HELLO Guys,as you know my purpose is to guide you from beginner to expert in html , CSS and JavaScript so keep learning with me you will find out all that you need in your Front-end web development career.

In previous Tutorail-4 (Navigation)we had learn about navigation that what is navigation,how can we add menu in our HTML website using nav bar,unordered lists, list items etc.In this tutorail I will tell you about Tables in HTML, that how can we create them using simple tags, As we know guys that tables are very important part of any program , in order to save our budget record, for showing results of our selling, and a lot more things , we can easily save this records in a simple way but when we save them in an order(table) it's easy for us to manage.
Let's read in details about Tables.

Section 1: Part 5

HTML Tables

Tables are basically a way to arrange our data in rows and columns, we commonly used tables to represent tabular form of data like lists of products etc. But here our question is that 

How can we arrange the data of our web in tabular form using HTML?

It's really very simple to make HTML Tables  Following are some tags that are required for making a table.

HTML Table Tags

• <table>        
• <th>
• <tr>
• <td>

The First <table> tag defines a table that means data will be formatted as a table and <tr> tag is used for rows and <td> tag for data we can add multiple rows and columns for our data representation by giving them size . The <td> tag defines a cell and with these cells we can create columns in our table row.Let's look into the image that how can we implement these tags in an HTML code.

In the above image we just created rows not cells, In <tr> tag I just wrote This is row one,two for your guidance ,that doesn't meant that we write anything between  <tr> tag for data writing we need <td> tag, means for cells we must need a <td> tag which is used for creation of columns in these rows, we will implement this <td> tag in <tr> tag, in following image, this code give a complete format of table with rows and columns.

In above code, you have seen that there are two rows <tr> elements, in which three cells <td> elements of each rows contain some data.The output of the above code is as follows.

Output:


This is a simple format of an HTML table ,there's no boundaries of table, remember in HTML we just create a structure not styling, these things(boundaries Styling) are related to CSS section of this tutorial.

Table Header <th>

Once we have created a row and columns , we noticed that there's a need of header ,means table header, for table heading we used a <th> tag which designate the headings of row and columns of cells,there is another tag which is known as <caption> tag used for Table Heading and we must write this after <table> tag.

But Guys be attentive in difference of these two tags , just remember the <th> tag is for rows and columns heading and <caption> is for whole table heading.

Just look into the code you can easily understand.

Output:
                        

Now from above code with output , I' m sure you can easily understand , in my point of view I think it's not difficult to build table in HTML , as compared to previous tags , table tags are max , but if you will practice for this, you not need to search on Google. For Today I think It's enough for you, go home and practice hard.

See you in the next tutorial!.

Tutorail-6(HTML Forms)

Tutorial-4 (Navigation)

Welcome in Tutorial-4

As you know my purpose is to guide you from beginner to expert in html , CSS and JavaScript so keep learning with me you will find out all that you need in your Front-end web development career.
In previous lesson we had learnt about Multimedia that how can we implement images,videos,audios in our websites in order to make it more attractive, but along with this we also want to become famous ,getting reviews on our work from viewers.For this purpose, there's a need of connection between us and our websites viewers and this is only possible when we have a contact me or contact us page in our website So, in this tutorial we will learn about how to create a "Contact Me" using "Navigation" tag in our html website.

Section 1: Part: 4

Navigation

According to computer Science, Navigation refers to the cat of opening and moving through computer menu, for example the Start menu in our Window Explorer.In other words, Navigation word refers to clicking or tapping buttons and menus or making multi-finger gestures to activate functions in an application or to jump to other sections of a website.

What is Navigation in html?

In Html code, in order to implement table of contents, menus the <nav> bar is used, this <nav> element represents a section of a page whose purpose is to provide navigation links ,either within the current document or to other documents. Some common examples of navigation sections are menu,table of contents,indexes etc.

Navigation bar

The viewers like your website if your content is well organized, so , in order to make our content organized and well follow, we need a Navigation bar .The Navigation bar is list of links like home, About me, contact us, news etc or any other type of menu in websites like in the picture below.

Followings elements are must to create Navigation in Html Code:

• The <nav> element, is must in order to identifies our the menu section of our website page.
• The <ul> element, this is called an unordered list.
• The <li> element , this is used to identify the lists of items that are in ul element.
• The <a> element , which identifies the hyperlink.
• The href element, refers to tell the actual location or destination of the link.
• The URL attribute, refers to identifies the web address of link.

Html Code:

What is Hyperlink?

Hyperlink is type of link which is highlighted on any web page, on clicking get user from one location to another location, as from my this tutorial page just click on this highlighted word Tutorial-1 you will move on another first page of tutorial because I gave a link of my first tutorial page behind this "Tutorial-1" word.But without a element hyperlink doesn't work ,the a element is used to establish the hyperlink and the word href called " Hyperlink Reference" ,it is required to move web page from one location(resource) to another.

Let's look into the image, you can easily understand


                                          Code                                                                            Output

So Guys I think it's quite easy to add menu in our website we can easily give any specific style to our menu as we want by we will discussed it in CSS section, in this Html section we just learn about content structure and meaning in our website. I hope that through this tutorial you will be able to understand each and very thing in a very detailed view that's why I am only tell you about one specific thing in one tutorial if I will tell you about multiple things in one tutorial then it's not easy for you to read the whole post and also you will not pay attention to everything , In my one page tutorial only give your 10 minutes in this busy schedule life and I'm sure you pick things ion your mind very sharply.See you in the next tutorail which is about tables in HTML.

Tutorial-5(HTML Tables)

Tutorial-3 (Multimedia)

Welcome in Tutorail-3

From previous lesson we learn about headings and paragraphs that how can we write them in html code ,it's really very simple, guys In today's tutorial we learn something new about how can we add images videos in our website, along with heading and paragraphs it's also quite easy to remember.

Section 1: Part 3

Multimedia

                  

Before moving into the code first we must let to know that what is multimedia?

Multimedia means that computer information can be represented through audio,video, and animation in addition to traditional media for For example text,graphics/drawings,images etc.In other words ,Multimedia is the field concerned with the computer controlled integration of text,graphics,drawings, still and moving images (videos), animation, audio, and any other media where every type of information can be represented,stored,transmitted and processed digitally.
Now I think now you have easily understood about multimedia.

Images:

Now moving into the Html code. First try to understand with image.

Code:

<img src="imageName.extension"/>


In order to add images to our web page, we use the simple  <img> tag(element) with also closing tag using"/" , In image "src" is the attribute which specifics the URL ( web address) Of the image whether it is in your desktop or in browser and " alt " is another attribute which is used for describing the image.

The "Src" attribute with "alt" attribute describes the content of an image. The "alt" attribute text will be displayed in place of the image if the image is not available.

There's a lot of websites that provide no-copyrighted images, For Downloading images for your websites visit   Description

Videos:

As we seen that adding images to our website is quite easy just like images adding videos is also very easy instead of "<img>"  tag we should use "<video>" tag  and in "Src" attribute write the URL( web address) of your video that you want in your website.

Code:

<video src="https://front-end-web development.com/" controls></video>

Audios:

<audio src="demo.mp4" controls></audio>

Along with these options of adding multimedia in your websites you can easily add a lot more other things in order to make your website more effective in front of viewers as we knew that images,videos and audios are affect a lot to our viewers instead of text so trying to make your website more effective by using these simple html codes.

See you in the next tutorail!

Tutorial-4(Navigation)

Tutorial-2 (Headings and Paragraphs)

Welcome in Tutorial-2

I hope from tutorial-1 you had easily understood about structure of Html ,if you have any confusion ask with me directly or you can comment me below.Let's starts learning something new!

Section 1: Part 2

Headings and paragraphs

Before moving into html code, firstly we should know that what is heading and what is paragraph?

Heading

As we all known that any title or topic of a document,article and chapter etc is heading , there's also subheading in which we explain our main idea or main heading into multiple steps or we can say that subheading is any of the heading in which each of the main divisions of a subject may be sub divided.Now the main thing is that how can we write heading of our program in html code, that's very easy look into the code

These html headings have six levels like h1,h2,h3,h4,h5,h6. H1 is the highest level and h6 is the least one.

Paragraphs

A paragraph is group of sentences under which we provide some brief explanations of our heading or topic and these sentences support the main idea and maintain a consistent flow.I think it's enough for your understanding that what is paragraph!. Now our task is how to write it inside the code of our website. Look into the picture below you easily understand.

Wow.. it's really very simple guys to....so why are you waiting just go and open notepad on your desktop and write headings and paragraphs for your websites put your first website content online..
Html is all about learning tags whatever we read further you will see different types of tags that are very easy to remember if practice.We can also change the styles like font-size,color,alignments of our headings and paragraphs but these all things will be discussing in CSS part of this tutorial.For today I thinks that's enough.
See you in the next tutorial!

Tutorail-3 (Multimedia)

Tutorial-1 (HTML structure)

Welcome in Tutorial-1

Hello guys in this tutorial of second week I will guide you about languages that you must know for becoming front-end web developer.

Types of languages that you must learn

1. Html
2. CSS
3. JavaScript

One thing that I want to clearly mention you is that please don't be worry about that, how can you learn it because you don't know even you didn't listen about it before, it's very simple guys, and one thing that i always tell you is if I can do this then why you can't! OK moving on.Firstly we learn about html.

Section 1:part 1

What is Html?

before telling you about what is html ,i firstly want to tell you one thing that in this tutorial page I write each and everything like all headings,text etc in my article about front-end web development is written in html, wow amazing yeah.

So let's read about html.

Html is the abbreviation of Hypertext Markup Language now in details that what does this Hyper Text Markup Language means?

basically HTML is a programming language that is used to create documents like we say that it is used to make electronic documents, we called these documents "pages" that are displayed in our search engine like in WWW(World Wide Web) one of the most important thing of html is that without this html code our browser would not know that how can he display our images,texts as elements, loading videos or any other elements as you know, in short "html is a programming language that is used to create websites and applications" I never want to go on more dept because I'm sure that now you understood in details about the word html.

You write your html code easily in your notepad or you can use notepad++ ,I recommend you notepad++ because I use that one just go on the www.google.com and write notepad++  then download, simple. Whenever you write your code just save your file in which you wrote with "file name" then extension ".html".Download notepad in Description.

We are now go to see that how can we write our first html code because I know that no one want to read lot more you just want to go on, to the point(coding)look at image

Html website structure

the above you see is the actual structure in which you write your code,one thing that you must know is that the html is totally concerned into tags the more you learn tags,the more you get.

Each HTML program have some structures that are necessary for making your website all these required structures are mentioned below.

Opening tags

• <DOC TYPE html>
• <html>
• <head>
• <body>

Closing tags

• </html>
• </head>
• </body>

Here you see guys that the program starts with declaration ,<DOC TYPE html> this tag tell our web browser where we run our html code,that means which version of html we are being used.We placed this deceleration in the very beginning of our html code file.

The next <html> tag is used to mark the beginning of our program.

Inside the" <html>"element,the" <head>" element identifies the top of our document.However,the content that we placed inside the "<head>" tag is not displayed on our web browser itself.Instead of this,that is must include the document title,which is displayed on the title bar in the browser window,also link to an external files,or any other beneficial information.</head></head></html>
This image is for those who don't know about title bar

The "<body>" tag is used for the whole program like all the visible content within our web page will fall within our body tag.

Ok that's enough for today see you in the next lesson.

Tutorial-2 (Headings and Paragraphs)

introduction

                    

Introduction of Web Development

Web Development Learning From beginner to Expert

Hello there!

This is really a very very huge beneficial page for you guys here you find what's going on in my life as a Web developer I show with you all my skills from beginner level..................

First let to know

What is Web Development?

Web development refers to designing and building websites for business or personal reasons. In other words, web development is all about getting our ideas out into the web, and about making people aware of them.

For more details visitWikipedia

Guys here I told you in details that how you become a perfect Front-end Web developer even you don't know about anything related to this I guide you from beginner to expert...

Firstly I want to show you the basics

Types of Web Development :

1. Front-end
2. Back-end

But to be very honest guys I only taught You about Front-end web development because I am a front-end web developer not a back end but for those who want to learn back end development too ,here I guide you about some other online courses of backend that are both paid and free courses.

lets start:

What is Front-end Web development?

Front-end Web development manages everything that users visually see first in their browser or application.Front end developers are responsible for the look and feel of a site.Front-end web development is mostly focused on what some may coin the "client side" of development.


"LEAD FROM THE BACK AND LET OTHERS BELIEVE THEY ARE IN FRONT"
                                                                                                 NELSON MANDELA

Languages that you must learn for Front-end Web development:

1. Html
2. CSS
3. JavaScript

Don't be worry about that guys I guide you each and every thing about Font-end Web development from beginning also told you about those online courses that provide you full online tutorials with expert instructors along with certificates that help you a lot in getting jobs as a freelancer, and the most important thing is that these courses are of both types, mean they are also paid and free courses but don't be worry about thinking that ,is Free Courses provide Certificates?

Definitely of course. Free courses also provide you certificates................wowwwwww that's great.But these all things I will told you in my next upcoming YouTube channel.

In this Web development tutorial I only tell you about Front-end Web development ,once you easily understood each and every thing then you start your earning in fiverr ,I also told you after completion of this tutorial that how can you work online as a freelancer in fiverr ,but I told you that you would only gain success if you try your best because.

"SUCCESS SEEMS TO BE CONNECTED WITH ACTION.
SUCCESSFUL PEOPLE KEEP MOVING.
THEY MAKE MISTAKE BUT THEY DON'T QUITE."

Three thing that you must have for programming are:

Web programming is neither easy nor hard it's just depend upon you that how much time and attention you give it, the first two parts Html and CSS are quit easy to understand the hard one is that java script it take a lot of your time may or may not because again I told you that its depends upon you that how quickly you gain but one thing i want to tell you must that if i can do then why can't!.Think upon it

For this weekend I think Its enough in such a busy schedule of world.........See you in the next weekend tutorial.............................

Tutorial-1

Who I am?

Welcome in my Front-end Web development tutorial 

Who I am?????...

Hi..Guys.

Hope so you are all Well.

 Actually Guys I want to share with you my skills all that I learnt in my web developing field. That What's going on in my everyday hope so you can enjoy it.....

Before introducing my self I wanna tell you one thing must,

IN GOD'S EYES WE'RE ALL THE SAME

I would not say that I am very naive,why I am,no,so why do I lie? I am a normal human being, or you can say, a junior front-end Web developer ,but it is also very hard to become.I'm working hard to get ahead in this field , I'm a student at the college and we all know that universities/colleges only give us degrees.The main thing is is to learn our skills,we are successful at learning the the skills we do not take benefits from getting just a paper bag(degree).I always give more importance to skills and will also advice you to try to focus on learning skills more and more because it's areal key to success whenever you go in market they would never ask you about your degree they just tell you what can you do?

Purpose

As I told you that I am also a learner ,same as you ,my purpose is to share with you all those things which I learn from my skills, and hope so in future I will share my experience with you guys as a full stack web developer.I will do my best to share or teach you each and everything which i know in this field ,till now. The main thing ,that ,I want from you guys,is, if there's any more experienced person ,who have better knowledge as compared to me, kindly tell me ,my mistakes, my weak points, so ,it can help me out in getting better my skills. For each reader it's also my request to you all that you would kindly point me on the spot where you find my mistakes.Because from someone I was listen that,

INDIVIDUALLY WE ARE ONE DROP BUT TOGETHER WE ARE AN OCEAN.