/huddle-landing-page

Frontend Mentor - Huddle landing page with single introductory section solution

view the live site here: https://Iamronaldosunmu.github.io/huddle-landing-page

This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

I found the challenge on frontendmentor.io a little while after completing some courses on html and css. I was able to successfuly build the website as I was told to. The site is being hosted using github pages.

The challenge

Users should be able to:

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

Screenshot

Links

My process

I built the site by first identifying the different components on the website and then I started putting them together after developing each component. I did encounter some challenges- I had to find a way to change the background based on the screen size. Knowing what I know know, it would have been way better to first learn SASS then use the if statements to sort that

Built with

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

What I learned

I solidified my understanding of html and css learnt how to manipulate css in complex situations.

<h1>Some HTML code I'm proud of</h1>
.proud-of-this-css {
  color: papayawhip;
}
const proudOfThisFunc = () => {
  console.log('🎉')
}

Continued development

  • Right now I am learning UI/UX design to give that extra aesthetic to my front end projects.

Useful resources

  • Ultimate HTML and CSS mastery - This is an amazing course which helped me learn HTML and CSS. I'd recommend it to anyone still learning this concept.

Author