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/
Website using HTML/CSS/SASS/Bootstrap/JQuery
beginner;jquery;html;css;sass
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.MarkupOutlineKeep 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: h1h6 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 taglinesThe linked specification suggests different approaches to handle the problem. One possibility is this:<h1>    EVAN SURNAME    <span>Web Developer</span></h1>Links without any textYou 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-elementsIn 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 PageA 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 PageA 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.