3
\$\begingroup\$

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>

\$\endgroup\$

1 Answer 1

Reset to default
3
\$\begingroup\$

Hello :) I'll try to review Your solution. Please take a look at the below comments:

CSS:

  • Avoid styling by the id tag. 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 h1 is not visible on the page at all
  • Why did You leave the img alt 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 a tag does nothing. In that case it shouldn't really be an a tag.
  • lang property is missing in the HTML
  • Some really important content is missing in Your head tag. Read about what should be placed there

NOTES:

  • Remove the unnecessary comments from the code. Also those which describe the self-explanatory code
\$\endgroup\$
2
  • \$\begingroup\$ Thanks for the comments! What's a lang property? \$\endgroup\$
    – DeveloperLV
    Commented 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
    Commented Jan 23, 2021 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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