New to programming and web design and I’m looking for ways to improve my code.
What are some things I do well and things I do poorly?
How could I optimise my code in any way?
Anything else you have to add.
Thanks!
/* Global -------------------------- */ body { font: 1.5rem/1.5 Lato, Arial, Helvetica, Sans-serif; background: #e3e3e3; color: rgb(71, 71, 71); text-align: center; } .content-wrapper { width: 95%; margin: auto; } /* Header -------------------------- */ .logo { font-weight: bold; } .info h3 { display: inline-block; } .navigation-wrapper, .navbar-width { width: 95%; margin: auto; } header { padding-bottom: .5rem; } header nav a { display: block; background: rgb(184, 184, 184); margin-bottom: .5rem; color: white; text-shadow: 0 0 8px #000; } header nav a:hover, #active { background: rgb(211, 211, 211); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .info a img { padding-left: .5rem; } .info a img:hover { -webkit-filter: brightness(130%); filter: brightness(130%); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } /* Footer ------------------------ */ .footer-grid { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } footer { background: rgb(34, 34, 34); color: white; font-size: 1.2rem; padding: .3rem; margin-top: 1rem; } footer .row-a { vertical-align: middle; line-height: 80px; } footer .row-b a { color: white; background: transparent !important; } footer .row-b a:hover, #foot-active { color: rgb(136, 136, 136); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } footer .row-c a:hover { -webkit-filter: brightness(120%); filter: brightness(120%); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } /* Landing Image -------------------------- */ .landing-image { background: url('https://images.pexels.com/photos/91217/pexels-photo-91217.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb') no-repeat center; background-size: 100% 100%; min-height: 15rem; } .landing-text { padding-top: 6.5rem; } .landing-text h3 { background: rgba(255, 255, 255, 0.2); color: white; text-shadow: 0 0 8px #000; } /* Main Content -------------------------- */ .image-a { background: url('https://images.pexels.com/photos/434252/pexels-photo-434252.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb') no-repeat center; background-size: 100% 100%; height: 200px; width: auto; } .image-b { background: url('https://images.pexels.com/photos/3018/cup-mug-water-tea.jpg?w=1260&h=750&auto=compress&cs=tinysrgb') no-repeat center; background-size: 100% 100%; height: 200px; width: auto; } .image-a:hover, .image-b:hover { opacity: 0.6; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .main-content h2 { background: rgba(0, 0, 0, 0.2); color: white; text-shadow: 0 0 8px #000; text-transform: uppercase; margin: 1rem 0; } .main-content p { text-align: left; margin-left: .5rem; } /* Clearfix ------------------ */ .clearfix::after { content: ""; clear: both; display: table; } /* Media Queries --------------------------- */ @media (min-width: 700px) { /* Header ---------------------- */ .nav-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .info { padding-top: 1rem; } /* Navigation Bar -------------------- */ header nav li { float: left; } header nav a { padding: .5rem 1rem; margin: 0; } header nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .navbar-bg { background: rgb(184, 184, 184); } .navbar-width { width: 100%; } /* Main Content --------------------- */ .main-content img { height: 400px; } .content-grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: "part-a" "part-b" "image-a" "image-b"; grid-gap: 1rem; } .part-a { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: part-a; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 1; grid-row: 1; } .part-b { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: part-b; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; -ms-grid-row: 1; grid-row: 1; } .image-a { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: image-a; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 2; grid-row: 2; } .image-b { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: image-b; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; -ms-grid-row: 2; grid-row: 2; } } @media (min-width: 1000px) { .navigation-wrapper { width: 70%; } .content-wrapper { width: 75%; } } @media (min-width: 1000px) { .navigation-wrapper { width: 75%; } .content-wrapper { width: 65%; } } /** * Remove list styling. */ ul { padding: 0; margin: 0; list-style-type: none; } /* Remove padding & margin from text elements. */ h1, h2, h3, h4, h5, h6, p, a { padding: 0; margin: 0; } /* Remove underline from links */ a { text-decoration: none; } /* Box sizing */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Louis Young | Site 3</title> <link rel="icon" href="./img/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/mediaquery.css"> </head> <body> <!-- Header & Navigation ------------------------------------------------ --> <header> <div class="navigation-wrapper clearfix"> <div class="nav-grid"> <div class="logo"> <h1>LOGO HERE</h1> </div> <div class="info"> <h3>Tel: 01223 123 456</h3> <a href="#"><img src="./img/facebook.png" alt="Facebook"></a> <a href="#"><img src="./img/twitter.png" alt="Twitter"></a> </div> </div> </div> <div class="navbar-bg navbar-width"> <nav> <ul> <li><a href="../">Home</a></li> <li><a id="active" href="#">Site 3</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> <!-- Main Content Start ------------------------------------------------ --> <main> <!-- Landing Image ------------------------------------------------ --> <section> <div class="landing-image"> <div class="landing-text"> <h3>Lorem ipsum dolor sit</h3> </div> </div> </section> <!-- Main Content ------------------------------------------------ --> <section> <div class="main-content content-wrapper"> <div class="content-grid"> <div class="part-a"> <h2>Headings</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatem labore delectus, distinctio excepturi aliquid facere ipsum dolore laboriosam, esse eos sunt, quibusdam doloremque quod voluptas. Alias error nobis a? </p> </div> <div class="image-a"> </div> <div class="part-b"> <h2>Headings</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur voluptatem labore delectus, distinctio excepturi aliquid facere ipsum dolore laboriosam, esse eos sunt, quibusdam doloremque quod voluptas. Alias error nobis a? </p> </div> <div class="image-b"> </div> </div> </div> </section> </main> <!-- Footer ------------------------------------------------ --> <footer> <div class="content-wrapper"> <div class="footer-grid"> <div class="row-a"> <h3>LOGO</h3> </div> <div class="row-b"> <nav> <ul> <li><a id="foot-active" href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="row-c"> <h3>Connect</h3> <a href="#"><img src="./img/facebook.png" alt="Facebook"></a> <a href="#"><img src="./img/twitter.png" alt="Twitter"></a> <a href="#"><img src="./img/instagram.png" alt="Instagram"></a> </div> </div> </div> </footer> </body> </html>NOTE: I have 3 stylesheets. One for my styling, another for media queries and a normalize so there may be some differences in the example. Thanks.
