Breaking New Ground: My Journey with Front-end Web Development

Hey there! After 6 years of crafting delightful user experiences as a UX designer, I decided it was time to spice things up and dive into the world of Front-end Web development. For the past 10 weeks, I've been getting my hands dirty with HTML and CSS, thanks to FreeCodeCamp, YouTube, and a bit of help from ChatGPT. I’ve created a few static web pages that I’m really proud of. Join me as I share my journey, the challenges I've tackled, and the cool stuff I've learned along the way.

Diving into HTML and CSS

Starting with the basics on FreeCodeCamp was super helpful. The step-by-step lessons taught me how to use HTML to structure content and CSS to style it. These were the building blocks I needed to create visually appealing, responsive and user-friendly static web pages.

What I Learned:

• HTML Basics: Understanding how to use tags like <main>, <section>, <nav>, <div>, <header>, <footer> etc to organize my content.

• CSS Styling: Learning how to set fonts, colors, and layouts with Flexbox and Grid. This really made my designs come to life.

• CSS Variables: Using variables to store colors, fonts, and other values, making it easier to maintain and update styles consistently.

• Flexbox: Mastering this layout model helped me align and distribute space among items in a container, even when their sizes were unknown.

• Grids: Learning CSS Grid allowed me to create complex and flexible layouts with ease.

• CSS Positioning: Understanding how to position elements on a page using properties like absolute, relative, static and fixed.

• CSS Transitions and Animations: Adding smooth transitions and animations to elements, making the user experience more dynamic and engaging.

• Accessibility: Ensuring that my web pages are usable by people with disabilities.

• Responsiveness: Making sure my web pages look great on all devices, from desktops to mobile phones, using media queries and responsive design principles.

---

Learning from YouTube and ChatGPT

FreeCodeCamp was great, but sometimes certain concepts needed more depth. Whenever I hit a roadblock, I turned to YouTube for detailed explanations and examples.

ChatGPT was a lifesaver whenever I got stuck. Whenever I had questions or needed a quick explanation, ChatGPT was there to help me out.

One of the valuable things I learned was how to host, deploy, and document my projects on GitHub. I also learned how to create GitHub Pages to showcase my work.

---

Building My Projects

Working on projects with FreeCodeCamp was both challenging and fun. These projects were essential for earning my Responsive Web Design certification and really helped me apply the skills I’ve been developing.

Project Highlights:

• Survey Form: My first project was a survey form designed to collect user data. I included various input fields like text boxes, radio buttons, checkboxes, a text area, and a submit button, all styled to create a user-friendly interface.

• View survey form

• https://github.com/olayinkafad/survey_form

• Tribute Page: For my second project, I created a tribute page. This was my first time using Flexbox for layout, and I made sure it was fully responsive. It was a great way to practice layout techniques.

• View tribute page

• https://github.com/olayinkafad/tribute_page

• Technical Documentation Page: Next, I built a Javascript technical documentation page. I used Flexbox and CSS positioning to arrange the elements and learned how to add code snippets to an HTML file. It was a great way to dive deeper into technical content.

• View technical documentation page

• https://github.com/olayinkafad/techincal_documentation_page

• Product Landing Page: I recreated Mollie's landing page, using Flexbox for some elements and experimenting with CSS Grid for a more complex layout. I used CSS variables to store colors and used media queries to make the page responsive.

• View product landing page

• https://github.com/olayinkafad/mollie_landing_page

---

Challenges and Solutions:

• Debugging CSS: Debugging can be tricky, but using the browser developer tool made it much easier to inspect and fix my code. This helped me quickly identify and resolve issues.

• CSS Styling and Variables: Figuring out some of the CSS styling and variables was a bit challenging. I spent a lot of time researching the right CSS variables to achieve the effects I wanted, but it was rewarding when everything came together.

---

What’s Next:

• JavaScript: Over the next 6 weeks, I'll be diving into JavaScript to add interactivity to my web pages. I’m excited to see how it can enhance user experiences. I'll be working towards the FreeCodeCamp JavaScript Algorithms and Data Structures (Beta) Certification.

• Udacity Front End Web DeveloperNanodegree: I'm considering enrolling in the Udacity Front End Web Developer Nanodegree program later in the year to deepen my knowledge and skills even further.

• Frameworks: I’m planning to explore front-end frameworks like React to build more complex and dynamic applications.

I'm looking forward to the new challenges and learning opportunities ahead.

---

Conclusion

Learning to build static web pages with HTML and CSS over the past 10 weeks has been an incredible journey. From FreeCodeCamp lessons to YouTube tutorials and ChatGPT assistance, every step has been a valuable learning experience. I can’t wait to continue learning more about Front-end web development.