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.
This provides a simple "Go Live" button in the bottom right corner to, well, go live!
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.
With the preview at the webpage being.
Sources to learn HTML
The Documentation for HTML is extensive.
W3Schools is without a doubt the most perfect place to understand and refer to for HTML, among several other things.
Mozilla 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 has a nice video in English that's basically a walkthrough.
- CodeWithHarry has both single and playlist 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 and the usual youtube platforms. Not detailing everyone of these, I would list the places that you may go through:
- W3Schools 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 is still really popular in this field.
- Traversey has some quick to learn tricks that you can remember.
- Thapa Technical 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 is perfect for sharing relatively small projects quickly.
- CodePen.io 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 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.
👋
Top comments (0)