1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Tutorial Web Development 101 (In Progress)

Discussion in 'HTML/CSS Tutorials' started by Craze, Dec 6, 2017.

  1. Craze

    Craze Senior Moderator

    219
    151
    143
    Credits:
    681
    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: Dec 6, 2017
    Setsuna likes this.
  2. PhucedMODZ

    PhucedMODZ Web Development Trial Moderator Staff Member Donator

    104
    72
    203
    Credits:
    797
    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>
    
     
    Setsuna likes this.
  3. PhucedMODZ

    PhucedMODZ Web Development Trial Moderator Staff Member Donator

    104
    72
    203
    Credits:
    797
    dam lol i forgot to tab where the buttons are
     
  4. Harry

    Harry I'm 'Serious'ly a better Developer Premium Member

    974
    764
    278
    Credits:
    4,059
    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?
     
  5. Craze

    Craze Senior Moderator

    219
    151
    143
    Credits:
    681
    Yeah, sure. Hmu on discord ┬župreme#8107.
     

Related Content

  1. Marc Swinther
  2. faze rain
  3. Marc Swinther
  4. WW2
  5. TryRed

Share This Page