So, once upon a time, I didn’t know a thing about working on websites, and, frankly, I wasn’t interested in learning – at least I thought I wasn’t. After college, though, I started working in marketing for non-profits, and being usually the youngest in the room, things to do with social media and websites were quickly dispatched to me because apparently if you’ve grown up with the internet you must automatically be an expert in it.
This led to many Google searches hunting for solutions to problems like “why won’t these pictures align?” or “why won’t this text bold?” Simple questions like this introduced me to HTML, the language of the internet. Now I didn’t really understand the structure or meaning of it, but just being able to follow some directions, copy and paste some code, and see the impact live on the page got me interested in learning more.
Even though websites are digital, there’s strangely still something very tangible about them, and building something tangible is some of the most rewarding work. I found that out while building sets for theatre productions and the feeling is quite similar for websites and digital content I’ve worked on.
So, why am I talking about this? Well, I finally got around to that “someday” task of taking a deeper dive into web development than just the hunt-and-peck-through-code-that-I-didn’t-know-how-to-read approach I’ve been using for the last 5 years. I figured this experience would confirm or deny once and for all whether my interest was genuine or a novelty.
All learning experiences are an ebb and flow of different emotional phases that in the end help you to come to an overall judgment on a subject, and this one was no different. I’d say my deep dive into web development happened in 3 distinct phases:
Phase 1: Coding is Magical
This one was predictable because it was where I started this process. But coding can feel even more like a magical ability if you establish good foundational knowledge in the following:
- How websites work, specifically in how browsers on client-side devices talk to servers to receive, read, and translate HTML files into the webpages we see onscreen
- The structure of writing HTML, including tags, elements, and attributes
- The structure of writing CSS and how it integrates with HTML, including the difference between inline CSS, internal CSS, and external CSS
- The necessary parts of an HTML document and their functions, including the root, the head, and the body
Phase 2: There’s a lot to balance here
But once I moved on from the fun of initially being able to structure an HTML document and parse lines of code, I found that there were a lot of things to consider when applying this new knowledge to a project. Just making something work and look good by writing some HTML isn’t the whole story. If you want to create a good, effective website, you must also:
- Plan beforehand how you want your site to look, feel, and be organized, including creating a sitemap of your information architecture design, a color palette, a mood board or style tiles, and wireframes of your different page layouts
- Design mobile-first to make the implementation of responsive design easier
- Decide if you want to manage your site via hand-coding or with a content management system
- Make it accessible for all users by using the latest semantic tags from HTML5
- Optimize images and other media to allow for faster page loading
- Understand and use best practices for search engine optimization (SEO), including in your code, to increase discoverability of your site
- Test your site across devices and browsers to ensure technological compatibility and consistency of experience
- Create a strategy for driving traffic to your site once it’s built, or else all your work will be for nothing
Phase 3: Can I do This? Yes, I can
I know that these are just some of the things that go into a successful website build, but even so, thinking about all of them at once made my head spin and dinged my confidence a little. As a beginner, though, it’s important to remember you’re a beginner and look for opportunities to rebuild your confidence when you start to become intimidated.
One great opportunity to do so is by reminding yourself of everything you have learned by actually using it. And the great thing about web development is that you don’t have to open a blank document and start building a webpage to see what you know. You can use a template as a life vest to keep you afloat as you navigate through applying your knowledge.
I used a free template from W3Schools to try and build a high-fidelity prototype of a homepage design idea I had. As I went through the process, I become more and more confident about both what I did know and my ability to fill the gaps in my knowledge with research.
At first, I just edited some of the styles of the template – changing colors, rearranging elements – but then I got bolder and started writing my own CSS document, deleting whole sections of code, and bringing in chunks of code to add whole new elements. By the end, I’d dived into learning how to add just enough JavaScript to create the header animation I’d envisioned but never thought I could achieve.
Moral of the Story: Don’t Hold Back
I share all this because at any time in my deeper exploration of web development I could have allowed myself to become overwhelmed with doubt about my abilities. When I basically had to learn to speak a new language, when it felt like there were too many parts to worry about to ever see myself doing it perfectly, or when I had to put my knowledge to its first real test were all moments I could have thrown in the towel. But instead, I was patient and kind with myself and tried to let my curiosity and interest lead.
Now, I have a great example in the page I built to remind myself just what I can do even when I have doubts. And maybe I’ll never be a full-time web developer, but I feel like if I work with one at some point I’ll be better able to communicate with them. Plus, the next time I get a design idea for how a site could be better I could actually build it out to share with the world instead of keeping it in my head.
Even if you’re not interested in coding or web development for a career, get to know the process and try it out. Not only will it give you a new perspective on the technology we interact with every day, but succeeding even a little at it can be a powerful antidote to that annoying, doubting, little voice in your head.
