Teach Yourself to Code from These 3

 

Here I will tell you top 3 places from which you can learn how to code which will include free services as well as paid services choice wisely and conquer them all one by one!.

I choose 3 only because for a new person to learn something new is confusing with all the resources available out there so to simplify I have narrowed it down to 3 only.

#1 FreeCodeCamp

FreeCodeCamp is a non-profit organization focused on teaching people. On FreeCodeCamp you will be taught basics of web design and development creating apps. And you will be given projects to complete. It’s really fun and challenging I recommend that you try this first.

What you can learn:- HTML, CSS, Bootstrap, JavaScript, node and much more..

 

p.s it’ s completely free!

#2 Codecademy

Codecacdemy is where most people go as newbies and come out as whats the opposite of newbie? Well any way it’s a great place to start coding. Here they will teach you basics and some projects too most of it will be like a walk through.

What you can learn:- HTML, CSS, Bootstrap, Python, Java, Javascript Angular, ruby and much more..

p.s It’s not completely free but you can learn a lot with out having to pay.

 

#3 Sololearn

Sololearn is mobile-based learn on any device you can download it for free it’s on my No. 3 because it’s so easy to use for beginners and professional. I mean not all of us has the time to sit on our computer/laptops and learn on different websites with sololearn you can simply just learn on the go or in your office break!

What you can learn:- HTML, CSS, Bootstrap, Python, C, Javascript Angular, ruby and much more..

p.s It’s completely free to use!

 

Bonus:

So here is a bonus of some of the resources you can check out for references or for learning

W3School, udacity, Coursera, eDX. Udemy, sitepoint, codershorthead . Good Luck!

 

Note:

These are not the complete list of resources available on the web.

 

Advertisements

The Style Integration

Styling

Well styling an element basically means what the word style means. Meaning change the text color, background color , text-size, etc. I will be using an online editor called codepen to display the input and output together.

There are 3 types of styling.

  • Inline styles

In inline style you can style inside the element tag like this

<p style=”color:blue; font-size:30px;”>hello, I am a paragraph</p>

Example.

inline

  • Internal styles

    For internal styling you use  <style></style>  tags inside the head tags of your html  and style inside that, like this:-

    <head>
    <style>
    p{
    color:red;
    font-size:30px
    }
    </style>

    </head>
    <body>

    <p>example text</p>

    </body>

    Example

internal

 

  • External styles(CSS style sheet)

External styles are written same as internal styles. except there are written on a separate page which is then saved in .css format

You can add external css style sheet to your html with a <link> tag, like this:-

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

Example.

external

 The rel attribute defines the relationship that the linked file has to the HTML file from which it’s referenced. In most cases, this resource will simply be “stylesheet“, which means, not surprisingly, “the referenced document is a style sheet.” And now you will be wondering what the href is well href stands for hypertext reference. It’s the source of the file used by the tag.

The end

In the end I would like to tell you that you can use whichever style you like to however external styling is better for a cleaner code and off course you can create one style sheet which you can use on multiple HTML pages. Inline style is wisely used when you have to target a single element  for a different style than your external style sheet.

 

Note: Now be sure to practice and follow this blog for new ways to code or just #learnsomethingnew.

 

Tables in HTML

The <table> tag defines an HTML table.

A HTML table consists of the following elements.

  • <table>
  • <tr>
  • <th>
  • <td>
  • <thead>
  • <tbody>
  • <tfoot>


The
<td> tag defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells – contains header information (created with the <th>(table head) element)

  • Standard cells – contains data (created with the <td>(table data) element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Also we add border=”2″ or some other number so the border of the table appears otherwise it won’t look like a table but behave like one.

A simple table.

simpletb

Colspan & Rowspan

The ‘colspan’ and ‘rowspan’ attribute is used to let the content span over multiple columns or rows! In the examples below I have given colspan=”3″  to one and to the other rowspan=”3″ that mean it is covering the space of 3 columns for colspan and 3 rows for rowspan respectively.   

cospantbrowspantb

What is thead, tbody, tfoot?

The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements. Now if you look carefully you will notice that where the thead element is placed does’nt matter it will display on the top of the table same goes for tfoot everything written in those tags displays below in the table and everything between tbody displays between thead and tfoot.

An Example with thead, tfoot, tbody

tbthtftb
Caption & Colgroup

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

The <colgroup> tag specifies a group of one or more columns in a table for formatting.

The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

What is the use of table?

Tables are really useful elements in html. You can do some of the following thing with tables.

  • Organize data.

  • Set your form in order.

  • Set your buttons for calculator or something similar correctly(how to make a calculator  coming soon).

  • Set images.

  • Make a menu card for a restaurant etc..

End point

The end point of this post is tables are quite useful if you know how to use them, so learn them now and learn them right!

Adding images, Anchors, ordered/unordered list and description of a list in Html.

Html Attribute

HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.

For example in the following code the elements h1, p, and div has the attributes style, name, and class respectively.

<h1 style=”color:red”>

<p name=”customerDetails”>

<div class=”someClass”>

Adding the image

Adding an image on your webpage is very easy to do.

The <img/> tag places an image in an HTML page.

The <img/> tag has two required attributes: src and alt. The img tag is a self closing tag. Meaning that the forward slash “/” you place after img closes the tag right there, no need for a separate closing tag.

In the src attribute you have to give the url/location of the file and in alt you have to write a name/brief description. The value of alt is very important, it tells the search engines what that image is about. Also the value of alt shows in place of the image if the image fails to load.

Here’s how to add an imageimgex.PNG

I have used an online editor called codepen to  display this example.

Adding Anchors

Tell me did you always wonder how just by a click of a button you went from one site to another! Well here’s your answer! in HTML those links are called hyperlinks. You can add hyperlinks with the <a></a> tags. It’s really quite simple just like adding a image. Similarly in <a></a>  you have to write the URL of the page you want the user to go to in the href attribute. href stands for hypertext reference. It’s the source of the file used by the tag.  It looks like this <a href=”https://www.codershorthead.wordpress.com”&gt; That’s the address of my blog!</a> this will appear like this on the web page.

aher

 

Adding an list

In HTML there are three types of lists. They are the following.

Ordered list

In HTML an ordered list starts with an <ol> tag, an unordered list starts with a <ul> tag, and a description list starts with a <dl> tag.

Each list item in the lint starts with the <li> tag.

The list items in an ordered list will be marked with numbers by default.

The <ol> tag has a type attribute by which we can change the serialized numbers to uppercase letters, lowercase letters, roman number with uppercase letters, roman number with lowercase letters and the default serialized numbers.

However you can select from which number the counting begins in serialized numbers by using the size attribute. You can give size any value and it will start from there. The following types only works in ordered list

orlistype

Unordered list

The <ul> tag has a type attribute by which we can change the disc dots to circle dots or square dots but it does not work in Html5. In Html5 you can change it like this for inline style <ul style=”list-style-type:square”>or like this for external/internal. You can also add an image but more on that later.

ul{

list-style-type:square;

}

here is an example.

listun

Description list

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term).You can write them as.

<dl>
<dt>Chocolate Milkshake</dt>
<dd>chocolate flavored milk i like it very much.</dd>
<dt>Ketchup</dt>
<dd>paste of tomatoes tasty paste of tomatoes tasty.</dd>
</dl>

here is an example.dlist

So there you go! Today you learnt how to add an image, anchor(hyperlink), and 3 types of lists in html.

Note: Now be sure to practice and follow this blog for new ways to code or just #learnsomethingnew.

 

Learning Html

HTML Basics 

HTML is the standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

HTML Structure

HTML Elements


An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element name is preceded by a forward slash as shown below with few tags −

Start tag content type End tag
<p> I am a Paragraph! </p>
<h1> I am a big heading! </h1>
<div> I am a divider! </div>

My First Webpage

Write the following code in your notepad. (I am assuming you have a computer, if not then just download any html editor on your device)

My Webpage

My Webpage

I am learning something new!

Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file “index.htm” (you can name the file anything as long as it ends with .html/htm) and set the encoding to UTF-8(which is the preferred encoding for HTML files).

View in Browser

click on the document created to run.ex

 

What to do in 2018?

happy-new-year-2018-wallpaper-1
Thus begins a new year with the same question again what will I do this year?

People have a lot of answers of this question, but what they don’t realize is that they will be doing the same thing they did last year or the year before that or even the year before that.

The same old cycle of thinking of doing something awesome becoming more intelligent, becoming more beautiful, becoming more successful…but wait!

Isn’t that what you wanted in the previous years ?

You still wish for those so does that mean you didn’t get those thing before, so about changing the pattern of how you live your life I mean take a Good Hard Look At Yourself !

The best investment you can do for a lifetime is to learn something with a long term effect and don’t say you don’t have the time to because if you can have the time to check your Facebook, twitter or Instagram or whatever you use you sure can take some time to learn.

But hey! What to learn?

Well the answer to that question in my opinion is simple learn a programming language because as the time is running into the future those who know programming languages will always profit and just to be clear I don’t mean go get a degree in computer science or something , there are a lot of free sources from which you can learn to program.

Below is one of those free websites which teach you as well as train you as the programmer end result you get a skill set that will profit you for the long run and for now as well and you land an awesome job!

 

FreeCodeCamp

FreeCodeCamp  is an non-profit website for learning how to code they teach you about front-end development , back-end development and more in which you get to learn how to use html5, CSS3, Jquery, JavaScript, bootstrap etc . 

You will be given coding challenges to complete and you will get your very own full stack developer certificate

Most of the time it takes people around six months to a year to complete just the  front-end

 developer course

which is of estimated 400 hours according to FreeCodeCamp.  

 It doesn’t matter if they are a degree holder in computer science or know nothing at all that’s just the average time  people take for completing it.

But me and my twin brother completed the Front-End

 Developer course in just 41 days!

 Yes

it’s not a typing mistake it is 41 days, during which we were also preparing for our exams and working part-time jobs and no our exams were not relating to programming nor was the jobs yet we Aced in everything.

If we can complete this just 41 days while doing other things then so can You!

 In the next few weeks I will teach you what challenges you will be facing in FreeCodeCamp, what those challenges means and just how to solve them 


Don’t forget to like, tweet, share, subscribe!