Landing page Room

This is a Frontend Mentor Challenge

Table of contents

• Landing page Room
  • Table of contents
  • Overview
    • The Challenge
    • Running
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Overview

The Challenge

User should be able to:

See the landing page in any device and switch the elements with the arrow buttons of the webpage and their keyboard.

Running

Clone this repository and open dist/index.html in your browser.

Screenshot

Links

Live URL: https://hec-lopz.github.io/Platzi-Room-homepage/ Solution URL: https://github.com/hec-lopz/Platzi-Room-homepage

My process

Built with

• HTML
• CSS
• Javascript
• Grunt

What I learned

I practiced CSS Grid, I used it to make the layout of the page. Also I learned how to configure Grunt in order to compress my HTML and CSS code. I used a very basic animation that adapts to the way I chose to update the changes when pressing the buttons.

I did a tablet view that wasn´t included in the design given, I really like how it looks.

Continued development

I would like to improve my JavaScript code, I realize that I didn´t choose the best possible way to solve the problem and i fell in a few bad practices that make it hard to read.

Author

• Website - Hector Lopez' portfolio
• Frontend Mentor - @hec-lopz frontend mentor profile
• Twitter - @hec_lopz