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.
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
- Solution URL: Code
- Live Site URL: Github Pages
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Vanilla JS
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();
})
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
- 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
- Website - Nafis Handoko
- Frontend Mentor - @nafishandoko
- Instagram - @nafishandoko