This is VALOLEARN, my first ever website that I made using HTML and CSS. I had a lot of things to learn since I didn't have any experience with coding but I was very excited and motivated to learn all about it! I will go more in dept about the project further down the page. Visit the website: https://tbjamie.github.io/valolearn/
*Hover over the image to see the full page
*Hover over the image to see the full page
Starting this project I set a few goals that I wanted to achieve! These were as following:
I was very excited to get started to learn each of these goals and got started right away as soon as I finished my first class!
At the start of the project I didn't know anything about HTML let alone CSS, but I tried to learn how to make a page with content and style after my first class. But before that I had to think of a concept for my website and I also had to come up with a design before I could start coding. After that was done I could finally start my coding journey and I started out with a lot of motivation!
When I first started to put content on the website I was very excited about it and even more so when I started to add CSS to this plain website! I made links appear as buttons and I gave colors to elements and I was on a roll. But then I had to learn how to position these elements as I wanted..
I would try to positions elements using margins and padding only since I hadn't learned about flexbox or grid yet. This caused me to have to basically remake my whole CSS for the website once I learned about flexbox since this was the better way to position elements on a website.
Once I tried using flexbox I came to realise that I found it quite hard to use.. So I started practicing and making extra exercises with flexbox to master it! And once I felt comfortable with using flexbox I started to implement it on my own website as well. Finally seeing the structure of the website form as the elements were being positioned as they should be I was very excited and even more motivated to keep learning and getting better!
Once I positioned all my elements I wanted the navigation of my website to have a cool hover animation. This is when I learned about pseudo-elements like "::after". I also learned how to add a hover/focus state and I combined these two to make an hover animation that I am very proud of! I also started to learn more about how to animate in CSS using @keyframes and I got more and more excited as my website became more and more complete.
I also learned how to make the website responsive! For this project I started with a laptop sized screen and I had to scale down from there, but I learned for upcoming projects that the mobile-first approach is a better way to make your website responsive since you can fit everything from a mobile sized screen on a monitor but not the other way around!
At the end of the project I wanted to keep improving the website and keep learning more and keep adding more but I think if I wouldn't have had the deadline I would still be adding new things I learned to the website since I keep learning new things about coding every single day!
But at the end of the project I managed to achieve all my goals and I am very proud of what I learned and made as my first website ever! This project taught me a lot about the basics of HTML and CSS and I also went a bit more in dept since I was too excited to wait for the new project to learn more about coding!
Thank you for reading my journey through my first time using HTML and CSS! And you can also look at my other work!