6
\$\begingroup\$

I'm getting into CSS/HTML by myself. I'm already familiar with many programming languages (C, Java, etc.), but I don't know much about web development, especially about good programming practices when it comes to CSS/HTML. Could you guys please give me some tips and point out what I did wrong? I did kind of a small portfolio just for practicing:

main.css

/*main css*/

html,body,h1,h2,h3,h4,p,div{
    padding: 0;
    margin: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
}

body{
    background-color: #FFFFFF;
}

h1{
    font-size:3em;
    text-align: center;
    font-weight: bold;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #FFFFFF;
    padding: 20px 0 20px 0;

}

p{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    color: #222222; 
    margin: 20px auto 20px auto;
    text-align: justify;
    max-width: 700px;
}

.horizontalblack{
    background-color: #222222;
    padding: 40px 0 40px 0;
    max-height: 100px;
}

.header{
    min-height: 150px;
    text-align: center;
    vertical-align: middle;
}

.header h1{
    font-size: 4em;
    color: #000000;
}

.menu {
    min-height: 100px;
}

.menu h2{
    font-size:1.4em;
    font-weight: 400;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}

.menu ul{
    padding: 40px 0 40px 0;
    max-width: 600px;
    text-align: center;
    margin: 0 auto 0 auto;
    list-style-type: none;
}
.menu li{
    display: inline-block;
    padding: 0 5px 0 5px;
}
.menu li:first-child{

    padding: 0 5px 0 0;
}
.menu li:last-child{

    padding: 0 0 0 5px;
}

main.html

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="header">
            <h1>Manoel Ribeiro</h1>
        </div>
        <div class="menu">
            <ul>
                <li><h2>About</h2></li>
                <li><h2>Projects</h2></li>
                <li><h2>Articles</h2></li>
                <li><h2>Skills</h2></li>
                <li><h2>Contact</h2></li>
            </ul>
        </div>
        <div class="about">
            <div class="horizontalblack">
                <h1>about</h1>
            </div>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.
            </p>
            <p>
                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.
            <p>
        </div>
        <div class="projects">
            <div class="horizontalblack">
                <h1>projects</h1>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.
            </p>
            <p>
                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.
            <p>         
        </div>
        <div class="articles">
            <div class="horizontalblack">
                <h1>articles</h1>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.
            </p>
            <p>
                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.
            <p>     
        </div>
        <div class="skills">
            <div class="horizontalblack">
                <h1>skills</h1>
            </div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum vitae dui a elementum. Praesent sed dictum felis. Pellentesque convallis lectus sit amet luctus iaculis. Maecenas euismod felis nisi, eget laoreet lectus aliquet condimentum. Donec dapibus lectus at vehicula sagittis. Sed in fermentum risus, ut finibus dolor. Quisque ut facilisis eros, quis placerat dui. Maecenas posuere tristique nisl, sit amet finibus mauris consequat et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sapien urna, porta quis ipsum pretium, sodales gravida mi. Integer ultricies, orci luctus dictum tincidunt, dui ipsum finibus turpis, eget gravida dolor velit varius lorem. Donec id turpis vitae tellus elementum viverra a eget tellus. Integer nunc dolor, congue vel velit nec, elementum sollicitudin neque.
            </p>
            <p>
                Etiam lorem nisi, rutrum eu ultricies vitae, consectetur et nulla. Suspendisse at augue vitae ipsum ultrices convallis. Quisque laoreet rutrum augue et rutrum. Sed sit amet purus sollicitudin, ultricies ligula sed, ultricies justo. Curabitur in lacus eleifend leo finibus sagittis vitae vitae lectus. Fusce et felis nisl. Nulla dignissim dolor interdum quam molestie, a auctor ipsum aliquet. Suspendisse accumsan orci urna, vitae facilisis sem luctus ut. Quisque fermentum purus et blandit laoreet. Ut vel fermentum quam, vel pretium justo. Praesent nulla lacus, consequat quis consectetur a, finibus vel ex.
            <p>                 
        </div>      
        <div class="contact">
            <div class="horizontalblack">
            </div>
        </div>      
        </div>
    </body>
</html>
\$\endgroup\$
1

2 Answers 2

Reset to default
5
\$\begingroup\$

HTML

Validity

You can validate your HTML code here. It found these issues:

  • head must contain a title
  • you have one too many closing div tags

HTML5

As you are using HTML5, you should think about using the newly available structuring elements (section, nav, article, aside, header and footer), instead of using generic divs.

So for example:

  • <div class="header"> could be <header>
  • <div class="menu"> could be <nav>
  • the various subsections could use <section>, with each of them containing a <header>

The definitions of article and section are still a little vague as I understand them, so your document could also look like this:

<head>
</head>

<body>
    <header>
        [header]
    </header>

    <nav>
        [menu]
    </nav>

    <section>

        <article>
            <header>
                <h1>about</h1>
            </header>

            <p>
                [content]
            </p>
        </article>

        [...]

    </section>

</body>

CSS

Validity

You can validate your CSS here. It found no formal issues with your CSS code at all. Congrats :)

Formatting

  • sometimes, your spacing is off (eg font-size:3em; is missing a space).
  • you have some newlines that don't make so much sense.

Misc

  • padding: X Y X Y; could be simplified to padding: X Y;

Style

I like the style of the website. It might be a bit too simplistic, but the general direction is good.

But if the screen of the user is too wide, the black bars that span all the way across the screen might be a bit heavy on the eye.

\$\endgroup\$
0
\$\begingroup\$

About the outline of your HTML document:

  • Don’t use heading elements for the navigation menu, otherwise you get a wrong document outline.

    Use <li>About</li> instead of <li><h2>About</h2></li> (assuming that you have omitted the a for this example).

  • Don’t always use h1.

    You may always use h1 if you use sectioning content element, but unless you do this, you should use the corresponding heading levels.

    The site/page title is h1, but the following sections (like "About") should be in scope of this, so use h2 for them. And if such a sub-section, again, has a sub-section, use h3 etc.

  • Use sectioning content elements.

    They are section, article, nav, and aside.

    Use nav instead of <div class="menu">.

    Use section for <div class="about">, <div class="projects">, <div class="articles">, <div class="skills">, and <div class="contact">.

    Use article for each single project and article.

\$\endgroup\$

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.