Is my CSS ok? |
Is my CSS ok? |
mp3909 |
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 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) images.zip ( 65.8k ) Number of downloads: 389 |
Christian J |
Apr 17 2020, 04:43 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
<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. |
Lo-Fi Version | Time is now: 26th April 2024 - 09:01 AM |