Learn HTML and CSS from Scratch - 10 Easy Steps

Learning Web Development has never been so easy. Understanding the concepts of Web

Development from its roots is the most important thing. It is a widely accepted concept that

HTML & CSS are the nucleus of Web Development. We provide you with most reliable

resources for you to understand right from the basics to the advanced levels of HTML & CSS.

Step 1 - Learn Basics of HTML and CSS (Beginner)

This material gives you enough exposure to the

basics of HTML and CSS. For personal assessment
you can try quizzes. Enough examples are there to
practice, and you can also experiment with the codes
in its editor.
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/

Step 2 - Learn by Doing (Beginner)

Want to experience learn by coding? then code

academy is your choice
https://www.codecademy.com/learn/web

Step 3 - Understand HTML Layouts (Advanced)

Building home and building well planned home are

two different things, now we have good
foundational strength we are now ready to become
creators, designers what not !!!. This article helps
you find the techniques to create beautiful layouts.
Layout play very critical role for any web site.
https://www.codementor.io/css/tutorial/4-differe
nt-layout-techniques-create-single-page
http://learnlayout.com/

Step 4 - Understand HTML Forms (Advanced)

Its very important that you don't test the patience of

user when asking input, so forms are very important
for any web application. Sign Up, login, feedback,
Comments.. all needs to be presented to user with
clear and concise style. Go and play with forms.
Don't forget !!! - Practice makes man perfect
http://learn.shayhowe.com/html-css/building-forms/
http://www.javascript-coder.com/html-form/html-for
m-tutorial-p1.phtml

Step 5 - Understand CSS Positioning (Advanced)

Clean home has things rightly placed - interior

designing !!!, when building website elements
positioning is very important and needs special
attention. No ESCAPE from coding.. code it .. learn it..
https://www.codecademy.com/courses/advanced-
css-positioning/0/1
http://learn.shayhowe.com/advanced-html-css/de
tailed-css-positioning/

Step 6 - Build a project using HTML and CSS

(Intermediate)

Practice more by building a project -

http://www.theodinproject.com/courses/web-d
evelopment-101/lessons/html-css

Step 7 - Learn about Responsive (Intermediate)

Mobile, Tablet, Desktop - devices with multiple screen

sizes. Ahhhh.. my site works only on desktop, Do I need to
build separate sites for mobile and tablet. Wait Wait Wait
!!! We have a responsive web design concepts.. go explore
them and get your website flexible to work on any device
http://www.w3schools.com/css/css_rwd_grid.asp

Step 8 - Best Practices (Advanced)

When you write codes you don’t want to make any

mistakes. To write clean and error free codes it is
required to follow some procedures that are accepted
by the developers worldwide. Here are some
resources to write proper codes without any errors.
http://learn.shayhowe.com/html-css/writing-
your-best-code/
https://code.tutsplus.com/tutorials/30-css-b
est-practices-for-beginners--net-6741

Step 9 - Testing time - Assignments (Shortcut to

Success)

Learning doesn’t work when you have not tested what

you learnt. To make your HTML & CSS learning fruitful
you should test yourself with some assignments. Here
are some assignments for you to practice.
http://www.landofcode.com/html-exercises/
http://www.landofcode.com/css-examples/

Step 10 - Additional Resources

Having doubt whether the learning is enough or

not? Here are some additional resources which
can be helpful.
https://www.zeolearn.com/magazine/html-and-
css-resources-stepping-into-web-development

w w w. ze ol e a rn. c om