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 discoveredfront-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 inHTML, 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 discoveredfont-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 fromfont-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 simpleYour 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 alsomedia types inmedia 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 alsomedia 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 atthis 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 aREADME 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 atmy 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 morecss focused challenges while learningJavascript. If you read myprevious blog you might remember I mentioned setting up aYoutube 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 triedOBS (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 challengeshere. See all of my challengeshere orfollow me on twitter for more.

Alright cool.