My Introduction to Coding Basics
By Andrew Gillman
Coding Basics. On one level, it’s exactly what it sounds like: an introduction to coding course that teaches a few fundamental programming principles of HTML, CSS, JavaScript. Make no mistake, after some forty focused hours of live, online study over four weeks, I came away with the knowledge to build a basic website from the ground up. That’s the benefit of an immersive, bootcamp-style learning environment with a support network of fellow students and attentive instructors in a real-time teaching environment. Believe me: it’s a journey, and well worth it even if you go no further than Coding Basics for reasons I’ll get into.
But on a whole other level, enrolling in Coding Basics provided an answer to an important question: am I cut out for a full coding bootcamp? Is coding really for me? I had this mental picture of a solitary person, hunched over their computer late at night, in the dark, lit only by their monitor. Is that for me? It’s worth going back to see why I am even asking these questions.
Everyone’s Journey is Different
I’ve been, shall we say, near code for about a decade. For years, working in communications and marketing roles, I’ve worked in content management systems (CMS) such as WordPress, Joomla, Orchards, Umbraco, and Kentico, as well as design-based website builders such as Wix and Squarespace. (As an avid podcast listener, it’s hard not to be swept up by the company’s prolific marketing—we may never know how many new websites Roman Mars of the 99% Invisible podcast is responsible for.)
But all that time authoring articles and landing pages inevitably and frequently led me to click on the <> or HTML icon in the WYSIWYG [wiz-ee-wig] “what you see is what you get” toolbar editor to see if I could debug or even override an issue with a page. Let’s just say the results were…mixed. That experience sparked my interest in gaining a deeper understanding of the code behind websites, even if just the basics so I could take on a few tasks myself—or at least learn how to ask better questions and provide more informed direction. (For more on this subject, read: Use Bootcamp to Launch a “Tech Adjacent” Career in Digital Marketing.)
So when I arrived at Devmountain and started exploring courses, it made immediate sense to take Coding Basics. But I still had to think about it. Adding two evenings and Saturday mornings of coding classes for four weeks on top of full-time work was daunting. The workload is vastly more daunting than the cost of the class ($49 at the time of publishing).
And I had questions: Would I even enjoy it? I haven’t been in school for a while. Could I really learn these skills remotely? And learn them better than from the handful of YouTube channels I’d been following and watching?
It came down to commitment. I got myself in the right mindset. I worked with my partner and friends to let them know I’d be preoccupied for a few weeks with quick transitions from work to class. I knew I could do it, and when I signed up the feeling of anticipation immediately set in. I was genuinely excited to begin class! And then, we started coding together. Pretty quickly, something happened I didn’t anticipate: the mental picture I mentioned above? It became reality. And I loved it.
Day 1: Framing it Up
Out of the gate, Devmountain instructors set very positive and motivating expectations during our first live online class:
1. We’ll work to provide a great learning experience
2. We’ll push you
3. We’re here for you.
From us, they asked that we own our learning, dedicate the time, and manage our time wisely. About “dedicating the time,” they elaborate with the more you put in, the more you’ll get out and to be sure to find or make a place where you can truly focus solely on the class. This is great advice.
Additional tips included:
- Don’t take struggling personally
- Take notes or do whatever keeps you mentally engaged
- Collaborate with your peers via breakout rooms; teach each other
- Rewatch videos, redo projects, complete suggested content.
Perhaps most importantly? Ask questions. You will likely have heard this piece of advice before but it bears repeating: don’t be afraid to be the first person to ask a question, because chances are someone else has the same question.
Oh, and the introduction to coding classes are shaped by instruction, code-alongs, and lab time, adding a lab review after the first day.
And with that framing, the coding began!
The Devmountain instructors walked us through a few differences among HTML, CSS, and JavaScript then taught common HTML (HyperText Markup Language) terms such as tags, elements, nesting, and document structure. These terms are part of the vocabulary of HTML, which is the language we use to put content such as text and pictures into our web pages. (See Devmountain’s HTML cheat sheet for more terms.) By the last hour, we were creating our own Profile Page using HTML.
My proximity to website code over the previous years prepared me well enough for handling this code without much of a struggle (though I initially fumbled a bit with table tags), yet I immediately noticed the benefit of settling in for dedicated learning of several concepts versus the one-off Google searches and YouTube videos that defined my previous experience. If I carried any measure of overconfidence with me into the subsequent classes, it was quickly tamed by the rush of new concepts and their practical applications.
Days 2–4: Style Plus Substance
With an HTML foundation in-hand, we next turned to CSS (Cascading Style Sheets). CSS describes how HTML elements should be displayed or styled in the browser and has its own syntax. Syntax is a word you’ll hear a lot when learning to code. Every programming language has one, and it refers to the rules governing the language’s structure that make the code correct or valid, the same way grammar helps us form accurate sentences in the language we speak. (Read: What is syntax in HTML and CSS.)
CSS code is made up of selectors and declarations. Code selects the element we want to style and then declares that style. CSS, then, can determine things like fonts, backgrounds, colors, padding, margins, and alignment. Knowing that, our coding hour on Day 2 was all about adding style to our HTML Profile Page from Day 1.
In addition to a lesson on Background Images, Day 3 brought CSS class and ID attributes (ways of selecting HTML elements to style) and display properties to style and organize those attributes on the page. The day concluded with a challenging series of exercises to layout and format HTML elements using CSS. I say “challenging” because I got into trouble with incorrectly nested <div> elements, a <div> being a generic HTML container as opposed to “semantic” HMTL containers such as <header>, <main>, and <footer>—basically more descriptive names for the container. It was great being able to post my code to the class’s Discord channel and get feedback. Sometimes, instructors would ask questions to help me find my way, sometimes they directly assisted in untangling the issue.
Day 4 felt like advanced coding to me as CSS concepts such as flexbox, position, and other richer style elements led to a lab exercise that pretty much built a wireframe of a webpage from the ground up! It even included a “sticky” navigation, or the way in which the top navigation container remained fixed in place when the user scrolled down the page. Creating that code was a major “ah-ha” for me as it brought into focus some of the mechanics behind one of the standard marketing decisions from three website launches I had helped oversee: how visible should the navigation be during the visit?
Days 5–6: It’s Alive
Due to its complexity and power, perhaps the most unexpected portion of Devmountain’s Coding Basics for me were the lessons on JavaScript. Javascript is the code used to make websites interactive and dynamic. Javascript makes stuff happen. Think: clicking on buttons, changing text when clicking on a form field, switching images or styles when hovering your pointer over something. Frankly, there’s almost too much detail and nuance to JavaScript to summarize two days’ worth of learning into something instructional. As always, Devmountain instructors were so patient fielding questions as they came up.
I will say that, for me, the key takeaway from the JavaScript lessons was that we don’t want to have to hard code everything in HTML. JavaScript enables programmers to “grab” elements from the HTML and manipulate them. You can also create and delete elements with JavaScript, all in the form of variables, or descriptively named objects with assigned values. (Variables are actually quite important. Here’s a quick Introduction to Variables video from Devmountain’s JavaScript 101 Tutorials.)
A JavaScript variable called “button,” or “myBtn” for example, could be a name the coder gives to the <button> they previously created in HTML and styled in CSS. JavaScript will then be used to bring that button to life. That is achieved using functions and events (such as hover, click, scroll), with the events telling JavaScript how to use the functions. For example, an event will “listen” for a click on your button, and when that click occurs, some function the coder writes will take place.
The combined knowledge gained from Days 5 and 6 led to a very compelling lab exercise to build an interactive social media app. It was bare-bones, of course, but complex enough to really push me.
It was this lesson where I first found myself two hours after an evening class, sitting in the dark, trying to debug a nonfunctional function or an uneventful event.
And the crazy thing is, I wasn’t exactly frustrated or exhausted; I was focused and determined.
Now I know that these moments can quickly become frustrating and keep ambitious and dedicated programmers up too late to be able to properly function the next day—the slope is slippery—but I think that’s part of the joy of self-discovery in Coding Basics: to come away understanding something new about myself, my capacity to learn, and my dedication to getting it right. Does this mean I have what it takes to go through a full-fledged coding bootcamp? Even with this dip into the waters—a toe in the shallow end, really—I believe that I’m beginning to think so.
Day 7–8: A Step Above
The last two full days of live, online instruction bring dynamic CSS and interaction design into the mix along with timely instruction on user experience, often known by its UX shorthand. UX is how a person feels while interacting with a product or interface. Our goal as programmers, we learn, is to make our “product” useful and easy, resulting in a positive and meaningful experience for the user. We also learn about conditional statements like if/else and user inputs to capture data in fields and forms. These lessons came with labs to create animations in a mock email interface and an interactive grocery list with functions to add and delete items.
My head was spinning a little as I wondered how this would all come together in the last few days of the class. Happily, we aren’t tumbled headfirst into the murky deep end. And to be fair, having gone through eight classes, the deeper waters weren’t as murky as I thought.
Review and Capstone
Day 9 of our introduction to programming using HTML, CSS, and JavaScript pulled together everything we’d learned from the previous eight classes into one grand demonstration and code-along of how to build a functional web page. (For a deeper dive, some further study on the practice and tools of web development is available on Devmountain’s Beginner’s Guide to Web Development.)
We wrote the HTML to frame up the site including creating all the necessary containers, inserting images, and writing class and ID attributes to be able to grab elements with CSS and JavaScript.
Next, we styled with CSS, then made a few elements of the site interactive with JavaScript, including an email signup.
It’s quite a sense of accomplishment to start the morning with a blank page in CodePen and within an hour or two have the basic homepage of a website. It wasn’t fully functional, of course, but it demonstrated how learning to code is a process of accumulating knowledge and experience that increases your capabilities and speed.
The capstone for our Coding Basics course was to build our own webpage with a similar wireframe and functionality. The instructors encouraged us to add style and function beyond the assignment, in a call back to the first day’s expectations to push ourselves and put more into it. Over the next two classes (Days 10 and 11) we had access to the instructors and our peers to get the work done and prepare for our final day presenting our capstone to the class.
Had four weeks gone by so quickly? The 40 or so hours of class time asked a lot, in the moment. On the two weekdays each week, I finished work, made a quick dinner, walked the dogs, and quickly logged right back into my computer and the Zoom call. But I always looked forward to class. I looked forward to the challenge and keeping my brain fully activated rather than settling into a routine or a distraction for the evening.
And I learned that I could survive and likely even thrive in a longer bootcamp. For now, I like having Coding Basics on my resume. It’s a small but forceful step forward in my understanding of web development and the next time I opened a CMS and started poking around, and knew more about where to look and had a few new tools in my toolbox.
