Learning By Building

Almost every developer will tell you that the best way to learn programming and be good at it is to build everyday, build a ton of stuff. I’ve read advice from other well experienced developers and this is pretty much their conclusion. You have to build! and I agree.

I recently discovered front-end mentor and I immediately got hooked … over the past few days I’ve been taking coding challenges (I’ve successfully completed 6 so far) all of which are completed in HTML, CSS & JAVASCRIPT (well, some of them are just html and css). I know its only been about a week since I began but I decided to document what I’m learning from this anyway so uhhhmm, yeah…. this blog is about that.

Before I discovered font-end mentor I’d basically just browse for challenges and maybe construct ideas on what I could build based on my current skillset but there’s a problem with that… I wasn’t getting specific detailed instructions. Yes this may sound strange but hang on, let me explain. Because most of what I was doing prior to taking challenges was coming from me and nobody was telling me what to do, it wasn’t as challenging, most of what I was doing would end up feeling like the same thing over and over because its coming from one point of view, but with challenges from font-end mentor its different: You’re given instructions on how a layout should (what technique you use is completely up to you as long as ALL of the desired outcomes are met). So here’s what I’ve learnt so far

• Responsive design
• Design flow
• Avoiding redundancy

Responsive design

I’m quite familiar with the whole concept of responsive design. The goal is simple Your site must be optimized for viewing and navigation on every device but I was missing the details of it like… Whats the difference between (min) and (max)

@media screen and (min-width: 600px){
     /* Apply this css until the screen is LARGER than 600px */
}
@media screen and (max-width: 600px){
     /* Apply this css until the screen is SMALLER than 600px */
}

There’s also media types in media queries

@media screen and (){ /* this css applies to SCREENS */ }
@media print and (){ /* this css applies to PRINTERS */ }
@media speech and (){ /* this css SPEECH rule is for screen readers */ }
@media all and (){ /* this css applies to ALL devices */ }

I now understand these , there’s also media features and I’m getting into those so… I won’t explain them here.

Design flow

Design flow is about keeping the look and function of your application consistent. This ranges from picking the right colors, font styles, font sizes, backgrounds, shadows, and even how elements respond to user actions. Here’s a landing page from one of my challenges:

Also, take a look at this layoutI built. Notice the consistency and responsiveness to confirm what I’ve saying above.

Avoiding redundancy

Okay i’ll admit, I’m not yet very good at this but I’m trying to get better. The challenges I’m taking come with a README FILE and a Style guide letting you know what fonts to use and their sizes respectively. The way I approach almost every challenge is start by writing the HTML then going through the style guide to correctly format everything. This saves me time because I get an understanding of what should look the same and what should not (again… I’m not the best at this ). You can take a look at my github repos for my source code to confirm.

Learning by doing is the best way to learn and I have confirmed it. Going forward I’m challenging myself further with more coding challenges everyday with the purpose of growing as a developer. I hope to do more complex challenges in the near future, for now though, I want to solidify my CSS so i’ll be doing more css focused challenges while learning Javascript. If you read my previous blog you might remember I mentioned setting up a Youtube channel to upload my coding sessions. Thats still happening, I’ve just been having trouble finding a very light, good performing software for recording my sessions, I tried OBS (full disclosure… OBS is a great application!) but it lags on my machine … I don’t know maybe I need to do some tinkering so yeah…

If you wanna join me you can take the coding challenges here. See all of my challenges here or follow me on twitter for more.

Alright cool.