Minggu, 21 Januari 2024

How to Coding For Beginner

 How To Coding For Beginner

    In this section we will learn about how to coding for beginner, in this digital era we must be able to take advantage of it. One of these parts is coding, which of course many people know what coding is nowadays. And in this blog i will teach you guys how to do coding from beginning until pro level. Alright to save time, lets just start the tutorial. Enjoy it !

    First of all, we need text editor to do it. I recommend you to use Visual Studio Code, how to download it you can click link below :
Ryvinte: How to download Visual Studio Code

Before we continue, if you don't understand what i explain about, you can scroll down and find the elements function.

    After you download it, back to the desktop, right click on the windows screen and choose new folder

After you choose new folder, open the folder and right click again on the folder then choose new > Text Documents , before you make new text documents you need to check the folder, click the view and Checklist the File Name Extensions, why you should do it? its to make you easier to find file what you looking for

After you make new text documents, change the name into Index.HTML
Right click on the Index.HTML and open with Visual Studio Code, finally you can open the folder in Visual Studio Code and choose the folder that you already made.

    After you open it, click the Index.HTML and you can do Ctrl + "+" to zoom it and make you easier to coding. Now lets start coding !
    Start with typing a "! + Backspace" and choose the 1 wrench, now you can see the standard of the html, click on the body column and try to type any word you want, for the example : Hello bray
Once you've done with the action, you can save it or enabled the auto save button and see your result in the browser. How to see it? open the folder that you put the Index.HTML , then right click again on it and choose the browser that you want to open, and boom ! you can see the result from it, its already been a website but of course we didnt want to make it as simple as that. Anyways its just a template to make a website, we dont need it, you can delete all the text and start again.
    
"< and >" has a function to open and close our coding. Type <html> and close with </html> , you need to connect it because its mean our program will start in <html> and will end in </html>, <html> have other function, its for our "parent" website or the outer component html from our coding and it will wrap up all our coding. after u write <html> click enter between "><" and write again <head> and close again with </head>, dont forget you must always open and closing it with the same type. <head> just like the name, its uses for our website head. After you type <head></head> do enter between "><" again and type <body> dont forget to close it again, in this body we can type anything we want cause its the body of the website, whatever we write it can exist in the html. I will make easy example, lets start with table that many people use it. After you make <body>, enter it and type a new component, since we want to make a table, type <table> and close it, enter again and type <tr> close it again. fill the <tr> with the "Title" for the title of the table, make another <tr> and write "Contents" for the contents of the table, It will be like this :
    If already like that, save it and check the browser it will be like this :
    Why its not appear a table? because we did not style it yet, to style it delete the recent "<tr>Title</tr> and <tr>Contents</tr> and type another element "<thead>" close it and enter, then type again "<tr>" close it and enter again and last, type again "<td>" and close it again. Type in the "<td>" a TITLE. After it make a new element below "</thead>" and type "<tbody>" and make same as the thead section, and type CONTENTS in the "<td>" columns, you will get like this :
    Now its actually already a table, but we need to design it and make it like a real table, to design it click the "<table>" section and type border="1"> , now we already get the template for the table, to make it more categories in the table, we can copy and paste the TITLE column and re-type it with other categories like this :
This the result :
   BOOM! And now we done with the table, you can save the progress and check the result on the browser, this is the first step to coding, you need to know each component's function. From the explanation above, we learn the component function :
                <html></html> : This is the parents of the website/outer component, its wrap up all of our                                                     coding.
                <head></head> : This is the head of the website, its usually located at the top of the website.
                <body></body> : This is the body of the website, located in the middle of the website, usually                                               its the content of the website.
                <table></table> : This element is used if you want to make a table for your website, this has                                                 same function with the <html>.
                <thead></thead> : This element is same as the <head> function but its for table.
                <tbody></tbody> : This element is same as the <body> function but its for table.
                <table border="1"> : This is template for the table, you can type any number aside from that.


       Alright Vinters! Thats all for today, hopefully you will understand what i explain about. Maybe next section i will make a video for it to make it easier to understand. Support me by comments in this blog and follow my Instagram : Ry.vinte (@ryvinte) • Instagram photos and videos to see more info about it! Vale et gratias!



#howtocoding
#codingforbeginner
#coding
#beginner
#caracodingpemula
#codingpemula


1 komentar:

How to download Visual Studio Code