DEV Community: Lex

CSS Grid: "The Big Three" cheat code

Lex — Wed, 11 Mar 2020 20:59:35 +0000

I have to start with a disclaimer that I'm a big believer in the 80/20 rule; 20% of the work will get you 80% of the results.

While I don't condone only learning 20% of your craft, if CSS really isn't your area of expertise, but need to use it here and there, 20% of grid will get you a LONG way!

This guide will give you that 20% of grid and if you remember The Big Three, you will conquer most of the workload you need out of grid.

The Problem

You're creating some kind of UI and you want to lay things out in a very structured order, maybe a collage of different size and shape pictures?

You have a defined space you want work in and you want to simply place the pictures in the exact space of the grid you're looking for.

For Example:

CSS Grid Examples: 3 different examples of elements arranged in a grid

Well would you believe me if I told you that you can accomplish all three of those with only three lines of code? No?! Good thing, it's not quite three lines of code, but it's not far off. Let me explain...

The Big Three

There are many big threes in the world, but here we're talking about the three properties you need to accomplish the above layouts in grid; grid-gap, grid-template-areas, and grid-area.

So what do they all do?

`grid-gap:`

Example of grid-gap

As you can see, it very much does what it says on the tin. The best part, it will make those spaces between your elements, not around them (which in my opinion is a much more natural layout choice - you can always add margins on the container, if you want space around).

`grid-area:`

.item.a {
  background-color: #ff914d;
  grid-area: a;
}

CSS code snippet: how to use grid-area

This is simply the name you want to give each element. Here you have the element A in image (1), that has two classes applied to it; the item class that all elements have assigned, and the a class - applied only to element A.

When you know The Big Three, it may be intuitive to explain this last as it's the only property applied to the child elements, but I think it's easier to understand grid-template-areas by getting this part down first.

`grid-template-areas:`

//container for (1) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a"
  "b"
  "c";
}

CSS code snippet: using grid-template-areas for image (1)

Using the example of (1) above, this code snippet is for the container of the grid you're working with. We've simply defined a 500px square with gaps in between each element of 15px.

We've then used the grid-template-areas property to define both the rows and columns of the grid.

As we only see a difference in rows here, let's use example (2) above to step up the difficulty level.

The new problem: breaking it down

So to accomplish (2), we need two elements to sit side by side in the top row, and then a third element on a row by itself, but twice as tall as the top row.

That would look a little something like this:

//container for (2) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a b"
  "c c"
  "c c";
}

CSS code snippet: using `grid-template-areas` for image (2)

What we've essentially done here is separate the grid into 6 individual boxes, assigned each one to an element, and any side-by-side elements with the same assignment automatically fill in the gaps between.

visual demonstration of grid-template-areas for (2)

What about (3)?

So how do we accomplish (3) with that gap in the grid? I promise, it's so much simpler than you probably expect.

Let me introduce you to ".", a character that solves all your gap problems in grid-template-areas.

The "." simply acts as a placeholder for a gap that you want.

Let's take a look at how we can use that in (3):

//container for (3) above
.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 15px;
  grid-template-areas:
  "a a a b b b"
  "a a a b b b"
  "a a a b b b"
  "c c . . e e"
  "c c d d e e";
}

CSS code snippet: using grid-template-areas for image (3)

Now this may look like a lot to digest at first glance, but by visualising each of those assignments as a small box, it will be much clearer (see below). Within a couple of test scenarios, you'll get the hang of how to do this.

To help visualise (3), it would be represented like this:

visual demonstration of grid-template-areas for (3)

Conclusion

A quick recap of The Big Three:

grid-gap - defines the gap between all separate children elements.
grid-area - gives each child element a unique name.
grid-template-areas - defines what area each element will cover.

The more you break down your grid-template-areas the more you can control the width and height of each element in your grid, especially in relation to their other elements of your grid.

Take a stab at recreating the 3 layouts we've discussed, and see if you can do it by memory.

Remember, this isn't the only way to achieve these results, it's just a simple way to get great results without needing to remember lots of different properties.

Last minute challenge

If you feel comfortable using The Big Three, really push yourself to see if you can recreate this:

Challenge grid to recreate

It will be slightly more difficult than the previous layouts, but I've created a codepen for you to check against if you get stuck.

Thanks for reading!

If you want to know more about CSS Grid, all of the other properties and where they could be useful, check this out.

If you have any questions, comments or concerns, don't hesitate to leave them below. Or if you simply want to say hi, don't be shy! :)

Why my bootcamp blog failure lead to bootcamp success!

Lex — Mon, 09 Mar 2020 19:44:18 +0000

Trust me, no one was more disappointed by my lack of blog posts about the bootcamp than I was! However, as my dad always taught me, every cloud has a silver lining. So what was my silver lining?

To keep it simple, I've broken this down into 3 sections:

Why stop the blogs?
The silver lining
What's next?

So let's get into it...

Why stop the blogs?

It kind of happened by accident actually.

After my second week, I had already written most of week 2's content. Then as I was prepared to post it middle of week 3, I fell sick! I'll spare the detail, but I was bed ridden for a solid 4 days. The last thing on my mind was posting a blog...sorry!

Then having missed a couple days of the bootcamp, I felt behind. I wasn't, but it didn't stop my brain from going into overdrive to try and 'catch-up'. This meant by the end of week 3 and going into week 4, I still had only posted about week 1.

I told myself that I would catch up at the end of month. Oh how I had no idea that going into month 2 would be when the workload ramped up!

As soon as month 2 started, I was 3 week's behind, I made the decision to not stress about it and focus on my development solely. To give you an idea of what that meant for me; I would arrive anywhere from 7am-9am, structured activity until 5pm, and then I would stay as late as 9:45pm some nights.

I simply wanted to get the most out of my time there, as I wouldn't have this opportunity again to sit with knowledgable devs every day, all day. Unfortunately, for my knowledge gain, the blog suffered.

The silver lining

I can't begin to explain how much I learned over the 8-weeks I was there!

Once I stopped stressing about posting the blogs, put job hunting out of my mind and focused on learning, learning, and more learning, I found my rate of progression sky rocketed!

I will say I am lucky that I come from an educationally STEM background, it has meant my way of thinking is very aligned with coding.

I would see similarities in what I had previously learned, just using different terminology, so I skipped a few learning curves which was a pleasant surprise!

So although I didn't get to stick to my goal of writing the blogs (or have much of/any social life for 8-weeks), making the better decision for my own growth has lead to me being significantly more prepared for the market and I feel confident in taking that next step!

What's next?

Get a job!

As simple as it sounds, that truly is the next step.

I have learned enough to be confident in my applications (something I notice is a huge barrier in this industry for junior devs), and I'm really excited to take my next step in this career journey.

Quick Summary

I think the most important thing I will say for anyone considering a bootcamp, or this industry; be prepared to learn and enjoy the learning process, because it won't ever stop!

I truly have fallen in love with learning these new technologies and can't wait to continue learning them better, and even more.

Over my time at Kodiri, I managed to dig my nails into many different technologies and I really feel like the more I discover, the more I realise how many there are out there!

I was fortunate to spend time learning bits and pieces of:

JavaScript
React
NodeJS
ExpressJS
Redux
Firebase
HTML5
CSS3

If you want to see how I've used any of those technologies, check out my portfolio

P.S.

I will be writing a blog detailing more about what we covered in the bootcamp for anyone interested in reading that :)

My bootcamp experience: Week 1

Lex — Mon, 20 Jan 2020 22:26:46 +0000

Wow...1 week finished and it's already better than expected!

I think the best way my brain can think to explain is to break it down into 3 sections:

The Skeleton - the structure of the week
The Muscles - what we covered
The Outfit - the extra flares I didn't expect

So let's get into it...

The Skeleton

If you take a look at my pre-face blog (if you want to call it that), a big part of my reasoning for joining this specific bootcamp was because it was structured in such a way that it emulated a working environment. To that, I learned more about what that means as the week went on.

Outside of the first day (I'll get to that later), we start every day with "stand-up" at 9am. This is essentially a 15min update detailing where everyone is at with their current progress. To give a visual, we have an awesome sticky-note wall displaying all of our individual activities arranged to be in 1 of 4 columns; back-log (to be started), progress (currently working on), QA (quality assurance), and done (I think you get the point).

We have a couple of groups that have staggered stand-ups, so after my group is done I get 30 mins to continue working on my current task before we then have our first workshop of the day. We have 2 of these every day, both before lunch and they run about 45mins each (maybe longer depending on complexity of the topic).

Then it's lunch time, my favourite time of day!

After lunch, the afternoon is very much our own. We continue to work on our tasks, but can also go through workshops videos (they're all conveniently live streamed so we can reference back).

The only variance in daily routine is Monday and Friday where we have a team coding challenge using the Kodiri platform. Essentially we answer randomly generated questions on JavaScript, React, HTML or CSS, and we compete as a team against one-another. Also, Friday afternoons we have a retrospective where we discuss any particular challenges of the week or good points we want to highlight. These aren't necessarily coding related either, so it's nice to have your voice heard.

The Muscles

As you can imagine, day 1 is a lot of explaining of what to expect and setting up the logistics of the days ahead, but it didn't take long before we were in our first team coding challenge. Pace...I like good pace that challenges me, so this was very welcome to dive in to coding so early on.

From day 1 we also started our first individual app project. We are each building a Netflix-style interface (Kodflix). For this we have been given a set of tasks listed on github, each leading us to developing part of the app. It's really handy the way it's been laid out as on the Kodiri platform there are videos walking you through each challenge, however on the github task-list, there are other resources (e.g. documentation, stack overflow posts etc.) that are suggested to use with the videos as a last ditch attempt to solve the challenge if you haven't already.

In the workshops during the week, we covered different topics ranging from CSS/HTML through to introductory JSX inside of React. The workshops are very useful because they're interactive. Ricardo narrates and poses questions using guided discovery. Also, he is very pedantic about how we answer questions, for example if we want to describe an array and its contents, if we don't say "square brackets", he won't display the information in []. Although this may frustrate some people, I find it really good practice of getting used to terminology, and being able to express exactly what you mean without leaving room for interpretation.

As for non-Kodflix/workshop activity, we use the Kodiri platform for training. The platform is great as it has many different levels to work through questions with, and breaks down each language into many topics so you can focus on one specific area you want to improve on. I spent most of my first week tackling all beginner level JavaScript training and managed to teach myself quite a few new methods off of the back of it.

The Outfit

The biggest unexpected for me was the amount of time I spent at Kodiri this week. I don't think I left before 7pm on any day!

My main mentality throughout this bootcamp is to make the absolute most of it, and because I'm enjoying learning the languages so much, I just found myself staying late everyday continuing to either work on Kodflix, train, or build out my own project using what we'd learned so far.

Speaking of personal projects, I started to build out a landing page for a podcast I am a part of (The B-Side Word Podcast...shameless plug). This was just as a test of memory for what we had learned, and also to put the skills to a different test than the more structured environment of bootcamp activities.

I also met some really cool people! When you are self-taught, you're very isolated, but on the bootcamp I'm in a room with a bunch of passionate learners, a passionate couple of teachers, and on top of that, in the evenings I got to meet even more people attending either the evening cohort or meetup attendees. I'm a people person, so it was great adding a bunch of new faces to my database (coding joke...if that's a thing haha).

The last unexpected thing was probably something that happened in the gym...bear with me. I was in the squat rack, eyeing the bar seeing if it would flinch before I beat it up with my impressive legs (he said sarcastically), and the guy next to me chirped "you've got this!". Immediately a connection was born. I love an interactive gym goer that just motivates you for no reason. We ended up chatting and he was a really cool guy.

Fast-forward a couple days and there I am in the squat rack again and who walks up, the same guy! We get to chatting and he mentioned he missed the gym the day before because work ran late. I asked him what he did and of course, he was a developer. I immediately took his number and am grateful I now have a crossover friend interested in both coding and the gym!

Quick Summary

All-in-all, week 1 was a success and a blast! I'm loving the people I'm around and I'm learning at a much quicker rate than I was self-taught. I haven't had passion like this for something since I used to play basketball, so it's been really refreshing stepping into this world, and the bootcamp, so far, has been 100% the right decision for me.

My choice to join a coding bootcamp

Lex — Sun, 12 Jan 2020 17:44:24 +0000

When I was looking to break into the tech industry and saw the variety of ways it can be done, I stumbled across websites like dev.to, hoping to find any insight I could into the best ways to progress.

Fast-forward a few months and I've found myself on a coding bootcamp in London, the most excited I've been about the career I am pursuing since I was chasing a career in basketball, and I'm really happy with the way I'm going about it. That's why I have decided to write about my experience on the bootcamp; maybe it will give another wide-eyed amateur developer one more perspective to consider in their research.

Quick Note: I think it's quite important to understand the context of my decision to join the bootcamp before I go into detail of my experience. Because of that, in this post I will simply focus on what lead to my choice to join the bootcamp.

My somewhat related academics

I'm just a happy graduate with no idea what he's doing next

Going back a few years now, I was fortunate to find myself on a basketball scholarship at Saint Leo University, Florida, which ultimately allowed me to gain a BA in Mathematics.

When I graduated in 2014 I sought advice from others about possible career paths as I'd never really invested much thought into it (I was just happy I was getting a degree). I had been told for years how valuable a Maths degree would be and that it would open many doors for me, yet when it came to actually labelling those doors the only leads I could get from people were "teacher" and "accountant", two things I had zero interest in pursuing.

In hindsight, moving towards the technology industry seems like an intuitive and common move, yet just a touch under 6 years ago, it apparently didn't cross anyone's mind (that I talked with anyway).

The next 5-years in 2 paragraphs

With such a lack of sense of direction, you can imagine it's meant I've bounced around a few different jobs in different industries; Managing a Fundraising Team, PPI Investigation Officer, Academic Learning Mentor, even a Personal Trainer, and most recently Graduate Recruiter.

All of these stops teaching me skills that I've carried forward like sales, effective learning disciplines, commercial awareness, management and many more. Yet none of the industries and jobs themselves giving me personal satisfaction and fulfilment, something I of course "crave" as a Millenial.

It was my most recent stop that really opened my eyes and what made me stumble into the tech industry.

Multiple professional versions of myself

My discovery of tech

This really came down to a few ingredients; my age, my living situation, my job. So let's break them down quickly...

My age

I want to start here because it's the most macro view of this decision. At 28 years old and 11 months, last April I decided to move to London to pursue a new career in recruitment. I was getting closer to 30 and had grown tired of bouncing around jobs; I wanted to focus on a career.

Having always excelled in my job roles, I felt recruitment gave me the opportunity to get true recognition for my work ethic (as there was uncapped commission involved), so I accepted a job and made the move.

Turns out, although the recognition was something I wanted, the lifestyle of a recruiter was not for me at all! I found myself prioritising my work phone over personal life, living with alternative agendas to almost every client/candidate I spoke with and a lot of social drinking.

Although recruitment didn't work out for me, I taught me a very important thing; at my age, I know myself fairly well and I know what I like...and what I don't like! This meant for me, when deciding to move on from recruitment, I wanted to put myself in a position where I actually liked not only the benefits of the job (that commission sounded pretty sweet!), but also the role itself and the lifestyle that came with it.

Unfortunately, this isn't a piece of advice I can give for making career decisions, because it's experience that has taught me about myself allowing me to know I'm now going in the right direction, and that only comes with age.

My living situation

Newly living in the big bad capital

When I moved to London, I joined a flat-share and found myself living with a developer from Spain. At the time of moving in, I thought it was interesting, but interesting like "that's cool", nothing more.

We often had chats about projects he was working on and I liked the idea that he had the ability to create something from scratch, he just had to have the idea and then put in the work.

It wasn't until I was moving out of this flat that I started to discover an interest in coding. My flatmate and I had a few discussions and his biggest advice to me was to try learning a language and see if I enjoy it. He warned me it can get really frustrating trying to solve errors all day, so if I don't like problem solving, it may not be for me. Little did he know, problem solving is one of my favourite past-times.

Then I moved into a house, and you'll never guess what...another developer! This time a senior developer that manages a team. We've had a good few chats, and the thing that I loved most about the chats was the sense of passion I got from him immediately as he talked about coding. He encouraged me to spend time learning also and discussed with me a few different technologies.

These were my first exposures with people in the industry, and both lead me to look into this career more seriously.

My job

Working as a recruiter, you speak to a LOT of people! And being that I was in graduate recruitment, I spoke to a lot of young adults that honestly had no idea what they wanted to do. It was part of my job to go through that discovery with them and help them figure it out. Funny how much that rubbed off on me!

When you quiz someone on what they want out of a career, and all the different factors that come into play, you start to realise how little of these factors you've considered in your own decision making. It really put me in a position where I was evaluating by the day what I wanted and if those criteria were being fulfilled. It was the first time I was asking myself some of these questions.

On top of this self-discovery I was continually going through, we were also in a business transition that meant business developing in different areas. I spent a lot of time looking at potential clients in tech as it is a booming industry. In my research, I learned a lot about the lifestyle factors that come along with a job as a dev. This aligning with my desire to truly pursue a career, and getting advice from my flatmates/housemates, everything was pointing towards me making the move.

My new passion

As advised by my former flatmate and current housemate, I started dabbling with some coding...

At first I looked into Java as it was the term I was most familiar with, although I had no true idea of what I was doing. I was trying to learn alongside work, but work was consuming all of my mental energy and I was only getting about 1-hour a week of study in. This clearly was not ideal.

However, even with this small exposure, I did notice a lot of joy when I got to spend time learning. I had never enjoyed learning my entire life, so this was new. I felt like when I was looking at the code, I was looking at my brain on a screen (it's the only way I can think to describe it).

After a couple months of trying to learn like this, it wasn't quenching my thirst for learning the language. I had decided I was going to leave my job at Christmas and spend a month or two learning before pursuing some jobs; optimistic, I realise, but I planned on investing most of my waking hours into this.

My job was starting to get to me more and more, and I wanted out sooner rather than later, but I was committed to the cause. Apparently the stars were going to align for me and I was let go of my job a month earlier than I had planned to leave. Now this may sound like a bad thing, but as my dad always told me "every cloud has a silver lining"; It wasn't until I left the office that I realised how much of a burden of stress was weighing on my shoulders, because it was immediately lifted!

As soon as I got home, I jumped on Udemy and started a JavaScript course. I was advised it might be a better approach than Java, and turns out it was great advice!

I was so excited by learning JS that it was all I did from then on...

My choice: time for the bootcamp

Kodiri: my bootcamp of choice

During this new phase of learning, I decided to join a few meetups here in London and go to their events. In this I found myself at the Kodiri meetup promoting their January cohort.

At this point, all my learning was self-taught and I thought everything was going great. I was able to build some basic functioning web-apps and was excited about developing these further and building out a portfolio. Then I went to a React meetup and realised I knew nothing!

What was very apparent to me during my experience learning and then at the meetups, was that I learned very quickly and retained the information quite well. As it's a very logic driven industry, I felt I was just learning maths in a different language; I just had to translate. What was also apparent was that I was missing out on the opportunity to learn from others and even check if what I was doing was correct/efficient.

My biggest reservation when looking at a bootcamp was the same I held for all forms of education, pacing. Whether I would be slower or faster than those around me, would I be able to move at my own pace? Turns out, with Kodiri, yes.

Not only did Ricardo (the founder) consider things such as pacing, he paid attention to the entire format of the bootcamp and structured it very specifically. I had lots of questions for him and he answered them all to my pleasure.

The bootcamp covers JavaScript, React, NodeJs and everything needed in between, and is set up to mimic the working environment; e.g. we start each day with a standup, we do pair programming, we use slack etc. This was a big deal for me as it demonstrated that Kodiri were invested in me getting a job, not just learning technical skills.

My conclusion

What really and truly lead me to join the Kodiri bootcamp was a few different things, but it all boils down to; my ability to learn quickly from others being maximised in this setting, the structure of the bootcamp being individually paced and aimed at landing a job, and that I was currently not working and planning to take the time to learn on my own anyway. Not to mention, the price is extremely reasonable compared to many other bootcamps!

This is the first time I've invested into learning about my industry before jumping in. I'm investing in myself before any employer invests in me, and I know that I'm doing the right thing for me. I haven't felt a passion or desire for something like this since I played basketball. I can't wait to see where this leads me!

I will be going into much more detail of the structure of the bootcamp and what we've been getting up to in later posts, but I hope this has given some insight into why I personally chose the bootcamp route. It's not for everyone, it just so happened to be for me.