My first blog: Community + CSS

Hi, I'm Sam!

I recently started Flatiron's Software Engineering bootcamp, and I love it. When thinking about what to include in a blog post (my first ever!), I know that it's important to include new concepts I've learned. I also know that no matter what I'm doing, the output is infinitely better if I approach it with authenticity. So, I'm going to start with how welcoming this community has been, and then I'll get into a handful of delightful CSS lessons I've learned.

Starting my SE Adventure

When I first mentioned an interest in software engineering to a real engineer, it was an off-hand comment. We were just chatting (one of those get-to-know-you coffees, which can be either fun or grueling, depending on everyone's energy) and she was so supportive of my learning more about this entire field. She recommended Codecademy, and I loved it, but knew I needed more structure if I really wanted to dive in. Over the next few months, I talked to more developers. Without fail, they were all incredibly enthusiastic about talking to (and sharing knowledge with) a coding newbie.

One of them sent a TON of resources – from YouTube videos to conferences to a list of bootcamps. He's checked in consistently, and has been a huge champion of my becoming a developer. Another set up a handful of meetings with me to start teaching me some key concepts (it was very helpful to have some background on arrays before I started bootcamp). Another, just as he found out I was leaving my job to start this bootcamp, set up time to talk through our company's codebase as a real-world example of some of the concepts I'd be learning. There have been so many people who are enthusiastic, helpful, and eager to share their experience as I make this transition.

I thoroughly underestimated the kindness of the software engineering community and just how excited they would be to have a new member. One of the best lessons I've learned is that community is a key element of this field – from sharing helpful resources to helping others troubleshoot to welcoming new developers with open arms (and open source).

CSS

Two other students from my cohort and I have been working on our first project together. We've created a page that returns recipes based on seasonal items from the farmers market. It's a good idea (if I do say so myself), but without CSS it's a bit... meh.

The CSS portion of this project was one of the parts I was a bit nervous about. I had less experience with CSS and it felt overwhelming to try to transform a simple page of lists and divs and headers into something pretty, user-friendly, and readable.

Another key lesson in this experience has been to take a breath and break down whatever I'm working on into smaller, manageable sections. So, I started by tackling the part by which I was most intimidated – how to get four lists (one for each season) to display side-by-side. After some googling and experimenting, I got the grid layout set up correctly.

Once I realized that CSS was actually fun – like an art project but my hands won't get covered in glue and I won't step on a runaway rhinestone – I started to enjoy myself. Below are some of my favorite bits of CSS that I learned throughout this project.

1. Grid layouts: grid layouts not only allow you to divide your page and its content into sections using HTML primitives, but they also enable you to have overlapping/layered elements. See the Mozilla link above for more information!

2. Underlines: I didn't realize there were so many creative ways to underline your text. I really get a kick out of the wavy underline (text-decoration-line:underline; text-decoration-style: wavy;). In looking up different types of underlines, I found some real gems. Underlines that look like they were drawn by marker, or ones that are animated, or ones that consist of a row of little hearts.

3. Boxes: the same way I underestimated the amount of pizzazz in underlines, I was unprepared for all of the different box-shadow options. This was where the full power and nuance of CSS really clicked for me. I have a lot to learn, but it's really helpful to have a visual representation of how many options there are – that's why I loved the page of box-shadow examples I linked above. Who knew there were so many different ways to style a box?! You can click on any of those box-shadow examples to copy the code and then easily add those boxes to your own CSS files. This goes back to community – how cool that there are so many resources that allow you to share and implement other people's code!

I love the immediacy of this work – you change the background color in your file and you can see it change in your browser after a quick refresh. You set up a grid layout and you know almost instantly if it's working as it should. You edit your JS file to clean it up for readability and – wait – you ordered your functions and variables incorrectly (you can't use your form event listener before you've declared all the variables it involves!). A quick fix to the order of those functions and variables in your index.js, and now your code is both organized and working.

I'm looking forward to challenging myself and finding my voice as a software engineer – identifying which areas I'm passionate about and which languages speak to me the most. I am really grateful to be part of this community and can't wait to see where this adventure takes me.

References:

Mozilla: CSS Grid Layout

Shark Coder: Underlines

Get CSS Scan: Box Shadow Examples