Skip to content

Latest commit

 

History

History
66 lines (46 loc) · 2.07 KB

README.md

File metadata and controls

66 lines (46 loc) · 2.07 KB

Frontend Mentor - News homepage solution

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

Table of contents

Overview

The challenge

Users should be able to:

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • Flexbox
  • CSS Grid
  • CSS custom properties
  • CSS Transitions
  • Mobile-first workflow

What I learned

For the CSS layout, I delved more into how to utilize CSS Grids to layout the content how I wanted it to be. I was already familiar with creating templates and rows but one thing I learned during this was how to make content take up more than one column/row. This allowed to set CSS Grids while also allowing content more space within the grid.

This was the first time I used CSS transitions in my code. After trying it out, they are actually fairly simple to use for simple transitions!

div.sidebar {
  ...
  transform: translateX(100%);
  transition: transform .3s ease-in-out;
}
div.sidebar.visible {
  transform: translateX(0);
}

Continued development

I want to try and implement more transitions and animations through CSS to liven up websites. Since this was the first time I used CSS transitions, more experience with animations and transitions would allow me to create more complex animations.

Author