How long does it take to learn HTML and CSS (together)?

Published by Dev Papa Panda on

coding

If you are looking to learn HTML and CSS that means you either wanna be a web developer or wanna save the cost of development of your website for your business by doing it on your own, which is indeed a great idea.

Learning basic HTML tags may take you up to 4-5 days if you are a complete beginner. And learning CSS along with that may just add 3-4 more days to the learning tenure.

Note: It may just take more than 4-5 days if you want to learn almost all HTML tags and their usage.

Note: It will obviously take more than 3-4 days if you wish to learn CSS in depth. In 3-4 days you may just make it up to the basic CSS properties.

And as you are taking up the initiative to learn something new out of your box, I would like to give you bonus tips for your website development( A free hosting and free domain)

What is HTML?

HTML

If you wanna learn HTML, you should first know what HTML is? HTML stands for hypertext markup language.

HTML is the standard markup language for web pages or websites.

HTML is the building block of a web page.

The tags of HTML look something like <tag>.

A basic HTML template looks like 

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Page Title</title>
<body> 
  <h1>This is a Heading</h1>
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
</body>
</html>

Why is HTML so important?

HTML is the skeleton of a website. HTML defines the structure and elements of the browser.

The browser identifies every element by its HTML tag.

For example to make the browser understand that the element that you are adding is an image, your HTML tag for the following should look like

<img src=”img_path”>

Through the <img> tag the browser identifies the element to be an image element and treats it accordingly. 

Without knowing HTML you won’t be able to develop a website or webpage. It is very important that you learn HTML before walking in the path of the development of a website.

Is it hard to learn HTML?

No HTML is not at all hard. Just try out HTML, HTML language is the easiest of all languages.

HTML language is so easy that even an individual without a development background or a beginner with no knowledge of coding and programming can even learn it in a few days and can deploy professional looking websites within weeks.

Is HTML Worth Learning 2019?

And the answer to that is an obvious “yes”. Because without HTML language, there won’t be any website existing….. and without any websites on the web, the internet won’t have its worth.

Everything that you see around you like youtube, Wikipedia, etc etc are websites developed in HTML. So if HTML losses its worth, then even those websites would dissolve which is next to impossible.

How long does it take to learn HTML?

You will be able to learn HTML in a span of almost 4-5 days.

But the above-mentioned span is just for learning Basic HTML tags.

Disclaimer if you wish to learn just more than the basic HTML tags if you want to dwell over every HTML tag then obviously it’s going to take you more than just 4-5 days.

Can I learn HTML the same day?

Learning HTML is no rocket science with a good level of dedication and a little bit prior knowledge of tags, learning HTML with basic tags is possible in a single day. If mastering HTML may not be possible but at least you will get to know the basics of the HTML structure in a single day.

How can I learn HTML easily?

You can learn HTML through various ways, you can go for a paid course from Udemy, you can learn it for free from Youtube, you can refer to a documented website such as W3school or Khan Academy.

Though learning HTML by paid course is something which I won’t really recommend because as I said earlier HTML is not rocket science, you don’t need to pay for it.

Where can I practice HTML?

There are many online HTML code editors available. You can use those editors to write your code.

Online HTML Editor

W3school Code editor

You can even use a basic Text editor like Notepad for HTML development.

You can use professional IDE like visual studio for writing your HTML codes.

Pro tip: visual studio comes for free. Development in IDE like the visual studio is really convenient as it suggests tags and auto-fills tags as you write your code.

Visual Studio Code

What is CSS?

CSS stands for cascading style sheet. By the name of it is halfway clear that it is purposed to style any website.

CSS

CSS is used to design a website or webpage.

CSS is used to define the properties of each element.

For example if you include an image on your webpage, you would need CSS to define the height and width of the image on the webpage.

CSS basically makes the browser understand the looks of an element on the webpage.

Why do we need CSS?

As told earlier that CSS is used to design and style web pages.

Without CSS every webpage would just look like a boring documented page.

A website without CSS is really not liked by the audience on the internet. Neither Search engines like google like a page without CSS.

How long does it take to learn CSS?

Learning CSS is not that hard you can learn CSS in 3 to 4 days, but obviously that depends on your dedication and your capability to learn a new thing.

Moreover, in three to four days you would be only able to make it up to the basic property that should be used in CSS for an element.

If you want to learn in-depth CSS and want to learn every property then obviously it will take you more than just 3 to 4 days it may take even months to cope up with properties.

If you are really interest in learning CSS and knowing more, check out,

How can I learn CSS easily?

I personally would recommend you to just learn the basics of CSS and then start implementing things on your website and as you start developing your website, you will start learning new CSS properties.

For Learning CSS you can use W3school for free.

How to make a website with only HTML and CSS?

Well if you want to make a web site with only HTML and CSS then you will have to know the structure in which you have to write the HTML and CSS codes.

You can just copy and save the below code with the name of doodleish_tutorial.html

And then open the doodleish_tutorial.html file in a browser. Your demo webpage will be ready to go.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

You can manually change the section and even replace them with other HTML element tags. Just try it out, I can promise you that it would be worth it!

How professional website can be built with only HTML and CSS?

With only HTML and CSS, you can only build static pages but there is no limit to its professionality. The looks and the design of a web page totally depend on your creativity.

This is one of my demo webpages which is built on HTML and CSS.

Devpapapanda.github.io

You can make something even better than this. And for making something better than this all you need is creativity in you and nothing else.

Related Article: How long does it take to be a Web Developer.

How to free host my HTML and CSS website?

There are many various platforms where you can easily host your static website for free.

free host

Some of the platforms are :

There are many more to check the other on the list check out 7 Free best hosting for Angular apps and React apps. Don’t worry the hosting used for angular apps or React apps are the same hostings that would be used for hosting your static website. 

What to do after learning HTML and CSS?

Once you have learnt HTML and CSS and you are good with those, then you can try learning JavaScript which is the only coding language that is used for Web technology.

To be honest a website without JavaScript is away handicapped website it would not function well without JavaScript.

And to learn JavaScript it would just take a little bit more time because the learning curve of JavaScript is a bit steep.

Another thing that you can learn after learning HTML and CSS is using a framework like bootstrap. A framework like bootstraps reduces your part of writing CSS for your web page. It comes with pre-written CSS for websites.

Why is javascript so important for a website?

HTML and CSS are not considered to be the coding languages, and with HTML and CSS you cannot implement any code logic or any functionalities that you want your website to do for the users.

JavaScript

If you want your website to perform any kind of functionalities in that case you would have to implement JavaScript in your website. JavaScript is the only coding language that the browser understands.

Any kind of popup, any kind of animations or any kind of alert would require JavaScript in your website.

How to run javascript?

Like other coding languages, you don’t have to execute JavaScript. The browser run said javascript itself whenever the document is loaded( by a document I need the web page).

To run a JavaScript code all you have to do is start a script tag within the body tag and write a JavaScript code and then end the script tag within the body tags.

Something like:

<body>
<script>
Javascript logic
</script>
</body>

To know this domain of JavaScript in detail, read How to run JavaScript Code?

Is Web development a good career?

And the answer to this question is a big “yes” which is because the internet is booming at the present stage and every business wants it’s online presence as a website or so. If you can be a web developer you would really be in demand in the market at the present stage.

According to research, on average, a javascript developer earns around $109,093 per year.

So you can make you the demand for a web developer.

Read : How long it takes to be a web developer?

Is Python harder than HTML?

And the answer to this is an obvious YES because HTML is not a coding language where is python is a coding language. 

Python

For learning HTML you don’t need any prior coding knowledge but for learning python you should have prior coding knowledge or it may take you way too long to learn python if you want to learn python from scratch.

Moreover has got a steep learning curve than HTML.

To sum up, I must say for python you need to have coding logics but for HTML you do not require coding logics.

Moreover, HTML is Frontend technology and python is used for backend technology.

Python basically deals with the database and serverside, unlike HTML.

How long does it take to learn PHP?

PHP is a server side language and a coding language as well, unlike the HTML. So, it is obvious that it is going to take longer to learn PHP.

PHP deals with servers and databases, so you have to be concerned about security and many more other factors. That’s why PHP has got a steep learning curve and it takes a lot of time to learn PHP.

PHP

With a good dedication and love for coding, you can manage to master PHP in around 1 month but that is really a variable number.

You may have passed by the question within yourself , if you should learn PHP?

Yes You should lean PHP, to know why and how it is useful,

Check out, Should I learn PHP?

How long does it take to become a web developer?

On an average, if you just want to learn the static technological stack that is HTML, CSS and JavaScript then it will take you around two weeks.

You call your self a Front end Developer after you learn HTML, CSS and Javascript. So to be a Front end Web developer you may take up to two weeks.

To be a Back end Developer it will take more time as it requires more coding knowledge than the front end technology.

And the rest technological stacks may have addon time according to its learning curve because different technological stacks have a different learning curve and require a different amount of time.

How long did it take me to become a web developer?

I had an engineering degree and a love for coding. So, it took me less time to cope up with web development.

It took me around Two weeks to learn HTML, CSS and javascript basics.

It took me around one and a half month to be a professional web developer with the backend knowledge of PHP.

Related read: How long it takes to be a web developer?

How long it takes to learn CSS?

How to code a website?

Categories: Development