How I Learned the Basics of Web Development

Background

At the beginning of summer 2018, I had one primary goal: I wanted my own website. I desired to build it from scratch, ensuring it looked professional, and most importantly, I wanted the ability to blog. If you are reading this, then I was able to at least partially achieve this goal. This post will outline the steps I took to achieve this within one summer, offering insights on how you too can learn to build your own website or portfolio from scratch. This is not a step-by-step guide; instead, I'm sharing the personal steps I took to reach where I am today.

Things I Learned:

  • HTML and CSS
  • Basic JavaScript
  • Jekyll and Liquid Syntax

While the aforementioned skills are not especially challenging (especially for those with an introductory computer science background), they come with their unique challenges. The most daunting challenge? Self-motivation. I'll be honest, the initial two weeks were tough. There were moments I wanted to quit or was immensely frustrated. And if you ever feel this way, here's my advice: give up. But only for a few hours. If you're stuck on a problem for more than 30 minutes, step away, take a break, and return later. You don't need the added stress. Often, the solution might be simpler than you think, and taking a break can provide a fresh perspective. Aim for roughly 3 hours of work daily, but the key is consistency.

HTML and CSS

I began with a free course like the Responsive Web Design Certification on freecodecamp. This provided a solid introduction to HTML syntax, and with time, understanding became more natural. After some time, you might find some sections repetitive; understand the basics, and then transition to personal projects. I recommend the Responsive Web Design Projects towards the course's end. Finishing these projects gave me the confidence to embark on my personal website journey. The final project on freecodecamp even revolves around creating a portfolio. Utilize resources like Google and Stack Overflow; remember, searching for solutions and understanding others' work is a significant part of the learning process.

Basic JavaScript

Arguably, this isn't crucial for website creation. It all depends on the website's intricacy. For my first site, JavaScript wasn't a focus. However, the animations on my personal website use a simple script written in JavaScript. If you're entirely new to it, some YouTube tutorials can be beneficial. Then, delve into basic HTML animations and scripts, experimenting and enhancing your site.

Jekyll and Liquid Syntax

This section is crucial if you're looking to add a blogging component. Rather than building a blog from scratch, using a Static Site Generator like Jekyll can be immensely helpful. Start with a basic HTML framework, then integrate Jekyll, referring to the quick start guide. A YouTube guide helped familiarize me with Jekyll's Liquid syntax. Once comfortable, I separated my HTML framework into distinct layouts and includes, ensuring consistency across my site.

Things to Implement

As you refine your website, consider these additions:

  • Social buttons for sharing posts
  • A button to download your Resume/CV
  • A "Back to Top" button
  • An archive for blog posts
  • A navigation bar that transitions from transparent to solid and remains visible while scrolling

Experiment with these features to enhance your site's user experience.

Conclusion

While challenging at times, building a website from scratch isn't an insurmountable task. The keys are motivation, consistency, and the willingness to take breaks and return refreshed. Always seek opportunities for improvement.