My first blog: Community + CSS
Tags: css, beginners
Published: 2022-09-15 20:44:07

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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout): 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](https://sharkcoder.com/visual/underline): 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](https://getcssscan.com/css-box-shadow-examples): 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

[Shark Coder: Underlines](https://sharkcoder.com/visual/underline)

[Get CSS Scan: Box Shadow Examples](https://getcssscan.com/css-box-shadow-examples)