nafishandoko / fylo-landing-page

This is solution for https://www.frontendmentor.io/challenges/fylo-landing-page-with-two-column-layout-5ca5ef041e82137ec91a50f5

Frontend Mentor - Fylo landing page with two column layout solution

This is a solution to the Fylo landing page with two column layout 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: Code
• Live Site URL: Github Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Vanilla JS

What I learned

We can shorten if syntax with ternary operator like this

var x = 1;
var y = x===1 ? "it is one" : "no it isn't one";

I also learn how to remove default event on form submit using preventDefault() function.

document.getElementById("myform").addEventListener("click",(e) => {
  e.preventDefault();
})

Continued development

I think that building landing page with only HTML, CSS, and JS is tough. I know there are many frameworks like bootstrap or tailwindcss. Maybe in future projects i will prefer use that framework so i can build complex website more efficiently and faster than before

Useful resources

• HTML Semantic Elements
• CSS background-image property
• HTML Forms
• css - How do I create a div tag heading with a underline? - Stack Overflow
• Font Awesome
• Specificity | HTML Dog
• How do you use the ? : (conditional) operator in JavaScript? - Stack Overflow
• html - How can I change or remove HTML5 form validation default error messages? - Stack Overflow

Author

• Website - Nafis Handoko
• Frontend Mentor - @nafishandoko
• Instagram - @nafishandoko