How Not To Boil The Ocean-HTML/CSS and Javascript

How Not To Boil The Ocean

I haven’t gotten comfortable with video taping coding tutorials as of yet and I have a ton of knowledge and resources that I need to share with those of you wondering what it’s like to start from a non-technical career, essentially without any knowledge of programming, into one of pure geek madness fun.

So I am starting this new series to help you find your way to your dream career without Boiling The Ocean.
What is it that you need to know or start to learn when making this decision? Where do you start? How do you pick the right coding language that will make you the most desirable candidate? Most importantly, ask yourself, what you love to do, for me it is Web Dev and designing fantastic, cutting edge user experiences.
I am an aspiring full stack front end developer so I will focus on technologies, capabilities and knowledge related to that. For those of you that are looking to become data geeks, back end developers, software engineers or mobile app developers, this content can be useful but the “stacks” you will need to learn will be different. Please feel free to reach out to me and I will answer any questions you have about those careers, because I went through it all….the hard way, so you don’t have to.  You can also check out Bento. They have a nifty color coded way to figure out what stack you need for the role you want.
I will share with you the must have knowledge a front end web developer needs, the nice to have’s and the not necessary or as I like to call it, back burner stuff.

In this series I will create a blog post and explanation of starting points for each part of the stack that is necessary to find your dream role as a developer. I will share advice I received from mentors, reading job descriptions, and good old trial an error. I want to share this information because I feel like I spent a lot of time (about a year) learning programming languages, platforms and techniques that were interesting to me, but added little to my journey of becoming a full stack front end developer. In other words, I am going to help you to not waste your time attempting to do the impossible, or Boil the Ocean. I think the best place to start is a deep understanding, albeit an expertise of HTML5/CSS3 and Javascript.

HTML/CSS and Javascript will never steer you wrong.

  • Why do you need HTML/CSS and Javascript?
    HTML and CSS are the quintessential building blocks of all web based creations. Any other “wrapped” technologies will be inserted into the “body” of your HTML/CSS. Without needing to define them, HTML and CSS are the structure of your web page and style for the layout, respectively. Javascript is the “coding” you do to make your web applications and sites interactive and responsive. Together, they build things on the web.
  • When do you use HTML/CSS and JS?
    They will be used at all times, everywhere. I actually cannot think of an aspect in which you will not use them if you are interested in web development. As a kick-off point for a beginner and a way to get you into a role pretty quickly, knowing HTML/CSS and Javascript are musts. With Javascript, when you hear responsive design, or OOP(Object Oriented Programming) these are architectural components that are created using Javascript and it’s various libraries and frameworks which we will discuss later.
  • Real Life Example:
    When I finally stopped trying to learn everything (hence the Boiling the Ocean theme), in my journey learning to code, I began by working on learning HTML/CSS and Javascript. This included definitions, reading forums, Googling etc. As an aside, since I was not traditionally trained in a CS environment, concepts were not linear and I learned mostly by doing, failing, asking for help and then doing it again successfully. This was especially true with Javascript and all that it can do-(looking at you global/local variables). Although Javascript is a great place to start, don’t let the simple early concepts fool you. Javascript is a complex programming language that can do many, many things. As an example, I learned the semantics of writing functions and object lists in Javascript before I understood what OOP was. And in HTML/CSS, I wrote both markups in one file instead of separating the CSS out in a stylesheet because I didn’t grasp that “code” wasn’t written in one (Sublime) text file like a book. Don’t fret if this happens, eventually it will flesh itself out.


  • Resources:

GDI HTML/CSS Web Series Courses– It all started here for me in a weekend workshop where I was fed delicious mediterranean food and created a web page from scratch while knowing nothing about programming or coding. Now, GDI offers an entire web developer series at a low cost and sometimes free or scholarshipped. You can follow the complete track to be fully confident and ready to show off your capabilities to your dream company. The series is offered throughout the year and is suggested to be taken in order.

GA Dash– About a year and half ago, General Assembly launched their free online training program to compete with other free online coding tools like Khan Academy, Codecademy and Codeschool. There are 4 tracks for the web developer series and they are easy, fast and fun. At the end of the 4 tracks you will have built a personal website, a responsive blog, a business website, and a CSS robot. Did I mention it’s free and only takes about a weekend at most?
SkillCrush– SkillCrush is my new crush! It is an online program that offers “blueprints” and a 10 Day Boot Camp. The Bootcamp is free and  I recommend Part 1- Part 4  of the series as they focus on HTML/CSS and Javascript as well as the history of Computer Science and the web. Skillcrush’s platform is super fun and fast (10 days for the Bootcamp, a few months for Blueprints) and is a great way to just dig right in to the career you want. The 10 Day Bootcamp is free. I wish SkillCrush was around when I couldn’t figure out what the title of the job was that I wanted.
SkillCrush also has their Blueprint series which consists of five core competency blueprints at a minimal cost of $399, compared to the thousands of dollars you would spend at bootcamps. Their blueprints are as follows;
Web Designer, Web Developer, Mobile Web Designer, Freelance WordPress Developer and Ruby on Rails Developer. You simply pick a blueprint, pay and then you are on your way to learning the things you will need to know to begin your career.

I highly recommend these 3 resources to start your HTML/CSS and Javascript knowledge base. The best thing about them is that they get you up to speed in a a month or less.
They also give you that instant gratification that some of us like in which we can see something we create show up immediately in the browser. In other words, it’s more fun to learn to code when you can see your efforts as you learn.
Once you get the basics of HTML/CSS  (HTML5/CSS3 are the newest incarnations and you can find an explanation of the difference via Hongkiats blog) you will use it so much that there isn’t much ongoing training needed, it will really become second nature. Javascript however, is different all together. The best way to learn Javascript is to create projects and work on exercises using methods in books like Eloquent Javascript. I actually love Eloquent Javascript as it really encourages you to not move on to the next chapter until you fully grasp the concepts through end of chapter exercises you can do right in the browser. It is not a quick fix to learning Javascript, it has taken me over a year to read it and do all the exercises, but it is an invaluable tool for those serious about understanding what Javascript can do. After you get a really great insight into the logic of functions, objects and methods and how to incorporate JS Libraries and Frameworks like Angular, Bootstrap and jQuery(we will discuss these later), this skill set alone can take you extremely far in your programming career.
I hope this was helpful and please share with COF any HTML/CSS and Javascript resources you use and like.
Stay Tuned for the next installment-> How Not To Boil The Ocean Series-The DOM

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.