Category Archives: Front End

Learning Web Design To Be A Better Developer

I know it’s been quite some time since you have seen my last post. Don’t worry. I did not disappear. I’ve just been consumed with work, and school. In case you were wondering I have not fallen off-track. I am still on my journey into web development. If you follow me on twitter you’ll see I’ve been posting my links to CodePen. I am working on improving my web design skills.

web design

If you navigate to the project section of this blog you’ll see that I have recently started posting my Free Code Camp projects there. I decided to do this to track my progress. And hopefully receive feedback. So, please, feel free to leave a comment.

I will continue posting more projects regardless of whether they are completed or not. So keep an eye out.

In case you are wondering why it has taken me so long to publish what I’ve built, I must confess: I am a bit of perfectionist. It’s terrible really. I did not feel comfortable posting my projects in the past because I am admittedly horrible at design.

Confessing this short coming is actually a relief. It allows me to seek out help and advice from others. And learn from the best. And hopefully it will encourage you to do the same, if you are in my boat. It’s okay to admit what you know or where you need to improve.

You are probably wondering, ‘where is she going with all of this? Does she have a point?’ Am I Right?
Don’t worry. I’m getting there.

It is critical for new developers to become comfortable in all areas of the stack, including design. When you state that you are full-stack, you should be able to fill the shoes of a web designer too.
As a full-stack developer it’s important take a harder line with yourself and develop your design skill in tandem with your programming knowledge.

If you are like me then you are not a horrible designer because of lack of artistic ability or creativity (because I honestly believe we all possess these qualities). Instead, it’s because you chose to only focus on programming, not design.

Focusing solely on programming places you at a disadvantage. It prevents you from learning anything about design beyond basic CSS. Important concepts like typography, color scheme, use of white space, responsiveness and alignment are fundamental elements of good design. Learning these concepts require time and energy and patience to perfect. So let’ dive into it.

In the coming months you will see my project page become fleshed out. I will redesign the web apps that I’ve been hording and post new ones in my project section.

I encourage you to do the same. Please leave a comment with a link to something you have designed and developed.

Learning JS Properly

I’m sure you have all come across the  blog JavaScript is Sexy, well the How to  Lean JavaScript Properly tutorial has been updated! 🙂 But , it seems I missed the boat on the study group! 🙁 They are already in week 5. Hopefully there is another  study group starting up on reddit or elsewhere, that I can join virtually. If anybody knows of one please let me know!!

Anyway, I figured I would continue on my own and document my progress here, while making study notes.

While covering Increment and Decrement Operators, in Chapter 2  of the book Beginning JavaScript (4th edition), I noticed  the way they covered this topic was rather unique. They stress that placement of your increment/decrement operators matters. I never gave it too much thought in the past, as I’ve pretty much only used basic pre and postincremnts/decrements in my for/while loops. But I’m now stopping to seriously think about the affect these operators will have on my future code.

Consider the following code for example:
someNumber = 25;
someVaraible = someNumber++ - 10

This code subtracts 10 from someNumber and then someNumber is increased by one. That’s easy the answer would be 16. No big deal right? But if you were to say have something a bit more involved like this:

someNumber= 4;
someVariable = SomeNumber++ * 2 + 1; //this equals 10
4 * 2 = 8 + 1 = 9 + 1 (the postincrement++) = 10. Here the number is increase AFTER the calculation.

or if you do
someNumber = 4;
someVariable = ++SomeNumber * 2 + 1; //this equals 11
4 + 1(the ++preincrement) = 5 * 2 = 10 + 1 = 11 Here the number is increased BEFORE the calculation begins.

As you can see the placement matters. It affects the entire computation of the code! Now, as someone who is has not wrote vast amounts of code it is very easy to make a mistake, which would cause errors in my code. So I’m glad I’m they pointed this out with example code. I recreated my own example here so that I can have a more solid understanding before moving on. Hopefully this helps you too!

Responsive Web Design & Study Hours

Last week I finished the Responsive Web Design course on Treehouse. Additionally, I’ve been reading Responsive Web Design with HTML5 and CSS3 by Ben Frain. So far I’ve learned quite a bit. The Treehouse  courses is a great introduction to Responsive Web Design while Frain’s book gives a deeper explanation and provides many useful tips.  I’ll post a book review when I finish reading.

In other news, yesterday I registered for a programming class, at my college.  I’m super pumped! I’m not sure what languages we’ll be learning, but I’ll find out soon enough.  It’s my first online course for a grade. Yikes! I’m not too nervous though, I’ve been teaching myself programming for a while now, this should not be too different.

As promised I’ve listed my study hours (sorry for being such a slacker, I’ll be better next time!)

Sunday: 0 hours
Monday: 3 hours
Tuesday: 2 hours
Wednesday: 3 hours
Thursday: 1 hours
Friday: 0 hours
Saturday: 3 hours

 


Learning the Front End

Recently I’ve completed quite a few courses on Codecadamy, Treehouse, and Code School. I’ve achieved many points and badges, but it will take more than watching a few videos and gaining achievements to become a developer. Old bad habit die slowly…I guess.

When I started this blog I was focused on learning Ruby until I was given some really good advice from a developer I met at  Women Who Code. She told me it was a better idea for me to get a good foundation and grasp of the front end before learning the back-end. I still really want to learn ruby, but I also value her advice and respect her opinion. She has amazing experience.

Today, I was reading a blog post by Matt Steele and he reinforced things I’ve heard before.  He said,

“You must build every day. This is a must. You’ll never make it unless you have a few sites under your belt and can prove that you know what you’re doing…”

I don’t know why I haven’t put more effort into building things. I have given myself tons of excuses like I don’t have enough time, my computer sucks, I’m waiting to purchase a Macbook Pro, etc.  Excuses don’t produce results. What am I waiting for? I guess I’m afraid all my projects are going to suck. There it is again…good ole Imposer Syndrome (never quite goes away).

I have put in a lot of effort and it will all go to waste unless I utilize the tools and skills I’m learning.  So I’ve decided to refocus. I’ve created a  few lists to figure out where I’m at.

 

Skills I’ve attained:

  • I am able to write valid HTML5 and CSS3
  • I have knowledge of the command line
  • I can wireframe a website
  • I am able to deploy a website to a web host
  • I can manage a domains DNS settings
  • I’ve learned how to use a content management system (Hello WordPress!)

 

Where I  still need  improvement:

  • Using JavaScript and JQuery
  •  Bootstrap/Foundations
  •  Responsive Web Design

 

What I still need to learn:

(This is a never-ending list really but I’ve narrowed it down considerably)

  • SASS/COMPASS
  • Git/Version Control
  • Photoshop
  • Illustrator

 

Building things will help me solidify my skills and better define my strengths and weaknesses. Additionally, focusing on being more pragmatic and getting out of the habit of haphazardly learning will be most beneficial (this is actually quite difficult).

On a positive note, I am on the right track. I’ve been going to Meetups, learning  through websites, connecting  with developers on twitter (looking at you CodeNewbies! 😉 ). If I incorporate the use of a timer and teaching others (with a few websites out there) I’ll master the front end in no time. So I will start logging my coding hours every Saturday night/Sunday morning.   When I finally get a Macbook Pro I will consider starting a video series too!

Wow…that was a long post. That’s all folks!