Week 1: what was learning html through SheCodes Basics like?

It’s been a busy week of croissants, muggy Melbourne sun and html5.

I’ve loved my first week of SheCodes.

I was initially sceptical, but a friend had taken SheCodes Basics last year. She said she found the deadlines, feedback and round-the-clock Slack support helpful.

My self-paced coding learning progress was idling at, unfortunately, the extreme-beginner stage. Some accountability sounded like exactly what I needed.

So I jumped into the three-week SheCodes Basics course. And I’m so glad I did.

Cue early morning starts (hellooooo, 5am) to cram in some instructional videos, with exercises to apply the concepts, before my 9–5 begins. I would love to pretend that I am some super-accomplished person who breezes through these goals. But … I may as well be honest on here. Getting up early was hard, even though I am a morning person. Even though as soon as I got started, the learning itself was fun.

Although the first week included a combination of developer tool basics, html5 and CSS (which all complemented each other), I’ll save CSS for another post.

After sneaking in several small attempts to procrastinate (overly-slow relishing of coffee while reading excellent short stories, with a dog on my lap), I jumped online to watch Matthieu, the SheCodes founder and instructor, take me through the basics of writing html5.

Study procrastination tools aka pup and Chicken.

It included most elements and attributes I’d encountered in my other course: heading, paragraph, link, image, list, horizontal rule, break, emphasis and strong tags (but not tables). But the instructional style was different — less theory, more application. The focus was on using these elements in my own coding activities. These built on each other bit-by-bit to create a landing page about weather.

The deadline for completing each bite-sized video plus activity kept me moving forward. It meant I learned through doing, making mistakes, revisiting the videos and experimenting with variations to my own code. Before this course, I had spent too much time going down rabbit-holes trying to theoretically understand the line between, say, semantic and stylistic use of the emphasis/idiomatic or bold/strong tags, before moving to the next topic.

The first week of html in SheCodes taught me it’s better to find out the answers to these type of questions while making something. Otherwise what I read on MDN or Stack Overflow doesn’t stick. Plus, I tend to get waylaid reading about aspects of that element/attribute that are, at this stage, beyond me.

This week, I also used the course’s Slack channel when I was curious about ‘real-world’ coding practices. Having my specific question about the break tag answered (how/when do professionals use it, given its semantic and accessibility issues?) really cleared things up for me. It felt like I was not learning in a vacuum.

Overall, the most powerful new takeaways for me this week were the introduction of div and span elements and using the Visual Studio Code (VSC) text editor.

The elements suggested possible answers to questions I’d had during my other beginner html course, including: how do today’s webpages display features, without locking everything up in millions of tables and rows? How do you apply different styling features, without affecting every instance of that element?

As for the text editor, I had been working on Atom but, for me, VSC is more usable. I can’t put my finger on why, exactly … perhaps the best description is I find it more fun, more intuitive, more ‘readable’, more helpful (with more pop-up options for element, class or property names). Maybe it’s just due to setting up the theme and extension colours Matthieu explained step-by-step (the Dracula theme and Prettier extension); there are likely similar options in Atom.

Ultimately I assume it‘s important to be comfortable using different editors. But at my beginner’s stage, it was helpful to have such a user-friendly and aesthetically pleasing (okay, pretty) workspace to play with from the outset, without getting bogged down in the menu details I can pick up along the way (rabbit-holes: avoided!).

After all, colours and layout matter to front-end web development learners … the whole point is that we enjoy making things on screens look good!

Overall, after week 1 I felt a surge of progress. The logic of html combined with the ‘magic’ of making something appear on a webpage was really fun. It was combined with that buzz of excited certainty: when you’ve hit on something that just fits with the way you like to work, learn and create … even if that webpage looked like it was from way back when I was 10 years old, trying to connect the dial-up to Netscape Navigator.

Okay I’ll be honest, this page looks better than the html-only page I created.

Some projects I want to play with include using html and CSS to turn my mother’s (MS Word doc) family recipe book into something beautiful, personal and usable. A website about where to find restaurants, bars, bottle-shops and leisure activities that serve alcohol-free beer in my city. A blog about pet-friendly travel experiences. In my 9–5, an intranet page setting out all the manuals and templates (we have so many, in so many different folders), but in a clean, pretty and logical way.

So, I’d better stop typing on here and start working!

If anybody is reading this, let me know whether you prefer Atom or Visual Studio Code. And feel free to correct any misunderstandings about html I’ve shared above. I love the collaborative way we can learn coding from each other. Is my thinking about divs and spans on the right track, or will my mind be blown by advanced CSS and … I don’t know what these are but I’ve seen the word a lot … flexboxes, among other things? (Hellooooo React, Bootstrap, etc.: I don’t even know how you fit in yet, but you sound important!)

I’ll share my first project, the weather page, on GitHub. But that belongs to another post about learning beginner CSS (it’s 2022, nobody needs to see a html-only webpage!). Onwards to week 2!