The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Is my CSS ok?
mp3909
post Apr 17 2020, 12:14 PM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



So I am quite new to HTML and CSS, still learning it.
But after watching a series of YouTube channels, I went ahead and created a webpage.

I am looking for experts in this field to look at my code below and give constructive criticism so that I can improve.
I could be doing certain things the wrong/bad way in my code so only someone who is an expert in this field will know.
Anything at all will help!
Thank you and much appreciated smile.gif

p.s. attached zip file contain the images referenced within the code.


HTML code

CODE
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type"css/text" href="website1.css">
    </head>
    <body>
        <div class="wrapper">
            <nav id="navbar">
                <ul>
                    <li><a href="#">bikes</a></li>
                    <li><a href="#">best buy</a></li>
                    <li><a href="#">offers</a></li>
                    <li><a href="#">accessories</a></li>
                    <li><a href="#">contact</a></li>
                    <li><a href="#">about us</a></li>
                </ul>
            </nav>
            <section>
                <img src="../images/lead-banner.jpg" alt="main photo">
            </section>
            <main>
                <div class="container">
                    <img  src="../images/bike.jpg" alt="bike">
                    <h3>Bicycle RetroSyperb VII #1</h3>
                    <h1>$299.99</h1>
                    <div class="container-2">
                        <img src="../images/stars.png" alt="stars">
                    </div>
                    <h5>Add to shopping basket</h5>
                </div>
            </main>
            <footer>
                <img src="../images/footer.jpg" alt="footer">
            </footer>
        </div>
    </body>
</html>



CSS code

CODE
body {
    background-color: lightgrey;
    margin: 0;
}

.wrapper {
    width: 900px;
    margin: -16px auto;
}

nav {
    text-align: right;
    background-color: rgb(2, 21, 43);
    height: 50px;
    padding-right: 10px;
}


nav ul li {
    margin-left: 20px;
    list-style-type: none;
    display: inline-block;
    padding-top: 12px;
}

nav ul li a{
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: rgb(194, 164, 141);
}

section img {
    width: 100%;
    height: 380px;
}

main .container {
    text-align: center;
    background-color: white;
    margin-top: -5px;
    padding-top: 100px;
    height: 550px;
}


main .container h1 {
    font-size: 70px;
    margin-top: -20px;
}

main .container .container-2 {
    margin-top: -50px;
}

main .container h5 {
    border: 2px solid #af746c;
    color: rgb(194, 164, 141);
    padding: 10px;
    text-transform: uppercase;
    font-family: "Times New Roman";
    width: 200px;
    margin: 20px auto;
}

main .container h5:hover {
    background-color: rgb(194, 164, 141);
    color: white;
}

footer img{
    width: 100%;
}


This post has been edited by mp3909: Apr 17 2020, 12:15 PM


Attached File(s)
Attached File  images.zip ( 65.8k ) Number of downloads: 385
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 17 2020, 04:43 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(mp3909 @ Apr 17 2020, 07:14 PM) *

<title></title>

The TITLE text is missing. I suggest using the site name combined with the individual page's name.

QUOTE
<link rel="stylesheet" type"css/text" href="website1.css">

The TYPE attribute is missing its equal sign, and the value should be "text/css".

QUOTE
<img src="../images/lead-banner.jpg" alt="main photo">

The ALT text might be more descriptive --imagine viewing the page without images, what would be a suitable alternative text for each image? Images that are mostly decorative might have empty ALT values.

QUOTE
body {
background-color: lightgrey;

It's safest to specify foreground color and background color in the same rule.


QUOTE
.wrapper {
width: 900px;

It's usually more user-friendly with a layout that adapts to different viewport sizes. This can be done in a number of ways, today media queries are popular.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:12 PM