DEV Community: David Rodriguez

How to Start a Career in Coding: FAQ's from Aspiring Developers

David Rodriguez — Fri, 08 Sep 2023 18:21:55 +0000

Introduction

So you're captivated by the allure of coding, eh? You're not alone. The tech industry is booming, and the demand for skilled developers is skyrocketing, regardless of what doomsday prophets might tell you.

But let's be honest, diving into the world of coding can feel like navigating a labyrinth.

This guide offers the stunning secrets and manageable steps to kickstart your coding career, even if you're a complete newbie or coming from a non-technical background.

Demystifying the Fundamentals

Before you even think about mastering a specific language or framework, you need to get cozy with the core programming concepts.

We're talking variables, data types, conditional logic, loops, functions, and algorithms.

Free online courses like CS50 or Codecademy's intro courses are your best friends here.

Or, if you're looking to get a ton of high level experience fast, you can start on our free front end prep curriculum, which will get you up to speed on all things static HTML/CSS/JS.

Understanding these basics is like learning the ABCs before writing a novel.

Picking Your Poison: Choosing a Language

When it comes to programming languages, you're spoiled for choice.

Python is the darling of simplicity and versatility.
JavaScript is the lifeblood of interactive web pages.
Sometimes an older base language like C or Java can land you roles in modernizing systems - this is a HUGE need in tech right now!

The key is to pick one and go deep. Mastering one language is far more valuable than being a jack-of-all-trades but a master of none.

The Art of Building Projects

Once you've got the basics down, it's time to get your hands dirty. Start with a simple project like a calculator, a 2D game, or a to-do list app.

Break it down into bite-sized tasks and tackle them one at a time. When you hit a roadblock, don't shy away from seeking solutions online or asking for help.

These projects are not just for practice; they're portfolio gold!

Freebies Galore: Utilizing Free Resources

Who says you need to break the bank to learn coding? The internet is a treasure trove of free resources. From YouTube tutorials and podcasts to forums and documentation, the list is endless.
Some top picks include

freeCodeCamp
Codecademy
MDN Web Docs

And, of course... you can always dip your toe in with one of our free intro to web dev preview nights.

Tip: Keep a progress tracker and celebrate your small wins; they add up!

Plugging into the Coding Community

The coding community is more welcoming than you might think. Attend local meetups, engage in online forums, join Twitter chats, and find a study buddy.

Networking isn't just about landing a job; it's about learning from others, sharing knowledge, and building a support system.

Bootcamps and Certificates: Yay or Nay?

After you've built a solid foundation, you might consider leveling up through a bootcamp or certificate program.

These programs are like coding on steroids—they're intense, fast-paced, and they get you job-ready.

However, they're not for everyone. Weigh the cost, curriculum, and time commitment before taking the plunge.

If you ARE interested, you can learn more about ours here:
https://savvycoders.com

The Job Hunt Saga

You've got the skills, and now you need to show them off. Start applying for entry-level roles, internships, or even freelance gigs.

Your resume should scream "I'm a coder!"—highlight your projects, community involvement, and any relevant experience.

And remember, persistence is key. You might have to face a series of rejections before you hit the jackpot, but that's all part of the journey!

The Never-Ending Cycle of Learning

The tech world is ever-evolving. New languages, frameworks, and tools pop up like mushrooms after the rain. Continuous learning isn't just recommended; it's required. Even when you land that dream job, the learning never stops. Keep up with industry trends, take up new courses, and never stop being a student.

FAQ

How should a beginner start coding?
- Focus on understanding core programming concepts before diving into a specific language. Build simple projects to apply your skills practically.
How do I start my career in coding?
- Start by building a strong foundation in programming basics and a specific language. Engage in networking, consider further education, and start applying for entry-level roles.
Can I start coding with no experience?
- Absolutely! With consistent practice and the right resources, you can go from zero to hero.
Can I learn coding on my own?
- Yes, self-study is a viable path. Utilize free online courses, tutorials, and community forums to build your skills.
Can I learn coding at 40 and get a job?
- Age is just a number in the coding world. With dedication and the right resources, you can become job-ready at any age.
Is 30 too late to start coding?
- Not at all! Many developers start their coding journey later in life.
Am I too old at 40 years old to start a coding career?
- Absolutely not! Your unique life experiences can actually be an asset in the tech world.
Can I get a high paying coding job without a degree?
- Skills trump degrees in the tech industry. Build an impressive portfolio to showcase your abilities.
How many hours does it take to learn coding?
- Many experts agree that you should expect to spend at least 300-400 hours to become job-ready. Consistency is key.
- The good news? YOU decide how many days, weeks, months, or years that 300-400 hours takes to plow through - there are no bonus points for spreading it out over years.
- If you can speak to your experience, it will count in interviews - whether you gained it in 6 months or 6 years!
Is there a difference between programming and coding?
- Coding is the act of writing code, while programming encompasses the broader process of developing software.
How long does it take to learn coding from scratch?
- With consistent practice, you can go from a complete beginner to job-ready in 6 months to a year.
What is the easiest coding job to get?
- Entry-level roles in front-end web development, QA testing, and data analysis are generally more accessible.
Why did you quit programming?
- I didn't quit; I love coding and teaching others. Some people quit due to burnout or realizing it's not a good fit, but many find it rewarding long-term.
Is 55 too old to learn coding?
- It's never too late to learn. Age is not a barrier in the tech industry.

I hope this empowered you to go satisfy your curiosity and dig into some code!

Have more questions? Connect with me on LinkedIn:

David @ Windrose

The World's Easiest Collapsible Nav Bar

David Rodriguez — Wed, 26 Jul 2023 17:00:04 +0000

"How to make a collapsible nav bar with hamburger icon"

"How to make hamburger bar"

"Easy vanilla JS responsive navigation menu"

If these searches look familiar to you - and the disappointment that follows them is a feeling you're well acquainted with - then chances are, you're a newer coder who's looking to go mobile-responsive.

If we want users to stick around, we'll need our website to look gorgeous and work intuitively in a clean, organized way on ALL device sizes. If you've not lived under a rock for the last 10 years, then you've undoubtedly seen the "Holy Grail" of mobile-friendly features, the collapsible nav bar - sometimes referred to as a "Hamburger bar" for the fact that the most common icon we use to indicate it's presence is, in fact, shaped kind of like a hamburger.

The idea is simple.
When our app is displayed on a mobile device with a screen below a set size, our normal web page navigation bar, which might look something like this:
Desktop view of a bootcamp website

…will instead disappear and be replaced by this:
Mobile view of the same header - note that the icon is not a hamburger. You can use any icon you want! Just make sure users will intuitively understand what it's for!

Now our navigation bar won't take up the entire screen. When a user taps on that icon, our navigation bar should roll out smoothly below to display the list items - our links - in a column below.

So how do we do this? There are a dozen ways, probably, but I believe simplicity is the sturdiest foundation for quality engineering, so let's start with a very basic html template that can easily be built out later as needed:

<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>
  <body>
    <nav>
      <div class="hamburger">
        <i class="material-icons">menu</i>
      </div>
      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="page2.html">About</a></li>
        <li><a href="somebody@someplace.com">Contact</a></li>
      </ul>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

As you can see, it's pretty straightforward - but just in case, here's a breakdown of the code itself:

<!DOCTYPE html>
<html>
  <head>
    <!-- This will link our stylesheet to our index.html: -->
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!-- This will link the google icon for our hamburger bar 
      so we have access to use it -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>
  <body>
    <!-- Here we create our nav bar element -->
    <nav>
      <!-- and then give it a div to contain our icon and a class 
        name to use in our css to make it disappear and 
        reappear at will! -->
      <div class="hamburger">
        <!-- This is where we're sticking the icon itself -->
        <i class="material-icons">menu</i>
      </div>
      <!-- OUTSIDE of our hamburger icon's div container, we want 
        to place our unordered list of links that make up our nav bar 
        itself, and give it a different class - this is how we'll be 
        able to set up our javaScript function to listen for a click 
        and then display the hamburger bar ONLY based on media query, 
        and separately display the nav bar in association with our e
        vent listener, which will check for the click event happening 
        on the hamburger bar, and toggle our nav bar display on or 
        off, depending! -->
      <ul class="nav-links">
        <!-- our unordered list items - the links themselves -->
        <li><a href="index.html">Home</a></li>
        <li><a href="page2.html">About</a></li>
        <li><a href="somebody@someplace.com">Contact</a></li>
      </ul>
    </nav>
    <!-- and that's it! Then we just link to our script.js - remember, 
      this should go at the end of the body to ensure that no scripts 
      are trying to run before the element they are attached to 
      actually exists! 👍 -->
    <script src="script.js"></script>
  </body>
</html>

Great! So we have the "skeleton" of our nav bar. Let's flesh it out and make it it mobile-friendly, shall we? Enter - CSS!

.hamburger {
  display: none;
}

.nav-links {
  display: flex;
}

@media screen and (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
  }

  .hamburger {
    display: block;
  }
}

It doesn't get much easier than that. Here's what we have going on in that sample style.css file:

/* First we set up our desktop view - remember, 
  our icon is only meant to show on mobile, so 
  we have set it's "display" property to have a 
  value of "none" by default. */
.hamburger {
  display: none;
}
/* then we make sure our nav links will "flow" correctly
 by setting display to "flex" */
.nav-links {
  display: flex;
}
/* media query time! We're selecting anything that 
has a max width of 768px - this can be anything you want,
but generally you should choose the width of the most popular
mobile devices at the time, or mobile standards, like iPhone
9 or above or Samsung S20 or above. */
@media screen and (max-width: 768px) {
  /* now we set the nav links to display "none" - or dissappear 
  by default - every time the screen size is a mobile size. */
  .nav-links {
    display: none;
    /* we also want to make sure they now "flex" into a column 
    when they do display; */
    flex-direction: column;
  }
/* ...and our hamburger icon now defaults to be displayed as a block
rather than display "none", as it does on desktop view */
  .hamburger {
    display: block;
  }
}
/* The net result is that there is now a class which makes the icon display 
  when we're in mobile view, and a class which makes the nav bar disappear 
  in mobile view. */

We're almost there, believe it or not!

So now we have a desktop view that shows no hamburger icon but does show our nav links in a nice smooth row, and we have a mobile view where the hamburger icon DOES show up, and the nav links disappear instead - and if the nav links DO appear, they'll be in a column.
That just leaves the magic of change - of ACTION! Now we visit the world of JavaScript to power this magic:

var hamburger = document.querySelector('.hamburger');
var navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', function () {
  navLinks.style.display = navLinks.style.display === 'none' ? 'flex' : 'none';
});
I know. It CAN'T be that easy, right?
It really, really is.

Let's break this down:
// Because everything we're messing with is html, we need to give it a
// name, so-to-speak, over here in the world of js. We can do that by
// creating a variable to house each element we want to manipulate,
// and assigning the value as being basically, "the result of querying
// the DOM and retrieving any element matching X", where "X" is the name
// of the class or id we gave that element. Check it out:

// our hamburger icon:
var hamburger = document.querySelector('.hamburger');

// and our nav bar itself:
var navLinks = document.querySelector('.nav-links');

//  now we just add an eventlistener that listens to the hamburger icon
//  to receive a "click" event.
hamburger.addEventListener('click', function () {
  // every eventListener is built by default to accept two parameters - 
  // the event that it's listening FOR, and a "callback function", or a 
  // function it fires off in response to "hearing" the event occur. When 
  // this eventListener in particular "hears" a "click" on our "hamburger" 
  // element, it fires off this function, which is a terniary statement.

  navLinks.style.display = navLinks.style.display === 'none' ? 'flex' : 'none';
  // This teriary is basically an if-else statement (like all terniearies are)
  // and essentially says, "ReAssign the value of the 'display' attribute of
  // navLinks' style based on the result of the following assessment:
  // IF the value of the display property AT THAT TIME is currently set to
  // "none", change it to be "display: 'flex'.
});

And yes - that REALLY IS IT!

By incorporating mobile optimization standards like these, you’ll unleash the power of your apps on ANY device — the possibilities for specialization from here are endless, so start simple, yes… But then go play!

The world is your responsive web-designed oyster! 😁