A Peek Into WebD
Tags: codenewbie, html, css
Published: 2022-05-12 13:43:00

The fact that you're reading this blog right now is sufficient to support the fact that Web and it's Development has flooded the coding community. We can't imagine learning and sharing without our webpages.
Naturally, learning how to create such webpages in the early phase of coding is a bonus. Fortunately, there are various sources and explanations of how to begin with this idea, using a certain language called HTML. To make these pages presentable we use another handy tool; CSS.

This blog will caress over the approach that I believe is certainly satisfactory to help you understand HTML and CSS.

#A Handy Setup
Since the output of whatever code you write would be in a webpage, it feels handy to be able to launch the page quickly and see the changes made live.
Fortunately, if you're using VSCode Editor(and I have no idea why you're not) it has such extensions that, although mentioned in every good tutorial, is still worth adding in this blog. It's a basic Live Server launcher; this is the one that I use and is probably the most popular.
![Live Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy0fvw0pfa3pr18iuujp.png)
This provides a simple "Go Live" button in the bottom right corner to, well, go live!
![Go Live Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91n5mjzonnag17hs45gt.png)
 Again, a minute detail but a life saver.
 

#HTML

Web browsers, be it Chrome or Firefox, have to agree upon a certain document type that they can show, making it universal. This happens to be a certain **HyperText Markup Language** or **HTML** for short, that is basically a method of creating elements and objects in a certain way that browsers can understand. These are basically some <> and </> tags that can be very powerful depending on what the tag does. 

Every file that has some html code(so like index.html file) will begin with a <!DOCTYPE html>  tag. Following is an example.
![A basic html code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo28ccfaur6ytiqzrnf7.png)

With the preview at the webpage being.
![Output for above code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/us114k8308z5h4w51mgr.png)

##Sources to learn HTML

The Documentation for HTML is extensive.

* [W3Schools](https://www.w3schools.com/html/html_intro.asp) is without a doubt the most perfect place to understand and refer to for HTML, among several other things.

* [Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics) has some handy guides under MDN that you can always use to freshen up your knowledge.

Some video tutorials might include the following; I would also try to link some here.
* [Traversy Media](https://www.youtube.com/watch?v=UB1O30fR-EE) has a nice video in English that's basically a walkthrough.
* CodeWithHarry has both [single](https://www.youtube.com/watch?v=BsDoLVMnmZs) and [playlist](https://www.youtube.com/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg) wise videos in Hindi with depth-to-time tradeoff. Quite frankly, I think his playlist is more than enough to learn and create some projects.

##CSS

Of course our next priority would be to make this page presentable by styling the various elements present. This is where **Cascade Sheet Styling** or **CSS** comes in.

There are certain things that you would already expect CSS to perform, such as changing font or its color; resizing images and so on. But a tricky part of CSS for beginners is to grasp how to position the elements on the page the way you want, and also how to make the site "Responsive" i.e. the idea that our webpage should look presentable on screens of all sizes, be it a desktop or a phone.
A recommended way to tackle this problem is to plan early with position methods such as "float" and "grid". These are vastly discussed in [CSS-Tricks](https://css-tricks.com/) and the usual youtube platforms. Not detailing everyone of these, I would list the places that you may go through:

* [W3Schools](https://www.w3schools.com/Css/) is always the place to go when you want to check any query that pops into your mind. Just don't get carried away with the tons of ideas and definitions that it has to offer.
* [CwH](https://www.youtube.com/watch?v=u5-K_ua9sOw) is still really popular in this field.
* [Traversey](https://www.youtube.com/watch?v=yfoY53QXEnI) has some quick to learn tricks that you can remember.
* [Thapa Technical](https://www.youtube.com/watch?v=hkQv0NIxKQY) also comes to mind.

These may look overwhelming at first, but the main idea is to understand how you learn-as-you-create. One can not expect to remember everything at the end of a course, but such a workflow is appreciated in the long run.

##Platforms

There are certain sites that let you showcase your website on the go, together with the code present. These are really handy if you quickly want to share your code and/or the expected UI, so usually what we call the "Front-End". Some of the popular ones are:

* [CodeSandbox.io](https://codesandbox.io/) is perfect for sharing relatively small projects quickly.
* [CodePen.io](https://codepen.io/features/) will do just fine.


##Closing Thoughts

The above mentioned flow should be enough to get one started in the WebD field. We have, of course, not discussed about the ocean of development supported by JavaScript and the modules created for it. This is so as to prevent overwhelming of a developer. Still, interested devs can be channeled towards [this](https://dev.to/emperoryp7/web-development-roadmap-for-beginners-3p53) blog that I actually started my whole journey of WebD from. It includes clever framework that are based on JavaScript, right after a basic intro of JS itself.

:wave: