2
\$\begingroup\$

Does this code follow common best practices?

I tried to keep the code simple and straight forward adding comments and spacing everything to be readable. My main concern is there a common practice that I did not apply, I am looking into a career change and want to include this in a portfolio for a jr position. I am currently self-taught and I don't know if the code screams that.

Note: The reason I put the JS at the end, was just in case it took time to load all the html and css would have loaded and the visitor would have something to see.

* {
	padding: 0; margin: 0;
}
body{
	background-color:#194E80;
}
.logo{
	display:flex;
	margin:2em;
	justify-content:center;
	width:33%;
	height:33%
	
}
.logo div{
	display:flex;
	height:100%;
	width:80%;
	margin:2em;
	align-items: center;
	justify-content:center;
}
@media screen and (min-width: 10em){
	.logo div{
		font-size: calc( 22px + (24 - 22) * (100vw - 400px) / (800 - 400) );
	}
}
.logo h1{
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
@media screen and (min-width:600px) {
   .content {
       flex-wrap:nowrap;
   } 
   
    .image {
        flex-basis:200px;
        order:1;
    }
    article {
        flex-basis:1;
        order:2;
    }
}

.content{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;

}
.image{
    flex: 1 1 auto;
    align-self: auto;
	margin:1em;
}
.image img{
	max-height:400px;
	max-width:700px;
	min-height:400px;
	min-width:300px;
	width:100%;
	height:auto;
	object-fit: contain;
}
@media screen and (min-width: 10em){
	.title{
		font-size: calc( 22px + (24 - 22) * (100vw - 400px) / (800 - 400) );
	}
}
@media screen and (min-width: 10em){
	.text{
		font-size: calc( 26px + (24 - 26) * (100vw - 400px) / (800 - 400) );
	}
article{
	flex: 1 1 auto;
    align-self: auto;
	margin:1em;
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
article h2{
	margin-top:1.5em;
}
article p{
	margin-top:3em;
	max-width:1000px;
}
#button{
	background-color:#1BB9A0;
	width:200px;
	margin-left:38%;
	margin-right:38%;
	border:solid;
	border-color:#1BB9A0;
	border-radius:25px;	
}
#button a:link{
	text-decoration: none;
	color:white;
}
#button a:visited {
	text-decoration: none;
	color:white;
}
#button:hover{
	background-color:#19A691;
	border-color:#19A691;
}
.call{
	margin-top:2em;
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
@media screen and (min-width: 10em){
	.action_head{
		font-size: calc( 22px + (24 - 22) * (100vw - 400px) / (800 - 400) );
	}

.action_head{
	min-width:400px;
	max-width:900px;
}

@media screen and (min-width: 30em){
	.timer h2{
		font-size: calc( 10px + (24 - 10) * (100vw - 400px) / (800 - 400) );
	}
@media screen and (min-width: 15em){
	.timer h3{
		font-size: calc( 25px + (24 - 25) * (100vw - 400px) / (800 - 400) );
	}
	
.timer{
	margin-top:2em;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.timer h2{
	margin-bottom:.2em;
	border:solid;
	border-color:#323334;
	border-radius:25px;
	background-color:#323334;
	width:200px;

}
#day{
	flex: 1 1 auto;
    align-self: auto;
	margin:1em;
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
#hour{
	flex: 1 1 auto;
    align-self: auto;
	margin:1em;
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
#minute{
	flex: 1 1 auto;
    align-self: auto;
	margin:1em;
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
#sec{
	flex: 1 1 auto;
    align-self: auto;
	margin:1em;
	font-family:'Roboto', sans-serif;
	color:white;
	text-align: center;
}
<!DOCTYPE html>

<html lang="en">
	<head>
		<title>
			HAL App Manager 1.0 
		</title>
		<meta charset="UTF-8">
		<meta name="description" content="Shop the Nadscollections.com official site. Discover the latest ready to wear, handbags, shoes and accessories collections by Nadia Persaud.">
		<meta name="keywords" content="handbags,shoes,accessories,Nadscollections, Nadia Persaud">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="main.css" />
		<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

	</head>
	
	<body>
		<main> <!--main container -->
			<nav class="logo"> <!--nav bar -->
				<div>
					<h1>HAL App Manager</h1>
				</div>
			</nav> <!--end of nav bar -->
			
			<div class="content"> <!--content container -->
			
				<div class="image"> <!--main image -->
					<img id="imagess" src="#" alt="HAL Phone Icon" >
				</div> <!--closing image -->
				
				<article> <!--text container -->
					<div class="title"><!--main title for text-->
						<h2> The Application Manger </br> You've Been Waiting For</h2>
					</div><!--closing title-->
					
					<div class="text"> <!--main text for content -->
						<p>Introducing the ultimate application launcher for ios and Android. With more power to control multiple applications at once, you've never had so much control. 
						Get on the early access list to get access to in app perks only avalaible to our early subscribers.</p>
					</div> <!--closing main text -->
					
					<div class="button"> <!--button for content -->
						<h2 id="button">
						<a href="#">
						Get On The List!
						</a>
						</h2>
					</div> <!--closing button -->	
					
				</article> <!--closing text container -->
				
			</div> <!--closing content container -->
			
			<div class="call"> <!--call to action container -->
				<div class="action_head"><!--call to action heading -->
					<h2>
					GET EXLUSIVE IN APP PERKS BY SIGNING UP BEFORE OUR OFFICIAL LAUNCH!
					</h2>
				</div> <!--end of call to action heading -->
				
				<div class="timer"> <!--timer container -->
					<div id="day"> <!--day counter -->
					
					</div> <!--end of day counter -->
					
					<div id="hour"> <!--hour counter -->
					
					</div> <!--end of hour counter -->
					
					<div id="minute"><!--min counter -->
					
					</div> <!--end of min counter -->
					
					<div id="sec"> <!--sec counter -->
					
					</div> <!--end of sec counter -->
				</div> <!--end of timer container  -->
				
			</div><!--end of call to action container -->
		</main> <!--end of main container -->
	
		<script>
			var i= 0; // starting image
			var images= []; //image array empty-array
			var time= 2000; //2 sec time interval
			
			//image list for image array
			images[0] = 'image_1.png'; //image array starting image 
			images[1] = 'image_2.png';
			images[2] = 'image_3.png';
			
			//change image function
			function changeImg(){
				document.getElementById("imagess").src = images[i]; //changes image on html side
				
				if(i < images.length-1){ //if var i is less then the length of the array add one, length -1 because array list start with 0 and ends with 2. 
					i++;
				} else{ // if var is more the array length set it back to 0 to start the slide again
					i = 0;
				}
				
				setTimeout("changeImg()", time);// the amount of time before the function run if statment 
			}
			
			window.onload = changeImg; //when sites loads run script
		
		</script>
	
		<script>
			// Set the date we're counting down to
			var countDownDate = new Date("Nov 5, 2020 15:37:25").getTime();

			// Update the count down every 1 second
			var x = setInterval(function() {

			  // Get today's date and time
			var now = new Date().getTime();

			  // Find the distance between now and the count down date
			var distance = countDownDate - now;

			  // Time calculations for days, hours, minutes and seconds
			var days = Math.floor(distance / (1000 * 60 * 60 * 24));
			var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
			var seconds = Math.floor((distance % (1000 * 60)) / 1000);

			  // Display the result in the element with id day hours minute and sec
			document.getElementById("day").innerHTML = "<h2>"+days+"</h2>" + "<h3>Day</h3>";
			document.getElementById("hour").innerHTML = "<h2>"+hours+"</h2>" + "<h3>Hour</h3>";
			document.getElementById("minute").innerHTML = "<h2>"+minutes+"</h2>" + "<h3>Minutes</h3>";
			document.getElementById("sec").innerHTML = "<h2>"+seconds+"</h2>" + "<h3>Seconds</h3>";

			  // If the count down is finished, write some text 
			if (distance < 0) {
				clearInterval(x);
				document.getElementById("day").innerHTML = days + "<h3>Expire</h3>";
				document.getElementById("hour").innerHTML = hours + "<h3>Expire</h3>";
				document.getElementById("minute").innerHTML = minutes + "<h3>Expire</h3>";
				document.getElementById("sec").innerHTML = seconds + "<h3>Expire</h3>";
			  }
			}, 1000);
		</script>
	</body>
	
	
	
	
	
</html>

\$\endgroup\$
  • 1
    \$\begingroup\$ The meta keywords and description is from one of my other projects a fashion store. \$\endgroup\$ – BlackHazrd Aug 3 at 17:54
1
\$\begingroup\$

Consistently formatting your code will help it look professional. There are some slight variations in style but many conventions are well-established such as always putting a space before {.

Be particularly strict about your indentation (everything inside setInterval needs one more) and don't mix tabs and spaces (such as the align-self lines). It's not cheating to have your editor format your code for you.

I tend minimalist on comments (preferring to put effort into naming and refactoring instead). With that in mind, your comments are excessive. For example I would change this:

                    <div id="day"> <!--day counter -->

                    </div> <!--end of day counter -->

To simply this:

                    <div id="day-counter">
                    </div>

See how the code documents itself?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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