Journey to Fullstack - Week 1:HTML

Journey to Fullstack - Week 1:HTML

Welcome to Codebrew Time!

Welcome to Codebrew Time, before we get started, please feel free to grab yourself a cup of your preferred choice of coffee, mine would be a cold brew(now you get the name?).

Why the name?

You may be asking, "Why Codebrew?". Well, not only is cold brew my favorite choice of coffee, but there's symbolism to it. Coffee requires time and patience to achieve the perfect flavor. There are literal experts called coffee sommeliers whose main purpose is to taste coffee and evaluate whether or not the quality is good. That cup of coffee that you are drinking went through a whole process just for you to savor. In the same way, programming requires A LOT of time, patience, effort, and dedication to master.

What is the inspiration behind Codebrew Time?

The purpose of Codebrew Time is akin to coffee, it's a journey towards perfection. I want to share my process of learning, and experimenting, and how I refine my skills over time. Starting this week, I've committed to stepping out of my comfort zone in coding. My goal is to explore Backend Development more deeply and eventually master Full Stack Development. This blog serves as a platform for documenting my victories, setbacks, lessons learned, and overall progress on this journey.

What I see myself gaining.

I'm confident that this blog will accelerate my learning process by helping me retain information more effectively than ever before. Additionally, the act of writing about my experiences will serve as a powerful motivator, encouraging me to persist in my pursuit of knowledge and my passion for coding. I encourage you to leave feedback, as it will aid me in learning from any mistakes and improving my skills. Your insights and suggestions are invaluable in shaping the direction of this blog and enhancing its quality.

Week 1: HTML

“The only thing that I know is that I know nothing.” -Socrates.

Of course, it wouldn't be a blog if there wasn't a quote by a famous philosopher. However, I do agree with it. To truly learn the intricacies of hard backend work, I must go back to the basics and learn as if I knew nothing about the concept. I believe humbling ourselves is essential for mastering new skills and concepts.

This week was a simple one. I started from the very beginning, HTML.

I recently completed a simple course provided by freeCodeCamp.org, and I highly recommend checking it out if you're interested in learning to code. I was able to create a simple cat photo app website. I revisitted the basics, including the different types of headers, and paragraphs, and how to structure each section of a document. I've also reinforced the importance of accessibility, keeping in mind all individuals, regardless of any disabilities. Additionally, I've refreshed my knowledge on including images and utilizing attributes such as href for links. These fundamental concepts lay the groundwork for creating well-designed and user-friendly web pages.

I recently came across an interesting concept that I wasn't previously familiar with: the use of figures to contain images in HTML. By wrapping an image within a <figure> element, you can encapsulate it and include a <figcaption> element to provide a caption for the image. It's a simple yet powerful technique that can greatly improve the presentation and usability of your web content.

After a long while of not needing to use it, I revisited the concept of the form element. It was good to refresh my memory on radio types, values, and the importance of id and name attributes. During this review, I discovered something new: the fieldset element. It's used to group related inputs and labels within a web form, which helps in organizing and structuring the form effectively. Additionally, I learned about the legend element, which acts as a caption inside the form, providing context for the grouped inputs.

Setting up this blog.

The reason I only managed to work on HTML for week one was because setting up this blog took up most of my time. While Hashnode makes it easy to get started from day one, integrating it into my website proved to be tedious. Hashnode offers a customizable blog feature for your site called Hashnode Headless CMS. However, with my current skill set, I wasn't familiar with the languages it uses, such as React.js and Tailwind.

I wanted my blogs to seamlessly blend into my website's current style. Unfortunately, achieving this using the provided code seemed impossible. Fortunately, Hashnode recently introduced an API called Hashnode GQL. After spending a lot of time going back and forth with the documentation, I finally managed to display the blog posts on my website while maintaining the same style. Remarkably, I accomplished this using only the three basic languages I'm familiar with: HTML, CSS, and JavaScript.

Conclusion

In conclusion, Week 1 of my HTML journey and the setup of my blog have laid a strong foundation for my growth as a web developer. Embracing the principles of continuous learning, humility, and adaptability, I navigated through new concepts and challenges with determination and curiosity. As I continue my coding journey, I'll remember the importance of persistence, problem-solving, and openness to new technologies. My experiences thus far have set the stage for further exploration and mastery in web development, and I'm excited to see where my journey takes me next.

Join me next week as I delve deeper into web development! Your feedback is crucial in shaping this journey, so please share your thoughts. Sign up for the newsletter to stay updated on new posts and receive exclusive content directly to your inbox. Let's continue learning and growing together! See you next week!