Tech Innovation Club

• 

  Tech Innovation Club Website Hero Section

Inspiration

I was inspired mostly by Tech Innovation Club as I enjoy being a part of it and I figured that what I build here could then be used as the club website as we don't have one. The website design was inspired by Pinterest images and real life websites like daily.dev.

What it does

Tech Innovation Club is a fun club for tech enthusiasts and nerds like myself. The website provides details about the club, its streams and divisions, why to join, and how to join the club.

How I built it

It was built with HTML5, CSS3, JS and an external CSS library called animate.css.

Challenges I ran into

• The first challenge was designing the website to reflect properly what the club is all about and keep it aesthetically pleasing.
• The next challenge was ensuring browser compatibility of CSS properties, for example, nested CSS media queries do not work well in old browsers.
• Then came the CSS animations which I managed to solve through research.
• Finally, ensuring responsiveness of the site was the final challenge but I had learned a lot from Kevin Powell and other various articles, so the challenge was not too much of a struggle.

Accomplishments that I am proud of

1. Organisation of the code
2. Design of the website
3. Responsiveness of the website

What I learned

• How to use CSS position: sticky
• Using the BEM CSS naming convention
• Using the -webkit CSS properties other than -moz or -o is best because as it is supported by many modern browsers
• Using JavaScript to scroll an element with an id into view is better than using an <a> element and href attribute as the method changes the url of the page. Example, if a website is on localhost:3000, using <a href="#about">See about</a> changes the page url to localhost:3000/#about when the link is clicked

Built With

• animate.css
• css3
• html5
• javascript