I'm back to studying programming and I've started with the good old HTML and CSS. This is the final project of the Origamid - HTML and CSS for Beginners course. The layout was developed in Figma and it was the final project of Origamid - UI for Beginners course.
Origamid is an online platform that offers courses in web development, design, and other related fields. The courses are well-structured and provide a solid foundation for beginners.
I've done other courses from Udemy and Alura, but I found Origamid's approach to be more engaging and practical. As the instructor is well versed in both design and development, the courses also cover the design aspect, which is often overlooked in other platforms.
The courses are designed to help you build real-world projects, more similar to what you would encounter in a work environment, which is a great way to learn.
The Bikcraft project is a fictional e-bike brand, and the webpage is designed to showcase the skills learned in the course. The project includes various pages such as the homepage, product listings, and product details, all designed with a focus on user experience and responsive design.
I always try to do the exercises and challenges by myself first, with just the things I've learned up to that point - and research, sometimes lots of research.
Then, I watch the classes and see how the instructor did it, and compare with my solution. This way, I can learn new techniques and improve my code, also understand a little better the best practices and conventions used by the pros.
After that, I try to refactor my code from the ground up to make it cleaner and more efficient. This process has helped me a lot in understanding the concepts and fixing better the things I've learned.
- HTML structure and semantics
- CSS styling and layout techniques
- CSS utility classes
- Responsive design principles
- Accessibility best practices
- Flexbox and Grid for layout
- Tailwind CSS
- Basic JavaScript for interactivity and DOM manipulation
- HTML
- CSS
- Flexbox
- Grid
- Tailwind CSS
- JavasScript
While I was doing the HTML and CSS for Beginners course, I also did Origamid's UI for Beginners, Flexbox, Grid and Tailwind CSS courses.
I also have a Design background so I already wanted to learn how to use Figma, not to get too deep into it, but to be able to create my own designs and layouts if necessary - or customize existing ones.
I've just got introduced to Tailwind CSS and I intend to learn more about it later, but together with Flexbox and Grid courses, it helped me get even more familiar with CSS and how to use it to create responsive layouts.
I've done some things differently from the course, I added a hamburger menu for the mobile version, or used <details> and <summary> elements for the FAQ section, for example. I also used some Tailwind CSS classes to make the transitions, but I didn't use it extensively as I've learned it in mid-project - and I would have to refactor the whole project in order to implement Tailwind properly.
I plan to continue my studies in web development, focusing on JavaScript and then Typescript. After that I want a better understanding of Back-end development, so I can eventually become a Full Stack Developer.
The next logical step after that is to learn a JavaScript framework, like React, Vue or Angular, and then dive into Node.js for server-side development - I also want to learn a bit more about Deno and Bun as well.
Even if I leave back-end development for later, I want to have a good understanding of how the back-end works, so I can at least build and setup small websites and apps by myself.
This project is licensed under the MIT License - see the LICENSE.md file for details