A guide to learn developing web-page (Part I)
The best way to learn something is to start asking questions; to yourself or to others or in these modern days to GOOGLE!
It is often observed that switching from OOP to Javascript might be difficult at times since Javascript and OOP have their own way of doing things and since some terminologies are used differently (confusingly for some) in these languages. Some of us, despite of having access to the enormous data online still ponder upon the questions like: Huh, where should I being with all this data? Should I learn javascript/ Angular/ ExtJs etc ? Should I learn Javascript before HTML/CSS or the other way round ?
Seriously there is so much data online that we tend to confuse ourselves of where/ how to being. This article is for such people who are willing to learn designing the web-pages but do not know where/how to begin. This article is suited for (in)experienced programmers and can be best utilised by the people who are switching from OOP to Javascript.
Like I said above, the best way to learn is to ask questions. In this post I do the same, I pose some questions and answer them myself thereby guiding one to start developing a web-page (not a website in whole; that requires a lot!). Start developing a web-page and someday you'll eventually have the expertise to develop a website.
Lets begin!
How do I start learning web programming?
To start writing web pages one has to know HTML, CSS and Javascript (most commonly used).
Ah, can you please give me brief idea about HTML, CSS and Javascript ?
Sure.
- HTML is a Hyper Text Markup Language. It's basically to do with tags like <head> <body> <title> <img> <table> <script> etc. A simple HTML file looks as below
You can check out an example here.
- CSS is used to style the HTML element(s) i.e. say we are designing a facebook home page and we have a title "facebook" or say we have a facebook logo "facebook.svg"; what should the colour of the title text be? how should the logo appear i.e square or square with round edges? what colour should the sign-up button be of? All these queries are answered by styling the respective HTML elements using the CSS. A sample CSS file looks as below
- Javascript is used like a controller for the web pages. Suppose I click on a "facebook" logo, what should happen? Suppose I enter my username and password on gmail and click on sign-in what should happen? Say I type a message in my chat window on Google+ and hit enter what should happen? All these queries are answered by javascript. A sample HTML with javascript looks as below
You can check out an example here.
Nice, I'd like to learn/know more about this. How/Where do I begin?
You can start by understanding basic HTML tags. This should be pretty easy since the tags are english like keywords. Do not spend too much time on this; you do not need to know all the tags, just the basic understanding of tags(tag start, tag end which one goes where etc) would suffice to begin with.
I'd then suggest you to write an HTML page which has a username and password fields and a submit button. Open the file in browser and you'll see your learning in action.
Now try to play around the fields and the button. Try to position them one below the other, position them at the center of the page, change the color of the button, make it look blue or green etc. You will learn how to apply CSS style to the HTML element(s).
And then try to think of the button, what should happen when it is clicked? You can simply raise an alert message to the user alerting that the button is clicked or simply redirect the user to www.google.com when the button is clicked. You will get introduced to the role of javascript in web programming.
Good one buddy. Keep going on. Make a series.