\$\begingroup\$
\$\endgroup\$
Goal
I am aiming to create a page with two columns, left side to be a summary section and the right side just an image.
I'd like to hear some reviews to where I can improve my current html and css code :)
It is not yet media responsive, just wanting to improve each step at a time.
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
font-family: 'Playfair Display', serif;
height: 100%;
}
body {
background-color: black;
color: white;
height: 100%;
}
/* Social Links */
.fa-instagram {
background: none;
color: #fff;
text-decoration: none;
}
/* Navigation bar */
nav {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
background-color: black;
border-bottom: 1px solid gray;
z-index: 2;
}
nav h2 {
font-size: 2.5rem;
font-weight: bold;
}
/* About me */
#aboutme {
width: 80%;
margin: 0 auto;
}
#aboutme h1 {
color: gray;
margin-bottom: 1rem;
font-size: 1.9rem;
}
#aboutme img {
filter: grayscale(100%);
opacity: 0.5;
}
#aboutme .col {
width: 40%;
float: left;
margin-bottom: 4rem;
}
#aboutme img {
max-width: 100%;
min-height: 100%;
transition: all .2s;
}
#aboutme .summary {
padding-right: 3rem;
}
#aboutme .summary p:last-child {
font-size: .9rem;
width: 80%;
}
#aboutme img:hover {
transform: scale(1.1);
opacity: 1;
}<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVIGATION -->
<nav>
<div class="social-links">
<a href="#" class="fa fa-instagram"></a>
</div>
<div class="logo">
<h2>LOGO</h2>
</div>
<div>
<!-- TO ADD SOMETHING -->
</div>
</nav>
<section id="aboutme">
<h1>About me</h1>
<div class="education">
<h2>Education</h2>
<div>
<div class="summary col">
<h3>Title</h3>
<p>Title 2</p>
<p>2016 - 2020</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia ducimus quibusdam amet consequatur reiciendis possimus. Accusantium dolor enim adipisci officia deserunt, reiciendis ipsum esse accusamus, maiores, molestias cupiditate rem pariatur!
Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col">
<img src="https://static01.nyt.com/images/2019/11/05/science/28TB-SUNSET1/merlin_163473282_fe17fc6b-78b6-4cdd-b301-6f63e6ebdd7a-superJumbo.jpg" alt="">
</div>
</div>
<div>
<div class="summary col">
<h3>Title</h3>
<p>Title 2</p>
<p>2020 - Present</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia ducimus quibusdam amet consequatur reiciendis possimus. Accusantium dolor enim adipisci officia deserunt, reiciendis ipsum esse accusamus, maiores, molestias cupiditate rem pariatur!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore non, recusandae blanditiis voluptate maxime, id quos dolorem fugit deleniti cum veniam facilis porro ut voluptatem! Eveniet suscipit consectetur optio dignissimos.</p>
</div>
<div class="col">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="">
</div>
</div>
</div>
</section>
</body>
</html>
asked Jan 17, 2021 at 14:48
1 Answer 1
\$\begingroup\$
\$\endgroup\$
2
Hello :) I'll try to review Your solution. Please take a look at the below comments:
CSS:
- Avoid styling by the
idtag. It gives 100 pts to the rule strength so it might be hard to overwrite that in the future
HTML:
- I'm not sure if it's a good idea to put the logo in the
h2 - Your
h1is not visible on the page at all - Why did You leave the
imgalt tag empty ? Remember that is should only be empty in case it brings nothing new to the page content. (Google for Accessible images HTML) - Your
atag does nothing. In that case it shouldn't really be anatag. langproperty is missing in the HTML- Some really important content is missing in Your
headtag. Read about what should be placed there
NOTES:
- Remove the unnecessary comments from the code. Also those which describe the self-explanatory code
answered Jan 23, 2021 at 10:29
-
\$\begingroup\$ Thanks for the comments! What's a lang property? \$\endgroup\$DeveloperLV– DeveloperLV2021年01月23日 10:46:02 +00:00Commented Jan 23, 2021 at 10:46
-
1\$\begingroup\$ w3schools.com/tags/att_lang.asp take a look at this link. The page is not the best source of good practices however this definition makes sense :) \$\endgroup\$AdamKniec– AdamKniec2021年01月23日 10:49:43 +00:00Commented Jan 23, 2021 at 10:49
lang-css