Tutorial Web Development 101 (In Progress)

Craze

Craze

Alt + F4
Messages
229
Reaction score
163
Points
903
Intro
Web Development 101 is a thread to help teach you web development. I might continue updating this thread in the future or maybe turn into an eBook. I am in no way an expert so yeah. Hopefully, you'll learn some HTML, CSS, JavaScript and anything else on here. Please leave feedback on this, it's much appreciated.

Btw, the thread is kinda broken, so don't follow this tutorial yet

HTML
HTML stands for Hyper Text Markup Language, it is used to structure the webpage. In HTML, you can just write text, the tags just add extra (although, it is good to use tags for most things). Firstly, create a folder called something you'll remember (e.g: HTML learning). In that folder, make a file named "index.html". Open that folder in a text editor like Sublime Text. In the file put this in:
Code: 
<html>[/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=6][SIZE=4][SIZE=6][SIZE=4]
</html>
These are tags, with the text html in them. This basically shows the browser that this is a HTML file and should be shown like one. Inside the html tags, put
Code: 
<body>[/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=6][SIZE=4][SIZE=6][SIZE=4]</body>
This is where all the pages content will go. Our file should look like
Code: 
<html>[/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=6][SIZE=4][SIZE=6][SIZE=4]  <body>

  </body>
</html>
Inside the body, add
Code: 
<h1>My first webpage</h1>
. Well done, you've made your first website, you can change "My first webpage" to whatever you like. Your code should look like
Code: 
<html>[/SIZE][/SIZE][/SIZE][/SIZE]
[SIZE=6][SIZE=4][SIZE=6][SIZE=4]  <body>
    <h1>My first webpage</h1>
  </body>
</html>
I will be back soon adding to this! This is not the end.
 
Last edited:
Kyle Fardy

Kyle Fardy

Veteran
Donator
Messages
179
Reaction score
89
Points
888
maybe you should do something a little like this

HTML: 
<html lang="en">
    <head>
        <link href="https://www.project-insanity.co.uk/indexkek/css/bootstrap.min.css" rel="stylesheet"> <!-- This Is Your CSS (The Style Of The Html) -->
        <title>my first html project</title>
    </head>
    <body>
        <div class="col-sm-6 col-sm-offset-3"> <!-- The col-sm-offset-3 Centers The Panel -->
            <div class="panel panel-primary"><!-- This Is The Color Of The Panel, default = blank, primary = blue, success = green, danger = red info = light blue, wwarning = orange / yellow -->
                <div class="panel-heading"> <!-- This Is Where You Can Change The Name Of Your Panel's Title -->
                my first panel title
                </div>
                <div class="panel-body"> <!-- This Is Where You Add Things To Your Panel Such As An Input Area Shown Below -->
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="text" class="form-control" name="username"> <!-- There Are Several Types Of Inpput Boxes type="text" = text, type="password" = password, type="url" = link to a website, type="email" = email -->
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password">
                    </div>
                </div>
                <div class="panel-footer"> <!-- This Is Your Panel Footer We You Could Add A Button For Several Purposes -->
                <a class="btn btn-primary btn-block" href="https://www.cabconmodding.com">Button With A Link</a> <!-- You Could Add btn-block If You Wanted The Button To Be The Same Size As The Panel Footer -->
                <a class="btn btn-primary btn-block" onclick="showAnAlert(this)">Button That Opens An Alert Dialog</a> <!-- This Button Will Open A JavaScript Alert Dialog -->
                <button class="btn btn-primary btn-block" >Button</button> <!-- This Is A Simple Button -->
                </div>
            </div>
        </div>
    </body>
    <script> <!-- This Is What Happens When You Click On The Alert Dialog Button -->
        function showAnAlert(){
            alert("this is an alert box");
        }
    </script>
    <script src="https://www.project-insanity.co.uk/indexkek/js/jquery-2.2.4.min.js"></script> <!-- This Is Your JavaScript File (Can Be Used Is Things Such As An Ajax Login) -->
</html>
 
Harry

Harry

Certified Sick ℂunt
Premium Member
Messages
1,253
Reaction score
942
Points
973
Wouldn't call this an intro into 'Web Development', perhaps you, Phuced & I could join together on Discord and create a detailed PDF or thread with a lot of information, but try and make it easy to navigate?
 
Craze

Craze

Alt + F4
Messages
229
Reaction score
163
Points
903
Harry said:
Wouldn't call this an intro into 'Web Development', perhaps you, Phuced & I could join together on Discord and create a detailed PDF or thread with a lot of information, but try and make it easy to navigate?
Click to expand...
Yeah, sure. Hmu on discord §upreme#8107.
 
Top