Starting out as a Web Developer
Continuing from the “Starting out as a Software Engineer” series, We will branch out into one big and very exciting line of Software Development, Web Development a.k.a. Front-End Development.
In this series, we will build a basic web application that let fellow learners register with their basic information and select topics they want to learn next.
Update: I think build a software for organizing according subjects, categories, type, and authors, on shelves so they are easy to find will help us learn more on this topics than the earlier suggested what to learn app. So that’s what we will do.
Web development used to basically mean building and deploying websites. But as the industry grew, and it has grown tremendously in the last ten or so years, this definition as changed. Websites have gone from static pages mostly displaying text and images to complex services like Maps, Virtual Reality and even full Operating Systems. But beneath it all there have always been these three must know core technologies:
HTML
HyperText Markup Language: If websites were houses HTML would not only be the building blocks, but the entire frame from the ground to the roof. It determines where the doors will be located, how many windows, how tall the house might be, what material is the roof of the house made of ……..
The blocks in HTML are called Elements; Elements consist of one or two tags. Tags consist of angle brackets, tag name, any number of attributes and their values and a slash, indication end of tag definition to close the tag. A HTML element looks like this
There are two types of elements, ones that take text and other elements within them, like the one in the image above. These consist of two complimentary tags, opening tag and closing tag. They are usually used to control how the texts and tags within them are rendered or behave. On the other hand, some elements have just one tag, they usually do one specific thing. An example is <img src=`` /> used for displaying images on webpages.
We will learn more on elements and their functions as we progress in this series. If you, however, want to read more detailed articles on HTML and it’s elements, please visit the links below:
- Wikipedia
- Mozilla Developers Networks
- Even though it is said that its content are not always accurate, as a beginner I found w3school to be very helpful.
CSS
Cascading Style Sheet:
Ah! our house looks different now. Yes that’s CSS. It is a Styling language use for designing websites.
While HTML controls the structure of a web page, position of elements and so on, CSS defines what these element and by extension the whole web page looks like. From shape of elements to their colors as relating to other elements on the page to their height and width. It also controls how some elements behave when users interact with them by clicking on them or hovering their mouse over them.
Javascript
A programming language that was designed primary for building interactions on webpages: What type of keys do I need to enter this house, how do I use it, how do I switch on/off the light and many of such questions are answered by Javascript.
Javascript makes using sites interactive and enjoyable if properly written, it does the exact reverse if it is poorly written. With it you can tell browsers what to do if a user clicks on a button on your webpage, how users navigate from one page to another and what they can do on each page depending on who they are. You can fetch and send data to and fro your servers or other people’s servers if they permit you based on user request. Your site can even interact with other sites like Google or Facebook in real-time with Javascript.
All I have listed is just a scratch of what can be done with Javascript. It used to be considered a scripting language only useful for small animations in the browser, but now it is undeniably a full fledged programming language and one of the most powerful. It is now being used to build sites, mobile apps, games, Internet of Things (IoT), databases, embedded systems and lots of cool stuff.
You can read on the history of Javascript on Wikipedia. While there are many resources online to help you learn Javascript, and you should use as many of them as you can, here are, among others, the best reference for the language are:
We will do a lot of referencing to these sites through the course of this series. in fact, mostly likely, all through your career as a Javascript developer.
Now with that boring introduction over (thank God!), lets proceed with building your first web app.
Link to next lesson coming soon!
