Frontend Mentor - Blogr landing page solution

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

• Live Site URL: CLICK ME!

My process

For this webpage I worked from top to bottom. Each section I worked from outside to inside. So my workflow was top to bottom then outside to inside. The biggest struggle I had was deciding what to make as a background image and what to make as a regular image. I ultimately decided to make important images as images and non-important images as background images (for accessiblity reasons).

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

Ultimately, I learned how to create a dropdown menu using JS and CSS. I had to make sure each menu would stay open depending on where the cursor was. Looking back at this I feel that I should have utilized event bubbling to ultimately determine which menu to open (I did not do this). This would have made my JS code much simpler and easier to read. Another thing I realized is that I could have put multiple background images in the same section. I did not do this (which I dearly regret since it made my HTML and CSS more complex). Basically, instead of having a separate div hold a background image I could have put a linear gradient and background image in the same CSS property.

Continued development

I need to work more on my semantic HTML skills as well as looking for easier ways to write my JS code. Additionally learning some more HTML/CSS tricks can help me save some time and make my frontend have much less complexity.

Useful resources

• Multiple background images - Made me realize I could have used multiple background images on the same HTML element.
• Multple background images 2 - Specific example using linear gradient and an actual image
• Event bubbling - Article on event bubble, important to note that the event.target DOES NOT change through the bubbling process, however the this keyword does (the element running the handler does). Very important to know and keep track of!

Author

• Website - Carlos Arbizu
• Frontend Mentor - @crypto-dot