Entering into the Web-Dev World

rittik-ghosh — Tue, 17 Aug 2021 14:47:43 +0000

Hi I am Rittik and I am still quite new to this development world. I came to know about web-dev when I was in my 8th semester when I was doing my internship with a fin-tech start-up. ( Yes, Of course I am an engineer but I took instrumentation as my branch i.e. not CS). Before that I always was scared to code and I had a stigma attached to it that it's too damn difficult.

I couldn't be more wrong. Coding is not difficult it just requires patience and persistence. I started with JAVA learned the semantics did some problems but I couldn't see the visible output, nothing being created was visible and then came the web-dev with its HTML,CSS and javaScript to rescue me. That is the beauty of web-dev, whatever you learn in web-dev you can implement it, develop it and see it building in front your eyes and it's just magnificent.

I stated with HTML the skeleton of the web and gave it around 5 days. I learned about the HTML tags and about how they are placed and used in a website. The id and class attributes for each tag along with attributes like type, placeholder etc gave me an idea about how to modify a simple tag and make it more descriptive and elaborate.
For eg. the label tag can be grouped with the input tag so that the browser can understand for which input it has been placed.

 <label for="dob">Date Of Birth</label>
<input id="dob" type="date" />

Next I stated learning about the CSS - "the one that makes it all beautiful". Using the id's, class and tags we can target specific elements of the HTML in the website and change the way they look. It is one of the things that you would want to be perfect but there is always one element that goes out of alignment but it's worth all the efforts.
For eg. you can change the heading colour, it's size and it's positioning all with the help of CSS.

.heading{
font-size:3rem,
color:red,
font-weight:bold
}

The logic to the website comes from the javaScript and hence, it's called the brains of the website (Don't think that there are any similarities between java and javaScript, it's the same as that of a car and a carpenter). This is the scripting language that is mostly being used by everyone in world and why not it's astonishing what one can achieve using this language. It can detect each and everything that you do while you are in a particular website and it can change the CSS depending upon your action.

The field is vast and I am still to learn many things from frameworks to databases but I am really liking it and hope my journey to become a fullstack remains as exucting as it is now.

HTML Tag's that can make your life easy

rittik-ghosh — Tue, 17 Aug 2021 12:57:05 +0000

Hi, this is Rittik a newbie to the web-development world.Like all of the rest I started my journey into the world of web-dev with HTML or commonly known as the skeleton of the web-dev world. So, before diving into the HTML tags that you might find useful I would like to highlight somethings about this HTML language. One of the most important thing being "you cannot hack NASA or any system for that matter using HTML!" and why is that ??

It is because it is the standard markup language for documents designed to be displayed in a web browser. Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. Hence, it is indeed the skeleton of the websites upon which we use various other things like CSS,JS etc. to make it more beautiful and functional.

All of the details above seems exhausting but it has one of the most useful clue hidden inside it and that is it is a Semantic language. It means that there are many tags that exists in HTML that help the browser understand it's meaning and hence, makes your site function exactly as you intend to (Also too some extend the more you use the correct semantic tags the less you have to worry about the site's responsiveness).Hence, I present to you few HTML tags that will help you (I guess!!).

The first few tags mentioned will help you make great form's.

fieldset tag <fieldset></fieldset>
This tag helps you to group together a set of input elements that go together. It also adds a nice little box around the input elements that are grouped inside it.
legend tag <legend></legend>
This tag once included into the fieldset tags to get a nice looking label inside the border surrounding the input tags.
datalist tag <datalist></datalist>
The tag specifies a list of pre-defined options for an element and makes it a searchable drop-down(Normally we would have gone for some custom JS but it's arleady existing in HTML).The tag is used to provide an "autocomplete" feature for elements. Users will see a drop-down list of pre-defined options as they input data. The element's id attribute must be equal to the element's list attribute (this binds them together).

Code might look like this:-

<fieldset>
<div>
<legend>Favorites</legend>
</div>
<div>
<input list="fruit-list" type="text">
<datalist id="fruit-list">
  <option value="Banana">
  <option value="Apple">
  <option value="Orange">
  <option value="Grapes">
  <option value="Watermeleon">
</datalist>
</div>
</fieldset>

Some input types that can inculcated to the forms:

a) <input type="color"> - This tag will help you create a
color picker as an input. (Isn't it great!!).

b) <input type="time"> - You can actually store time as an
input.

Apart from these there are many tags in HTML that help you make you website really great like *<navbar>,<article>,<section> *etc. Hope this article make your forms better.

DEV Community: rittik-ghosh

Entering into the Web-Dev World

HTML Tag's that can make your life easy