Frontend Mentor - Blogr landing page solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

Screenshot

Links

• Solution URL: My Solution

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• SASS
• Vanilla JS
• Webpack

What I learned

With the challenge I was able to reinforce my knowledge about webpack is Vanilla JavaScript.

  module.exports = (env) => {
    const config = require(`./config/webpack.${env.mode}`);
    return config;
  };
  

  module.exports = {
    plugins: [
      require("postcss-preset-env")({
        browsers: ["> 1%", "last 2 versions"],
        autoprefixer: {
          grid: "autoplace",
        },
      }),
    ],
  };
  

  const mySVG64 = window.btoa(mySVG);
  class BgHeader {
    insertBgHeader() {
      const bgHeader = document.createElement("div");
      bgHeader.className = "bgHeader";
      document.querySelector(".header").prepend(bgHeader);
      bgHeader.style.backgroundImage =
        "url('data:image/svg+xml;base64," + mySVG64 + "')";
    }
  }

  export default BgHeader;

Continued development

In this project, just as practice I used some Javascript classes to insert images (as in the example above), in future projects I do not intend to use this approach.

Useful resources

• robinwieruch.de - This site is a good tutorial for beginners on how to put autoprefixer in your css by using the webpack.

Author

• Website - personal website
• Frontend Mentor - @ArturdaSilvaRezende