/FUND---MTV

final website-fundamentals-hyperisland

Primary LanguageHTML

fed25-fundamentals-mtv

Final website for the fundamentals-module at Hyper Island

Hi, This is a beginner project i did at Hyper Island where im currently studiying to become a Front End Developer. This was about a 2 week project were we were assigned to create a 90s-styled webpage from scratch. For this project i put alot of effort into structuring my code, making sure its very readable with styles that are easily interchangeable by the use of Css and Sass variables.

GIF

Languages and Tools:

HTML5

CSS3

Sass

Figma

Git

GitHub

GitHub

Visual Studio Code


What I learned:

  • Grid and Flex-box.

  • Sass variables, nesting, @imports and mixins.

  • BEM naming convention.

  • Mobile-first workflow

  • Responsiveness using fluid units.

  • Intergrate Parcel for better optimisation.


A bit of code using:

BEM naming-convention for class-names.

Sass-variables in nested @media-queries
set to the (Bootrap breakpoints-values).

Costum css-properties for easy accessibility and dry code.

//* Header
.site-header {
    width: 100%;
    z-index: 100;
    position: sticky;
    top: 0;
    padding: 2rem 0;
    background: var(--clr-blue);
}
.site-header__nav {
    display: flex;
    justify-content: end;
}
.site-header__menu {
    display: none;
    gap: var(--gap-md);

    &--visable {
        @media (min-width: variables.$breakpoint-md) {
            display: flex;
        }
    }
}

💬 ask me about anything, i am happy to help

Github LinkedIn