3
\$\begingroup\$

I made my first website from scratch using HTML and CSS. It's a doughnut shop

I did this as a way to practice what I have learned so far from an HTML and CSS course that I am taking. I would appreciate anyone's feedback on this. I am fairly new to coding and your feedback will help continue learning and improving in these skills.

<!--the home page of my website-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Master Doughnut Shop</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
        integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
    <link rel="stylesheet" href="donutShop.css">
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Kaushan+Script&family=Staatliches&display=swap&family=Advent+Pro:wght@500&display=swap" rel="stylesheet">
</head>

<body>
    <nav id="mainNav" class="navbar navbar-expand-md navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#"><i class="fas fa-compact-disc"></i> MASTER DOUGHNUT SHOP</a>
            <button class="navbar-toggler justify-content-end align-items-end" type="button" data-toggle="collapse" data-target="#topNav"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end align-items-end" id="topNav">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="donutShop.html">HOME <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="menu.html" target="_blank">MENU </a>
                    <a class="nav-item nav-link" href="contact.html" target="_blank">CONTACT US</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="jumbotron px-0"></div>

    <section class="container-fluid px-0">
        <div id="firstSec" class="row align-items-center content">
            <div class="col-md-6 order-2 order-md-1 mt-0">
                <img src="assorted.jpg" alt="various donuts" class="img-fluid">
            </div>

            <div class="col-md-6 text-center order-1 order-md-2">
                <div class="row justify-content-center">
                    <div class="col-10 col-lg-8 mb-5 mt-5 mb-md-0 ">
                        <h2>ABOUT</h2>
                        <i class="fas fa-compact-disc"></i>
                        <p><span id="welcome"><strong>WELCOME!</strong></span> Master Doughnuts is a family-owned business. We have proudly served 
                            The Colony community since 1992. We offer an assortment of donuts for all tastes, as well
                            as other breakfast items. 
                        </p>
                        <p>Our main satisfaction is being able to see our guests start their day with a smile.
                            We can't wait to meet YOU!
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="secondSec" class="row align-items-center content">
            <div class="col-md-6 text-center">
                <div class="row justify-content-center">
                    <div class="col-10 col-lg-8 mt-5 mb-5 mb-md-0">
                        <h2>LOVE IS SWEET</h2>
                        <i class="fas fa-compact-disc"></i>
                        <p>Start your day with our beautifully crafted donuts and a cup of freshly-brewed coffee. We 
                            have options for everyone to enjoy. Visit our <a id="menuLink" href="menu.html" target="_blank"><strong>MENU</strong></a> to explore all options!
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <img id="stacked" src="sharingDonuts.jpg" alt="various donuts" width="100%" height="415px">
            </div>
        </div>
    </section>

    <footer id="bottomNav" class="navbar-fixed-bottom">
        <div class="container text-center">
            <h4>Master Doughnut Shop</h4>
            <h6>5201 South Colony Blvd, The Colony, TX 75056</h6>
            <h6>(469) 362-2333</h6>
        </div>
    </footer>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/f1298564b2.js" crossorigin="anonymous"></script>
    <script>
        $(function () {
            $(document).scroll(function () {
                var $nav = $("topNav");
                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
            })
        })
    </script>
</body>

</html>

<!--the menu page of my website-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
        integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
    <link rel="stylesheet" href="donutShop.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Kaushan+Script&family=Staatliches&display=swap&family=Advent+Pro:wght@500&display=swap&family=Rajdhani:wght@500&display=swap&family=Cantarell:ital@1&display=swap"
        rel="stylesheet">
</head>

<body>

    <nav id="mainNav" class="navbar navbar-expand-md navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#"><i class="fas fa-compact-disc"></i> MENU</a>
            <button class="navbar-toggler justify-content-end align-items-end" type="button" data-toggle="collapse"
                data-target="#topNav" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end align-items-end" id="topNav">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="donutShop.html">HOME <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="menu.html">MENU </a>
                    <a class="nav-item nav-link" href="contact.html" target="_blank">CONTACT US</a>
                </div>
            </div>
        </div>
    </nav>

    <h2 id="classics" class="text-center">CLASSICS</h2>

    <div class="container d-flex justify-content-center">
        <div class="row">
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="glazedDonut.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">GLAZED</h5>
                    </div>
                </div>
            </div>
        
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="chocolateDonut.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">CHOCOLATE ICED</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="strawberryDonut.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">STRAWBERRY ICED</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container d-flex justify-content-center">
        <div class="row">
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="mapleDonut.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">MAPLE ICED</h5>
                    </div>
                </div>
            </div>
        
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="powderedSugar.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">POWDERED SUGAR</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="cinnamonDonut.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">CINNAMON SUGAR</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h2 id="favorites" class="text-center">BREAKFAST FAVORITES</h2>

    <div class="container d-flex justify-content-center">
        <div class="row">
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="croissant.jpg" class="card-img-top" alt="croissant">
                    <div class="card-body">
                        <h5 class="card-title text-center">CROISSANT</h5>
                    </div>
                </div>
            </div>
        
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="miniDonuts.jpg" class="card-img-top" alt="mini donuts">
                    <div class="card-body">
                        <h5 class="card-title text-center">MINI DONUTS</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="sprinkles.jpg" class="card-img-top" alt="donuts with sprinkes">
                    <div class="card-body">
                        <h5 class="card-title text-center">DONUTS WITH SPRINKLES</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container d-flex justify-content-center">
        <div class="row">
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="donutHoles.jpg" class="card-img-top" alt="donut picture">
                    <div class="card-body">
                        <h5 class="card-title text-center">DONUT HOLES</h5>
                    </div>
                </div>
            </div>
        
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="pigsinablanket.jpg" height=190px  class="card-img-top" alt="pigs-in-a-blanket">
                    <div class="card-body">
                        <h5 class="card-title text-center">PIGS-IN-A-BLANKET</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="birthdayDonut.jpg" class="card-img-top" alt="birthday donut">
                    <div class="card-body">
                        <h5 class="card-title text-center">BIRTHDAY DONUTS</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <h2 id="bev" class="text-center">BEVERAGES</h2>

    <div id="beverages" class="container d-flex justify-content-center">
        <div class="row">
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="coffee.jpg" class="card-img-top" alt="coffee">
                    <div class="card-body">
                        <h5 class="card-title text-center">COFFEE</h5>
                    </div>
                </div>
            </div>
        
            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="orangeJuice.jpg" class="card-img-top" alt="orange juice" height="190px">
                    <div class="card-body">
                        <h5 class="card-title text-center">ORANGE JUICE</h5>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 mb-3">
                <div class="card" style="width: 18rem">
                    <img src="milk.jpg" class="card-img-top" alt="milk">
                    <div class="card-body">
                        <h5 class="card-title text-center">MILK</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer id="bottomNav" class="navbar-fixed-bottom">
        <div class="container text-center">
            <h4>Master Doughnut Shop</h4>
            <h6>5201 South Colony Blvd, The Colony, TX 75056</h6>
            <h6>(469) 362-2333</h6>
        </div>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/f1298564b2.js" crossorigin="anonymous"></script>
</body>

</html>

<!--the contact page of my website-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
        integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
    <link rel="stylesheet" href="donutShop.css">
    <link
        href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Kaushan+Script&family=Staatliches&display=swap&family=Advent+Pro:wght@500&display=swap&family=Rajdhani:wght@500&display=swap&family=Cantarell:ital@1&display=swap"
        rel="stylesheet">
</head>

<body id="contact">
    <nav id="mainNav" class="navbar navbar-expand-md navbar-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#"><i class="fas fa-compact-disc"></i> CONTACT US</a>
            <button class="navbar-toggler justify-content-end align-items-end" type="button" data-toggle="collapse"
                data-target="#topNav" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end align-items-end" id="topNav">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="donutShop.html">HOME <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="menu.html" target="_blank">MENU </a>
                    <a class="nav-item nav-link" href="contact.html">CONTACT US</a>
                </div>
            </div>
        </div>
    </nav>

    <form id="form" class="container">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputFirstName">First Name</label>
                <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
            </div>
            <div class="form-group col-md-6">
                <label for="inputLastName">Last Name</label>
                <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group col-md-6">
                <label for="inputEmail4">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="[email protected]">
            </div>
            <div class="form-group col-md-6">
                <label for="inputPhone">Phone Number</label>
                <input type="text" class="form-control" id="inputPhone" placeholder="123-456-7891">
            </div>
        </div>

        <div class="form-group">
            <label for="exampleFormControlTextarea1">Comments and Questions</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>

        <button id="submit" type="submit" class="btn">Submit</button>
    </form>

</body>

</html>

/*Stylesheet for Master Doughnut Shop project*/

body{
    background-color: rgba(247, 187, 196, 0.945);
}

body p{
    font-family: 'Architects Daughter', cursive;
}

.jumbotron {
    background: url('patrick-fore-NnTQBkBkU9g-unsplash.jpg') no-repeat center center;
    background-size: cover;
    height: 615px;
    width: 100%;
    margin-bottom: 0px;
}

#topNav .nav-link{
    color: white;
    font-size: 1.5rem;
    font-family: 'Staatliches', cursive;
}

#mainNav .navbar-brand{
    color: white;
    font-size: 2.1rem;
    font-family: 'Kaushan Script', cursive;
    font-weight: 900;
}

#mainNav .fas{
    color: #ea1c2c;
}

#topNav .nav-link:hover{
    color: #ea1c2c;
}

.navbar .scrolled{
    background: transparent;
    transition: bacground 200ms;
}

@media (max-width: 1200px){
    #mainNav .navbar-toggler{
        float: right;
    }
}

#firstSec{
    padding-top: 0%;
    margin-top: 0px;
}

#firstSec h2{
    font-family: 'Kaushan Script', cursive;
}

#firstSec i{
    font-size: 30px;
    color: white;
    padding-top: 5px;
    padding-bottom: 10px;
}

#firstSec p{
    font-size: 1.25rem;
}

#secondSec{
    padding-top: 0%;
    margin-top: 0px;
}

#secondSec h2{
    font-family: 'Kaushan Script', cursive;
}

#secondSec i{
    font-size: 30px;
    color: white;
    padding-top: 5px;
    padding-bottom: 10px;
}

#secondSec p{
    font-size: 1.25rem;
}

.content{
    margin-top: 75px;
}

#stacked .img-fluid{
    max-height: 10px;
}

#welcome{
    color: #ea1c2c;
}

#menuLink{
    color: #ea1c2c;
}

#bottomNav{
    background-color: plum;
    height: 98px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#bottomNav h4{
    font-family: 'Kaushan Script', cursive;
    color: white;
    padding-top: 10px;
}

#bottomNav h6{
    font-family: 'Advent Pro', sans-serif;
    color: white;
    font-size: 15px;
}

h1{
    padding-top: 5%;
    padding-bottom: 3px;
    font-family: 'Kaushan Script', cursive;
}

#classics{
    padding-top: 5%;
    padding-bottom: 2%;
    font-family: 'Cantarell', sans-serif;
    font-size: 2.75rem;
    color: #ea1c2c;
}

#favorites{
    padding-top: 2%;
    padding-bottom: 2%;
    font-family: 'Cantarell', sans-serif;
    font-size: 2.75rem;
    color: #ea1c2c;
}

#bev{
    padding-top: 2%;
    padding-bottom: 2%;
    font-family: 'Cantarell', sans-serif;
    font-size: 2.75rem;
    color: #ea1c2c;
}

#beverages{
    padding-bottom: 2%;
}

.card h5{
    font-family: 'Architects Daughter', cursive;
    font-weight: 400;
}

.card .card-body{
    background-color: plum;
}

.card{
    border-color: plum;
}

#form{
    padding-top: 6%;
    max-width: 1000px;
}

#contact{
    background: url(pink.jpg) no-repeat;
    background-position: center;
}

#submit{
    color: white;
    background-color: #ea1c2c;
    margin-top: 10px;
}

label{
    color: #ea1c2c;
    font-family: 'Advent Pro', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
}
\$\endgroup\$
3
  • \$\begingroup\$ Yes, when I open the site on Chrome my image in the jumbotron covers the entire width and height. However, when I open it on Firefox the image doesn't cover the entire height. You can slightly see a little bit of the About section begin to show up. \$\endgroup\$
    – PriscillaM
    Commented Jun 28, 2020 at 17:35
  • \$\begingroup\$ Oh, you meant responsiveness in that way. I would probably have been able to help with the other meaning, however not with this one. \$\endgroup\$
    – Peilonrayz ♦
    Commented Jun 28, 2020 at 17:41
  • \$\begingroup\$ I also notice the images are slow to load especially in the Menu page. Any recommendations for improving that? \$\endgroup\$
    – PriscillaM
    Commented Jun 28, 2020 at 17:42

1 Answer 1

Reset to default
2
\$\begingroup\$

First off, I'm not a big fan of Bootstrap. It bloats the HTML with additional elements and classes. Also as a beginner it stops you from learning standard CSS.

Avoid using IDs to apply styles. IDs have a high specificity making organizing the style sheet more difficult. Use classes instead.

Don't write text in ALL CAPS. Use normal English capitalization and change the display with text-transform: uppercase in the style sheet. This helps screen readers understand and pronounce the text better, for example, by able to distinguish between words and abbreviations (e.g. "us" vs "U.S.").

The proper elements for what they are meant for. H4 and H6 are for headlines, not for addresses. The address element would be more appropriate.

Don't open links (especially "normal" ones inside the site) in new windows/tabs with target="_blank".

\$\endgroup\$
1
  • \$\begingroup\$ Thank you for your feedback RoToRa, this is very helpful. \$\endgroup\$
    – PriscillaM
    Commented Jun 30, 2020 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.