Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Looking for tips and pointers for HTML

brant_shaw

New Coder
I am new to coding, i have been learning HTML and php for the past few days and ive been working on an index page for a make believe website called Code City, i am wondering if i could get some pointers on my code, how i could be more efficient or do something better etc.

The HTML file is attached as a .zip
 

Attachments

  • index.zip
    2.3 KB · Views: 1
Welcome to the world of codeing :D we need more fresh talent its getting a bit old in here :D let me load up your code and check out your work and give you some ideas :D I will ask though do you take input well or not so well lol
 
Thank you i appreciate it, and all input is welcome anything will help i’ve only been learning for around 4 days now
Thats good to hear so what im going to do is design a very basic but formal website for you quickly so you can see how i code and layout. everyone has there own style. First thing i would say is learn Boot strap next indent your code it makes things so much easier to read and next move your styles to a style sheet. trust me these 3 things will help you out so much :D
 
okay so this might not be amazing code as i am getting tired as hell lol and i could probably make it a bit more readable but check it out and see what i mean :D

https://www.iprecious.co.uk/Files/Happy To Help.zip the file is a bit big so i had to put it on my server, also take a note of how i layout the files, i have images and style sheets in there own folders to make life easier.

Also the whole thing was built with bootstrap so its all mobile ready :)
 
HTML:
<!doctype html>
<html lang="en">

    <head>
  
        <title>Its Off To Work We Go</title>
        <meta name="description" content="I feel so pretty :D">
        <meta name="author" content="Simon Gilbert">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="CSS/Style.css" rel="stylesheet">

        <!-- LEARN THIS ASAP Bootstrap CSS -->
           <link rel="stylesheet" href="[URL]https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css[/URL]" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
           <script src="[URL]https://code.jquery.com/jquery-3.2.1.slim.min.js[/URL]" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="[URL]https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js[/URL]" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="[URL]https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js[/URL]" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <script type="text/javascript">

            $('.carousel').carousel({
              interval: 2000
            })

        </script>

    </head>

    <body>

            <!-- Top Container Start -->
                        
        <div class="container">

                <nav class="navbar navbar-expand-lg navbar-light">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#">Disabled</a>
                            </li>
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                    </div>
                </nav>

            </div>

            <!-- Top Container End -->

            <!-- Slider Start -->

            <div id="slider">

                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class=""></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2" class="active"></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="carousel-item active">
                      <img class="d-block w-100" src="Images/SlideOne.jpeg">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Slide one</h5>
                        <p>One our Way Baby</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="Images/SlideTwo.jpeg">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Slide Two</h5>
                        <p>Just Amazing</p>
                      </div>
                    </div>
                    <div class="carousel-item">
                      <img class="d-block w-100" src="Images/SlideThree.jpeg">
                      <div class="carousel-caption d-none d-md-block">
                        <h5>Slide Three</h5>
                        <p>Now im showing off</p>
                      </div>
                    </div>
                  </div>
                  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                  </a>
                  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                  </a>
                </div>

            </div>

            <!-- Slider End -->
                        
        <div class="container">

            <div class="row">

                <div class="col">
                        <form>
                          <div class="form-row align-items-center">
                            <div class="col-11">
                              <label class="sr-only" for="inlineFormInputName">Enter your email</label>
                              <input type="text" class="form-control" id="inlineFormInputName" placeholder="Enter your email and sign up">
                            </div>
                            <div class="col-1">
                              <button type="submit" class="btn btn-primary">Sign up</button>
                            </div>
                          </div>
                        </form>

                </div>

            </div><!-- end of row -->

            <div class="row">

                <div class="col">

                    <div class="card-deck">
                      <div class="card">
                        <img class="card-img-top" src="Images/SlideOne.jpeg" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        </div>
                        <div class="card-footer">
                          <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                      </div>
                      <div class="card">
                        <img class="card-img-top" src="Images/SlideTwo.jpeg" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                        </div>
                        <div class="card-footer">
                          <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                      </div>
                      <div class="card">
                        <img class="card-img-top" src="Images/SlideThree.jpeg" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">Card title</h5>
                          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                        </div>
                        <div class="card-footer">
                          <small class="text-muted">Last updated 3 mins ago</small>
                        </div>
                      </div>
                    </div>

                </div>

            </div><!-- end of row -->

            <div class="row">

                <div class="col-12">

                    <h1>Little Bit of checky Lorem ipsum</h1>

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida finibus risus vitae sagittis. Praesent magna purus, fringilla eu viverra ac, tempor at ex. Donec quis lacus nibh. Mauris fermentum eleifend quam sit amet ultrices. In feugiat, risus non imperdiet pharetra, ex dolor dictum dolor, eget rhoncus orci tortor vel nisl. Sed vulputate lectus vel hendrerit malesuada. Integer id justo congue mi porta interdum non sit amet libero. Aliquam congue purus quis ultrices tincidunt. Quisque egestas odio libero, et auctor urna luctus id. Maecenas interdum consectetur enim, facilisis tempus nisl tincidunt non.

                        Vivamus facilisis bibendum vulputate. Sed finibus, ipsum vitae pharetra mollis, quam erat sodales purus, sit amet tempus mi diam eu augue. Sed lobortis dignissim ipsum, nec condimentum erat elementum vitae. Praesent justo eros, sagittis quis cursus a, dapibus sed leo. Etiam mi diam, aliquam sed neque auctor, hendrerit molestie justo. Fusce maximus velit risus. Phasellus non tempus urna. Phasellus risus arcu, pellentesque in justo vitae, condimentum eleifend diam. Curabitur at felis sit amet justo viverra fermentum accumsan cursus arcu. Aenean dictum velit leo, ac congue augue vulputate non. Nullam eu lacus in tortor ornare fermentum.

                    </p>

                </div>

            </div><!-- end of row -->

        </div><!-- end of container -->

         <footer class="footer card-footer">
          <div class="container">
            <span class="text-muted">Created By Simon Gilbert :D.</span>
          </div>
        </footer>

    </body>

</html>
 
Last edited by a moderator:
CSS:
/*---- General Code ----*/

.row {
    margin-top: 40px;
}

/*---- Slider Code ----*/

.w-100{
    max-height:500px;
}

/*---- Image Cards Code ----*/

.card-img-top {
    max-height: 200px;
    height: 100%;
}
 
Last edited by a moderator:
@simong1993
Data should not be loaded externally, get used to using the data locally!
e.g. the js and css files from Bootstrap
Everything that is loaded externally cannot be controlled and can be used for malicious code.
 
@simong1993
Data should not be loaded externally, get used to using the data locally!
e.g. the js and css files from Bootstrap
Everything that is loaded externally cannot be controlled and can be used for malicious code.

yes and normaly i do but for the sake of learnng and file size at the start his best bet would be to use a external link. this will save issues later on and make the file size smaller to alow a upload.
 
He has to download bootstrap then link it correctly, at the moment hes using inline styles so im not sure hes learned that far. Let the guy crawl before you force him to run :laugh:
 
I agree with @Tealk, I prefer having everything locally. But due to you just starting off just keep that in mind. However, reviewing your code I'd advise adding more comments (I'm one to talk), you want to be able to understand everything in case you need to fix something or someone needs to access your code. And to clear up some clutter perhaps just like your css have your javascript in an external file. You can view that here https://codeforum.org/threads/what-is-javascript.117/

In short, just add <script src=”path/to/myjs.js”></script> in between your <head> tags.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom