Website using HTML/CSS/SASS/Bootstrap/JQuery

Question

I'm learning Sass and responsive websites, I've made this simple portfolio website with the help of a bootstrap template (freelancer) and I'd like to know if I'm doing SASS correctly and ways to improve my website code. Also is my project structure correct as a standard? Thanks in advance!

index.html

<body id="page--top">

    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container">

            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle navbar__button" data-toggle="collapse" data-target="#mainNavCollapse">Menú</button>
                <a class="navbar-brand navbar__brand" href="#page--top">Evan</a>
            </div>

            <div class="collapse navbar-collapse navbar__collapsingNav" id="mainNavCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page--top"></a>
                    </li>
                    <li class="page-scroll">
                        <a href="#portfolio" class="navbar__item">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about" class="navbar__item">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact" class="navbar__item">Contact</a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>

    <!-- Header -->
    <header>
        <div class="container header" tabindex="-1">
            <div class="row">
                <div class="col-lg-12">
                    <img class="img-responsive header__profileimage" src="assets/img/profile.jpg" alt="myPhoto">
                    <div class="header__textbox">
                        <h1 class="header__textbox--title">EVAN SURNAME</h1>
                        <h4 class="header__textbox--subtitle">Web Developer</h4>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Portfolio Section1 -->
    <section id="portfolio" class="section1">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="section1__title">Portfolio</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 section1__item">
                    <a href="#" class="section1__item--link">
                        <img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project1">
                    </a>
                </div>
                <div class="col-sm-4 section1__item">
                    <a href="#" class="section1__item--link">
                        <img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project2">
                    </a>
                </div>
                <div class="col-sm-4 section1__item">
                    <a href="#" class="section1__item--link">
                        <img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project3">
                    </a>
                </div>
                <div class="col-sm-4 section1__item">
                    <a href="#" class="section1__item--link">
                        <img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project4">
                    </a>
                </div>
                <div class="col-sm-4 section1__item">
                    <a href="#" class="section1__item--link">
                        <img src="assets/img/placeholder.png" class="img-responsive section1__image" alt="Project5">
                    </a>
                </div>
                <div class="col-sm-4 section1__item">
                    <a href="#" class="section1__item--link">
                        <img src="assets/img/placeholder.png" class="img-responsive section1__image--last" alt="Project6">
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section2 -->
    <section class="section2" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="section2__title">About</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-lg-offset-2">
                    <p class="section2__text">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
                </div>
                <div class="col-lg-4">
                    <p class="section2__text">Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section3 -->
    <section id="contact" class="section3">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="section3__title">Contact Me</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">

                    <form name="sentMessage" id="contactForm" novalidate>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <input type="text" class="form-control section3__form--input" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <input type="email" class="form-control section3__form--input" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <input type="tel" class="form-control section3__form--input" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <div class="row control-group">
                            <div class="form-group col-xs-12 floating-label-form-group controls">
                                <textarea rows="5" class="form-control section3__form--input" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                                <p class="help-block text-danger"></p>
                            </div>
                        </div>
                        <br>
                        <div id="success"></div>
                        <div class="row">
                            <div class="form-group col-xs-12">
                                <button type="submit" class="btn btn-success btn-lg section3__button">Send</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer--above">
            <div class="container">
                <div class="row">

                    <div class="footer-col col-md-4">
                        <h3 class="footer--above__title">Location</h3>
                        <p class="footer--above__text">3481 Melrose Place
                            <br>Beverly Hills, CA 90210</p>
                    </div>

                    <div class="footer-col col-md-4">
                        <iframe class="footer--above__map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d183615.334415116!2d1.2244688902059417!3d44.02160942347321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12ac0de6de9463e9%3A0xc7fb153793253908!2sMontauban%2C+France!5e0!3m2!1sen!2sie!4v1490815128696" frameborder="0" allowfullscreen></iframe>

                    </div>

                    <div class="footer-col col-md-4">
                        <h3 class="footer--above__title">Social Media</h3>
                        <ul class="footer--above__list">
                            <li>
                                <a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--fb"></span></a>
                                <a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--tw"></span></a>
                                <a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--lkin"></span></a>
                                <a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--ghub"></span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer--below">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <p class="footer--below__text">Copyright &copy; Evan 2017</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

sass

/* FONT FAMILY AND SIZE */

$text__family--sans: "Lucida Sans Unicode",
"Lucida Grande",
sans-serif !default;
$text__size--base: 15px !default;
$text__size--xbig: 70px !default;
$text__size--big: 50px !default;
$text__size--md: 35px !default;
$text__size--lowmd: 25px !default;
$text__size--sm: 17px !default;
$text__size--xsm: 13px !default;

/* TEXT COLORS */

$text__color--white: #FFFFFF !default;
$text__color--black: #000000 !default;
$text__color--base: #333333 !default;
$text__color__secondary--light: #ffc03d !default;
$text__color__secondary: #e09f16 !default;

/* BACKGROUND COLORS  */

$background__color--navbar: #990000 !default;
$background__color--footer--above: #e81e1e !default;
$background__color--secondary: #e09f16 !default;
$background__color--white: #FFFFFF !default;

/* LAYOUT */

$padding--xbig: 100px !default;
$padding--big: 60px !default;
$padding--sm: 30px !default;
$padding--xsm: 15px !default;

/* ICONS */

$bars-icon: "\f0c9";
$facebook-icon: "\f09a";
$twitter-icon: "\f099";
$linkedin-icon: "\f0e1";
$github-icon: "\f09b";

/* ------ MIXINS ------ */

@mixin text($size, $family: $text__family--sans, $color: $text__color--base, $align: center, $line: normal, $weight: normal) {
    font-size: $size;
    font-family: $family;
    color: $color;
    text-align: $align;
    line-height: $line;
    font-weight: $weight;
}

@mixin img($height: auto, $width: auto, $border: auto, $radius: 0, $shadow: 0, $display: block) {
    height: $height;
    width: $width;
    border: $border;
    border-radius: $radius;
    box-shadow: $shadow;
    display: $display;
}

@mixin layout($padding: auto, $margin: 0 auto, $minheight: auto) {
    padding: $padding;
    min-height: $minheight;
    margin: $margin;
}

@mixin icon($icon, $color: $background__color--white) {
    content: $icon;
    color: $color;
    font-family: FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ------------------- STYLES ------------------- */

body {
    margin-bottom: 25px;
}

p {
    @include text($size: $text__size--base, $color: $text__color--base);
}


/* NAVBAR */

.navbar {
    background: $background__color--navbar;
    text-transform: uppercase;
    border: none;
    @include layout($padding: 10px);
    .navbar__button {
        @include text($size: $text__size--md, $color: $text__color--white);
        background: $background__color--secondary;
        border: 1px solid $background__color--secondary;
        &:hover,
        &:focus {
            background: $background__color--secondary;
        }
        &:after {
            @include icon($bars-icon);
            @include layout($margin: 0 0 0 6px)
        }
    }
    .navbar__brand {
        @include text($size: $text__size--md, $color: $text__color--white, $line: 28px, $weight: bold);
        &:hover,
        &:active,
        &:focus {
            color: $text__color--white;
        }
    }
    .navbar__collapsingNav li.active a {
        color: $background__color--white;
        background: $background__color--secondary;
        &:hover,
        &:active,
        &:focus {
            color: $background__color--white;
            background: $background__color--secondary;
        }
    }
    .navbar__collapsingNav .navbar__item {
        @include text($size: $text__size--sm, $color: $text__color--white, $weight: bold);
        &:hover,
        &:focus {
            color: $text__color__secondary--light;
        }
    }
}


/* HEADER */

.header {
    background-image: url('../../../assets/img/header-background.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    @include layout($padding: $padding--big 0 90px 0);
    .header__profileimage {
        @include img(300px,
        300px,
        $radius: 50%, $shadow: 2px 2px 8px 2px gray);
        @include layout($margin: 10px auto 0 auto);
    }
    .header__textbox--title {
        @include text($size: $text__size--xbig, $color: $text__color--white, $weight: bold);
    }
    .header__textbox--subtitle {
        @include text($size: $text__size--lowmd, $color: $text__color--white, $line: 50%, $weight: bold);
        @include layout($padding: 0 0 $padding--big 0);
    }
}


/* SECTIONS */

.section1 {
    background-color: $background__color--white;
    @include layout($padding: $padding--sm auto $padding--big auto);
    .section1__title {
        @include text($size: $text__size--big, $color: $text__color--base, $weight: bold);
        @include layout($padding: $padding--big);
        text-transform: uppercase;
    }
    .section1__image,
    .section1__image--last {
        text-align: center;
        @include img(250px,
        300px,
        5px);
        @include layout($margin: 20px 20px 20px 20px);
    }
    .section1__image--last {
        @include layout($margin: 20px 20px 100px 20px);
    }
}

.section2 {
    background-color: $background__color--secondary;
    @include layout($padding: $padding--sm 0 $padding--sm 0, $minheight: 500px);
    .section2__title {
        @include text($size: $text__size--big, $color: $text__color--white, $weight: bold);
        @include layout($padding: $padding--big);
        text-transform: uppercase;
    }
    .section2__text {
        @include text($size: $text__size--base, $color: $text__color--white, $align: justify);
    }
}

.section3 {
    background-color: $background__color--white;
    @include layout($padding: $padding--sm 0 $padding--big 0);
    .section3__title {
        @include text($size: $text__size--big, $color: $text__color--base, $weight: bold);
        @include layout($padding: $padding--big 0 $padding--sm 0);
        text-transform: uppercase;
    }
    .section3__form--input {
        @include text($size: $text__size--base, $color: $text__color--base, $align: left);
    }
    .section3__button {
        @include text($size: $text__size--base, $color: $text__color--white, $weight: bold);
        @include layout($margin: 0 0 80px 0);
    }
}


/* FOOTER */

.footer .footer--above {
    background-color: $background__color--footer--above;
    .footer--above__title {
        @include text($size: $text__size--md, $color: $text__color--white, $weight: bold);
        @include layout($padding: $padding--sm 0 20px 0);
        transform: uppercase;
    }
    .footer--above__text {
        @include text($size: $text__size--base, $color: $text__color--white);
        @include layout($padding: $padding--xsm 0 $padding--big 0);
    }
    .footer--above__map {
        @include img(200px,
        350px);
        @include layout($padding: $padding--xsm 0 $padding--xsm 0);
    }
    .footer--above__list {
        list-style-type: none;
        text-align: center;
        .footer--above__btnicon {
            @include layout();
            @include img(50px,
            50px,
            $border: 2px solid $background__color--white, $radius: 100%, $shadow: 2px 2px 2px 2px $background__color--navbar, $display: inline-block);
            text-align: center;
            font-size: 25px;
            &:focus,
            &:hover,
            &:active {
                background: red;
            }
            .footer--above__btnicon--fb:after {
                @include icon($facebook-icon);
            }
            .footer--above__btnicon--tw:after {
                @include icon($twitter-icon);
            }
            .footer--above__btnicon--lkin:after {
                @include icon($linkedin-icon);
            }
            .footer--above__btnicon--ghub:after {
                @include icon($github-icon);
            }
        }
    }
}

.footer--below {
    background: $background__color--navbar;
    .footer--below__text {
        @include text($size: $text__size--xsm, $color: $text__color--white);
        @include layout($padding: 14px);
    }
}


/* MEDIA */

@media (max-width: 767px) {
    .header {
        margin-top: 90px;
    }
    section {
        padding: 75px 0;
    }
    section.first {
        padding-top: 75px;
    }
}

@media (min-width: 768px) {
    .navbar {
        padding: 25px 0;
        -webkit-transition: padding 0.3s;
        -moz-transition: padding 0.3s;
        transition: padding 0.3s;
        .navbar__brand {
            font-size: 2em;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }
    }
    .navbar.affix {
        padding: 10px 0;
    }
    .navbar.affix .navbar__brand {
        font-size: 1.5em;
    }
    .header {
        padding-top: 200px;
        padding-bottom: $padding--xbig;
        .header__textbox--title {
            font-size: 4.75em;
        }
        .header__textbox--subtitle {
            font-size: 1.75em;
        }
    }
    .section1 .section1__item {
        margin: 0 0 30px;
    }
}

Full project live: https://evandcp.github.io/MyWebsite/

\$\begingroup\$ Can't anyone take a look and help me out please? :( \$\endgroup\$
– user123850
Commented Apr 2, 2017 at 9:38 — user123850, Commented Apr 2, 2017 at 9:38

Community · Accepted Answer · 2020-06-10 13:24:26Z

I'm only a little familiar with SASS because I work with LESS most of the time, so I'll focus on your markup to get the ball rolling.

Markup

Outline

Keep in mind, that in HTML5 sectioning elements can start with a h1-element as well.

However, try to create a hierarchic structure. This means, that a h1-element directly followed by a h4-element doesn't make much sense. Especially when you start to use h2 afterwards for other content:

<h1 class="header__textbox--title">EVAN SURNAME</h1>
<h4 class="header__textbox--subtitle">Web Developer</h4>
<!-- […] -->
<h2 class="section1__title">Portfolio</h2>

Also, this looks like a subheading where w3.org says:

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

^{From w3.org 4.12.1 Subheadings, subtitles, alternative titles and taglines}

The linked specification suggests different approaches to handle the problem. One possibility is this:

<h1>
    EVAN SURNAME
    <span>Web Developer</span>
</h1>

Links without any text

You have some links like this:

<a href="#page--top"></a>
<a href="#" class="footer--above__btnicon"><span class="footer--above__btnicon--fb"></span></a>

Of course, most people will see the icon and understand the link's meaning. But visitors using a screenreader or search bots don't have a clue, what the link is about. Simply spend them a title-attribute:

<a href="#page--top" title="Scroll back to top"></a>
<a href="#" class="footer--above__btnicon" title="Follow me on Facebook"><span class="footer--above__btnicon--fb"></span></a>

Some goes for the project listing.

Empty p-elements

In your form you have empty elements:

<p class="help-block text-danger"></p>

I think you'll fill these, if an error for the input occurs. I would say, insert these elements when they are really needed and remove the empty paragraphs in the beginning.

Live Page

A few things I've noticed in the live demo:

There's an error in the console, because the file favicon.ico is missing.
It's recommended that <meta charset="UTF-8"> is the first child of the head-element. You can see it in all examples on w3.org. This answer to "In <head>, which comes first: <meta> or <title>?" has some more insights:

[…] if your title came before that, it has already been interpreted as ASCII, which could be wrong, depending on what was in the title.

You include font-awesome.css and font-awesome.min.css, which seems redundant.

Appearance of the Live Page

A few more things on the live demo regarding the design*:

The header's blue background image doesn't fill the container for screen sizes over ~1200px width.
The header seems broken on mobile. Only on a few screen widths name and subtitle are visible. Sometimes the image is larger than the blue background.
In the mobile view the projects are aligned left. It might look better, if they are centered as the rest of the page as well.
There's a white area below the red footer.
It seems that one or multiple containers/elements are wider than the screen. You can always scroll horizontal a few pixels.

^{^* Seen in Safari 9.1 on macOS.}

Wow thank you for all your suggestions and helpful corrections!! Will work on everything you said thanks!! — user123850, Commented Apr 3, 2017 at 10:45

Stack Exchange Network

Website using HTML/CSS/SASS/Bootstrap/JQuery

1 Answer 1

Markup

Live Page

Appearance of the Live Page

Your Answer

Hot Network Questions

Website using HTML/CSS/SASS/Bootstrap/JQuery

1 Answer 1

Markup

Live Page

Appearance of the Live Page

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions