Loopstudios

This is a solution to the Loopstudios landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview
My process
Author
Acknowledgments

Overview

The challenge

Users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page

Run the project

npm install //install dependencies
npm start  // start gulp watch
npm run build  // start gulp

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
Bootstrap Grid
Mobile-first workflow
Scss compiled to CSS
Gulp Automation
Javascript to interactive

What I learned

First of all, those tecnologies that you can see bellow I was learning, without gulp, because I was using other app to compile and automation my aplications on web with no terminal commands. So I decided to make different, learning how to use and try.

$posicoes: 1 url(../../img/desktop/image-bg-1.jpg),
2 url(../../img/desktop/image-bg-2.jpg),
3 url(../../img/desktop/image-bg-3.jpg),
4 url(../../img/desktop/image-bg-4.jpg),
5 url(../../img/desktop/image-bg-5.jpg),
6 url(../../img/desktop/image-bg-6.jpg),
7 url(../../img/desktop/image-bg-7.jpg),
8 url(../../img/desktop/image-bg-8.jpg);
@each $pos,
$images in $posicoes {
    .bg-pos-#{$pos} {
        background: {
            position: center;
            repeat: no-repeat;
            size: cover;
            image: $images;
        }
        height: 450px;
    }
}

const bgHeader = document.querySelector("header");
const btNav = document.querySelector(".navbar-toggler");
const icon = document.querySelector(".fa-bars");

btNav.addEventListener("click", () => {
    bgHeader.classList.toggle("active");
    icon.classList.toggle("fa-times");
})

const { parallel, src, dest, watch } = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass');
const htmlmin = require('gulp-htmlmin');
const cssmin = require('gulp-cssmin');
const jsmin = require('gulp-uglify');
const babel = require('gulp-babel');
const rollup = require('gulp-rollup');

function css() {
    return src('src/assets/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('loop-main.min.css'))
        .pipe(cssmin())
        .pipe(dest(`./dist/assets/css`));
}

function html() {
    return src('src/*.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(concat('index.html'))
        .pipe(dest(`./dist/`));
}

function js() {
    return src('src/assets/js/*.js')
        .pipe(
            rollup({
                input: './src/assets/js/main.js',
                allowRealFiles: true,
                plugins: [
                    babel(),
                ],
                output: {
                    name: 'testing',
                    format: 'umd',
                },
            })
        )
        .pipe(babel())
        .pipe(jsmin())
        .pipe(dest(`./dist/assets/js`));
}
exports.watch = (cb) => {
    watch('src/assets/scss/**/*.scss', css);
    watch('src/*.html', html);
    watch('src/assets/js/*.js', js);
    cb();
};

exports.css = css;
exports.html = html;
exports.js = js;

exports.default = parallel(css, html, js);

Continued development

For the next step on my repositories, I want to continue developing and trying to be better on SCSS and Js. Making more complex aplications and doing more structured codes.

Useful resources

Scss - This helped me for Scss reason.
Javascript - This helped me for Js reason.
Npm - This helped me for Gulp reason.

Author

Website - Malcon Augusto
Twitter - @maicaosgz
Twitch - @maicaosgz
Discord - @turing-legion
Instagram - @malcon.dev
LinkedIn - @malconn

Acknowledgments

Person that has big resposability with inspiration for this project are : @Kvnol

malconn/Loopstudios