This is my first time participating in Chingu. The first steps are to complete a solo project based on your current skills. I choose the Teir 1 project, which is cloning the landing page for Tickybot.
Use HTML, CSS, and JavaScript to allow you to:
- Click the navigation bar and be scrolled to the corresponding page section.
- Click a button which scrolls you back to the top of the page.
- Implement every other section of the page.
- Create your own solution without looking at the page source for the site you are cloning.
Bonus:
- Implement responsive design
The images were prodived by Chingu. tickybot-assets
You can view My Tickybot clone.
The project went well for me. I have a solid understanding of HTML and CSS. I used Flexbox for the layout and @keyframes for the button:hover animations. I added media queries for a responsive design. I implemented scroll-behavior: smooth; for smooth scrolling but with limited browser support Javascript would be a better option.
Opportunities to Improve:
- smooth scrolling with Javascript
- Tickybot SVG eye animation
- Top button dissapear when scrolling back to the top