Over the years as I write code and configure systems, I have mostly exclusively selected free and or open-source approaches to getting things done. Many open-source and sometimes just freemium setups would yield the same professional result as other paid alternatives, you should just be able to set it up. For example, I have secured dozens of sites including stacknerds.com with SSL certificates but I have never paid for an SSL because I found Let's Encrypt which is a is a non-profit certificate authority run by the Internet Security Research Group. Yet, lots of developers just add an SSL certificate to their cart when buying domains despite having the ability to configure one in a few minutes, although mostly cheap, configuring yours for $0 does not hurt and saves you a couple of dollars.

Also, apart from time, one thing that prevents many people from doing some basic things on their own is simply that they don't know how to do it. In this article, I am going to show you how one of such "free and simple" setups work.

How do you use an email like support@freecodecamp.org or normad@stacknerds.com with the convenience of receiving and replying to mails from your already familiar Gmail? On a normal day, you would just pay for G-Suite to have that out of the box. Worst, you can just stick to that C-Panel configuration with a mail client like WebMail.

Well, I bet you don't want to pay and also do not want to login to webmail every time to check new mails so let's go this free setup.

Pros of this setup;

• It's super simple for the users; be it you or members of your organization, It would be fun to receive a notification as you would for any other normal emails in your Gmail account with your business emails as well. You won't have to manually "go check" for mails in some obscure email client.
• The Gmail app is great and offers and good user experience, you might just want to stick to such an experience for all your mails.
• It's free

Cons of this setup;

• You need to set it up yourself

What you need

• A domain name with due access to domain name records settings to add special mail records.
• A mail relay service or mail servers such as Mailgun or SendPulse, SendPulse offers 12000 free mails a month if you use up all of that then you should indeed be paying, Mailgun used to give 10000 but now has a different strategy which still boils down to free for a few thousand mails. You can find an alternative, so long as it has support for email routing.
• A Gmail account.

I am sorry that's impossible

So I have been using the setup I was planning to show you for years and procrastinating on writing this article, upon logging into Mailgun the mail routing service has been made a premium feature and as a result, a paid one however all my previous setups are working. Additionally, other services such as SendPulse use webhooks to forward email, even though it's free, it ceases to be a "minimal setup" costing time. That invalidated this entire article.

So I contemplated whether I should go ahead and make the tutorial with Mailgun's paid feature and remove free from the title. (It's cheap though, and tutorials are made for paid services too), but then it dawned on me that if I removed free from the title you and me (oh no!) would have to pay for a minimal setup, I have nothing against paying for services but when you are a single developer or a young startup trying to dish-out MVPs you want to find out every way to cut cost.

Let's fix it.

So I found another way to get this done! In addition to the pro's listed before, this is even better as it's open-source! We would use fowardemail.net's free-email-forwarding to set up our professional email and GMAIL. check out their repo on GitHub.

Before I dive into the pretty simple set up, what is email forwarding and how does it work? Email forwarding generally refers to the act of re-sending an email message delivered to one email address to other email addresses. In this case, we want to simply forward mails sent to your domain work addresses to designated Gmail addresses, we would also set up "reply as" that would enable you to reply to your professional mails.

Like I mentioned earlier for this to work, we need to add MX (Mail eXchange) records to your domain name settings (records). These MX records would essentially show mail services the server that is in charge of handling (receiving and perhaps forwarding) your mails. In this case, our chosen server is fowardemail.net. You could set up the mail server on your domain if you want, but using fowardemail.net servers is just fine!

Watch me do it, already.

See:

Free Email Forwarding for Custom Domains | Forward Email

ForwardEmail.net

Forward Email

Leave questions/comments on YouTube and on Twitter and Facebook @stacknerds.

In this blog post, I would walk you through creating a portfolio website with OctoberCMS. You can watch my video on YouTube that shows you same; in unison with this article if that would help you get it done faster.

Background

If you are looking to build a Portfolio website with OctoberCMS chances are you already at least know what it is especially in relation to other tools like WordPress and Laravel.  But I would go ahead and tell you again briefly in my own words.

OctoberCMS just like WordPress is a content management system (CMS)! built on the most popular and appreciated PHP framework Laravel. But beyond that, it is a flat-file CMS meaning "everything" you do on it is saved as configuration/code in files, unlike with WordPress where the configurations are saved in a database. This makes it quite easy for you to move OctoberCMS projects around and works very well with git, Also OctoberCMS unlike WordPress is developer centric, it gives you more control by making it relatively easier to build plugins as everything is not a "Post" you can design extra functionalities in at least a sensible way writing code that follows the MVC pattern. So if you hate WordPress (which actually works as well 🙂) welcome!

The portfolio website we would construct essentially has a blog section, a projects section and a contact form.

What do we need to build this site?

This tutorial is not for absolute beginners but it not bad if you try as a starter  it's not that complex with some grit a beginner can get this up but lets see the required background; Ideally you should have basic knowledge of HMTL/CSS, JavaScript, databases and PHP, it would also be great if you know some Laravel. Lastly, you should be able to setup up a LAMP, XAMP or MAMP stack. That in simple language means being able to set up a php development environment for at least Linux, Windows or macOS.

That said, you should have:

• PHP with some of its extensions and Libraries required by OctoberCMS
• A database server like MySQL
• A text/code editor like Sublime Text or VS Code

For advanced folks,

• A Laravel development environment including composer would be great!

Basically that means OctoberCMS should be able to run on your system be it Windows, Linux or MacOS, I would provide some assistive material at the end of the article pointing to resources that can at least get, PHP, MYSQL and OctoberCMS running on your system.

Hence forth, I assume that you have the requirements necessary to run October so lets go ahead and create an October project, and start building our site immediately.

Creating an OctoberCMS project!

I have a Laravel Development Environment setup with Laravel's Homestead so among the many ways available to create an OctoberCMS project, I would use composer to create my project from the terminal like so:

composer create-project october/october devfolio

devfolio is the name of my project it could be anything you specify! Remeber, the most important thing is creating an OctoberCMS project no matter how, you must not use the terminal as our setups may be different.

Project Setup

After creating the project I would like to create a database for my site, and make sure my site is connected to the database correctly so I can run the migrations (get the necessary database tables created within the database), set up some environment configurations and then tryout my the installation.

Build a portfolio website!

No matter how you got one running, now that you have an empty OctoberCMS project up, lets started with actual work. To get this porfolio website up we need a theme an HTML theme! Naturally, we would have to make one!  We are actually going to make one but not from scratch, I mean you really don't have time do you? 😏

Get the Theme

I search for themes to create this portfolio site and the one I liked that met the criteria; Open Source (free), simple, neat/classy and mobile friendly is DevFolio a developer portfolio theme that looks really great and you can customize it for anyone not just devs. Do well to download DevFolio.

DevFolio theme link : https://bootstrapmade.com/demo/DevFolio/

Now that the theme is available:

1. Create an empty theme in OctoberCMS
2. Add the pages we want our theme to have, in this case a homepage, project-detail and a blog-detail page. You might have noticed there's no blog and projects page. So, because projects and blogs are listed on the homepage. You would be able to attach a route to each page during the creation process and can give what ever routes you want. e.g / for home and blog/:slug for blog articles.
3. Create a main layout in the CMS section, you can update the project and blog detail page to share the common layout.

Copy the HTML code into the theme files

This is nothing more than copy and paste with a few tweaks! First;

1. Copy all the resouces folders in the theme folder you unziped such as css, img, lib etc and then navigate to the project in your file system visit themes -> devefolio -> assets and you can past all the theme resouces there! Theme resources are basically css files, images, javascript files and the rest.
2. Now that we have the assets available within the project, copy the code for each file in the theme folder you downloaded and paste in the theme files within the devfolio theme folder! For example copy the code within index.html in the unzipped theme folder and paste in home.htm or whatever file name you gave you homepage within the CMS. Do this for all the pages of theme!

Loading theme assets

If you have successful you should be to visit pages for you portfolio site but these pages would look pretty awful and there is no CSS or styling loaded and we have to see how to load that! In OctoberCMS the theme-filter is used to attach assets to pages.

So we would make the following changes to all files referenced from within our theme.

All .css files looking like :

<script type="text/javascript" src="assets/css/style.css"></script>

would become

<script type="text/javascript" src="{{ 'assets/css/style.css'|theme }}"></script>

All .js files looking like :

<script type="text/javascript" src="assets/js/script.js"></script>

would become

<script type="text/javascript" src="{{ 'assets/js/script.js'|theme }}"></script>

That's too many examples already! Basically we are just introducing Octobers templating language, we use {{ }} to evaluate expressions and in this case evaluate a path within apostrophes we attach the theme-filter mentioned above to let October know that it's a theme asset and it must load if from a special location. (assets)

Get the Plugins

You can get the plugins by simply searching their names from the store wihin the OctoberCMS dashboard. More information about each plugin we use can be obtained from their respective links below.

• Indikator.News (https://octobercms.com/plugin/indikator-news)
• ArrizalAmin.Portfolio (https://octobercms.com/plugin/arrizalamin-portfolio)
• Laminsanneh.Flexicontact  (https://octobercms.com/plugin/laminsanneh-flexicontact)

Integrating Plugins with theme

To integrate the plugin with the theme we need to add the various plugin components on the different pages we need. For example we need the post list and project list components on the homepage and then a post item and project item on the blog detail and project detail pages respectively.

There's a lot going on that could spiral into several paragraphs of explaination, here I provide the snippets for you to copy and paste and link to part of the video where this is being done.

Adding blog list component;

After adding the blog list component to home page as shown below replace the blog section row containing the post list with the snippet following.

      <div class="row">
      	{% for post in posts %}
        <div class="col-md-4">
          <div class="card card-blog">
            <div class="card-img">
              <a href="{{ post.url }}"><img src="{{ post.image|media }}" alt="" class="img-fluid"></a>
            </div>
            <div class="card-body">
              <div class="card-category-box">
                <div class="card-category">
                  <h6 class="category">Travel</h6>
                </div>
              </div>
              <h3 class="card-title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
              <p class="card-description">
               {{ post.introductory|length > 100 ? post.introductory|slice(0, 100)|striptags~ '…' : post.introductory|striptags }}
              </p>
            </div>
          </div>
        </div>
        {% endfor %}
    
      </div>

Adding project list component;

After adding the project list component to home page as shown below replace the section row containing the project list with the snippet following.

      <div class="row">
      {% for item in portfolio.portfolio %}
        <div class="col-md-4">
       {% set image = item.images.first %}
          <div class="work-box">
            <a href="{{ item.pageUrl }}" >
              <div class="work-img">
                    <img src="{{ image.path }}" class="img-responsive" alt="{{ image.title }}">
              </div>
              <div class="work-content">
                <div class="row">
                  <div class="col-sm-8">
                    <h2 class="w-title">{{ item.title }}</h2>
                    <div class="w-more">
                      <span class="w-ctegory">Web Design</span> / <span class="w-date">{{ item.created_at|date('j m Y') }}</span>
                    </div>
                  </div>
                  <div class="col-sm-4">
                    <div class="w-like">
                      <span class="ion-ios-plus-outline"></span>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
        {% endfor %}
  
      </div>

Blog detail page and component;

title = "blog-detail"
url = "/blog/:slug"
layout = "main"
is_hidden = 0

[newsPost]
slug = "{{ :slug }}"
==
{% set post = newsPost.post %}

{% put head %}
{% partial 'head' title=post.title %}

<meta name="description"
  content="{{ post.introductory|length > 60 ? post.introductory|slice(0, 60)|striptags ~ '…' : post.introductory|striptags }}">
<link rel="canonical" href="{{ post.url }}">
<link rel="image_src" href="{{ post.image|media }}" type="image/png" />
<meta name="keywords"
  content="{{ post.category.name}}, {% for tag in post.tags %}{{ tag }}{% if not loop.last %},{% endif %} {% endfor %}">


<!-- Facebook Meta Tags -->
<meta property="og:title" content="{{ post.title }} | Fenn-CS" />
<meta property="og:type" content="article" />
<meta property="og:description"
  content="{{ post.introductory|length > 100 ? post.introductory|slice(0, 100)|striptags~ '…' : post.introductory|striptags}}" />
<meta property="og:image" content="{{ post.image|media }}" />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="Fenn-CS">
<meta name="twitter:title" content="{{ post.title }} | Fenn-CS">
<meta name="twitter:description"
  content="{{ post.introductory|length > 60 ? post.introductory|slice(0, 60)|striptags~ '…' : post.introductory|striptags}}">
<meta name="twitter:creator" content="{{ post.user.getFullNameAttribute() }}">
<meta name="twitter:image" content="{{ post.image|media }}">
{% endput %}

<!--/ Intro Skew Star /-->
<div class="intro intro-single route bg-image" style="background-image: url(img/overlay-bg.jpg)">
  <div class="overlay-mf"></div>
  <div class="intro-content display-table">
    <div class="table-cell">
      <div class="container">
        <h2 class="intro-title mb-4"> {{ post.title }} </h2>
        <ol class="breadcrumb d-flex justify-content-center">
          <li class="breadcrumb-item">
            <a href="#">Home</a>
          </li>
          <li class="breadcrumb-item">
            <a href="#">{{ post.category.name }}</a>
          </li>

        </ol>
      </div>
    </div>
  </div>
</div>
<!--/ Intro Skew End /-->

<!--/ Section Blog-Single Star /-->
<section class="blog-wrapper sect-pt4" id="blog">
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <div class="post-box">
          <div class="post-thumb">
            <img src="{{ post.image|media }}" class="img-fluid" alt="">
          </div>
          <div class="post-meta">
            <h1 class="article-title">{{ post.title }}</h1>
            <ul>
              <li>
                <span class="ion-ios-person"></span>
                <a href="#">{{ post.user.getFullNameAttribute() }}</a>
              </li>
              <li>
                <span class="ion-pricetag"></span>
                <a href="#">{{ post.category.name }}</a>
              </li>
              <!--      <li>
                  <span class="ion-chatbox"></span>
                  <a href="#">14</a>
                </li> -->
            </ul>
          </div>
          <div class="article-content">
            {{ post.introductory|raw }}
            {{ post.content|raw }}
          </div>
        </div>


      </div>
      <div class="col-md-4">
        <div class="widget-sidebar widget-tags">
          <h5 class="sidebar-title">Tags</h5>
          <div class="sidebar-content">
            <ul>
              <li>
                <a href="#">Web.</a>
              </li>
              <li>
                <a href="#">Design.</a>
              </li>
              <li>
                <a href="#">Travel.</a>
              </li>
              <li>
                <a href="#">Photoshop</a>
              </li>
              <li>
                <a href="#">Corel Draw</a>
              </li>
              <li>
                <a href="#">JavaScript</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--/ Section Blog-Single End /-->

<!--/ Section Contact-Footer Star /-->
<section class="paralax-mf footer-paralax bg-image sect-mt4 route" style="background-image: url(img/overlay-bg.jpg)">
  <div class="overlay-mf"></div>

Project detail page component;

title = "project-detail"
url = "/projects/:item_slug"
layout = "main"
is_hidden = 0

[item]
item = 1
itemSlug = "{{ :item_slug }}"
catListPage = "portfolio/category"
tagListPage = "portfolio/tag"
==
{% set project = item.item %}

{% put head %}
   {% partial 'head' title=project.title %}
{% endput %}

<!--/ Intro Skew Star /-->
  <div class="intro intro-single route bg-image" style="background-image: url(img/overlay-bg.jpg)">
    <div class="overlay-mf"></div>
    <div class="intro-content display-table">
      <div class="table-cell">
        <div class="container">
          <h2 class="intro-title mb-4"> {{ project.title }} </h2>
          <ol class="breadcrumb d-flex justify-content-center">
         <!--    <li class="breadcrumb-item">
              <a href="#">Home</a>
            </li>
            <li class="breadcrumb-item">
              <a href="#">{{ project.category.name }}</a>
            </li>
            -->
          </ol>
        </div>
      </div>
    </div>
  </div>
  <!--/ Intro Skew End /-->

  <!--/ Section Blog-Single Star /-->
  <section class="blog-wrapper sect-pt4" id="blog">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <div class="post-box">
            <div class="post-thumb">
            	{% set image = project.images.first %}   
              <img src="{{ image.path }}" class="img-fluid" alt="">
            </div>
            <div class="post-meta">
              <h1 class="article-title">{{ project.title }}</h1>
              <ul>
             <!--    <li>
                  <span class="ion-ios-person"></span>
                  <a href="#">{{ project.user.getFullNameAttribute() }}</a>
                </li>
                <li>
                  <span class="ion-pricetag"></span>
                  <a href="#">{{ project.category.name }}</a>
                </li> -->
           <!--      <li>
                  <span class="ion-chatbox"></span>
                  <a href="#">14</a>
                </li> -->
              </ul>
            </div>
            <div class="article-content">
               {{ project.description|raw }}
            </div>
          </div>
 
 
        </div>
       <!--  <div class="col-md-4">
          <div class="widget-sidebar widget-tags">
            <h5 class="sidebar-title">Tags</h5>
            <div class="sidebar-content">
              <ul>
                <li>
                  <a href="#">Web.</a>
                </li>
                <li>
                  <a href="#">Design.</a>
                </li>
                <li>
                  <a href="#">Travel.</a>
                </li>
                <li>
                  <a href="#">Photoshop</a>
                </li>
                <li>
                  <a href="#">Corel Draw</a>
                </li>
                <li>
                  <a href="#">JavaScript</a>
                </li>
              </ul>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </section>
  <!--/ Section Blog-Single End /-->

  <!--/ Section Contact-Footer Star /-->
  <section class="paralax-mf footer-paralax bg-image sect-mt4 route" style="background-image: url(img/overlay-bg.jpg)">
    <div class="overlay-mf"></div>

Power the contact form

Replace the form in home.htm with following code, if you check closely just the a few parameters have been added to the opening form tag, but to avoid any confusion you may just replace the whole form.

        <form class="flexiContactForm" role="form"
                               data-request="{{ contactForm }}::onMailSent"
                               data-request-update="'{{ contactForm }}::confirm': '.confirm-container'">
                      <div id="sendmessage">Your message has been sent. Thank you!</div>
                      <div id="errormessage"></div>
                      <div class="row">
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
                            <div class="validation"></div>
                          </div>
                        </div>
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                            <div class="validation"></div>
                          </div>
                        </div>
                        <div class="col-md-12 mb-3">
                            <div class="form-group">
                              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                              <div class="validation"></div>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3">
                          <div class="form-group">
                            <textarea class="form-control" name="body" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
                            <div class="validation"></div>
                          </div>
                        </div>
                         {% if contactForm.enableCaptcha %}
                           <div class="form-group">
                                <div class="g-recaptcha" data-sitekey="{{ contactForm.siteKey }}"></div>
                           </div>
                         {% endif %}
                        <div class="col-md-12">
                          <button type="submit" class="button button-a button-big button-rouded">Send Message</button>
                        </div>
                      </div>
                    </form>

Wrap Up

Adding dynamic place holders and partials

I would add the following placeholder to the head of the main layout :

{% placeholder head %}

I would add the following partial

<title> {{ title ?: '' }} | Fenn-CS  </title>

SEO for Blog and Portfolio Projects

<meta name="description" content="{{ post.introductory|length > 60 ? post.introductory|slice(0, 60)|striptags ~ '…' : post.introductory|striptags }}">
<link rel="canonical" href="{{ post.url }}">
<link rel="image_src" href="{{ post.image|media }}" type="image/png" />
<meta name="keywords" content="{{ post.category.name}}, {% for tag in post.tags %}{{ tag }}{% if not loop.last %},{% endif %} {% endfor %}">


<!-- Facebook Meta Tags -->
<meta property="og:title" content="{{ post.title }} | Fenn-CS" />
<meta property="og:type" content="article" />
<meta property="og:description" content="{{ post.introductory|length > 100 ? post.introductory|slice(0, 100)|striptags~ '…' : post.introductory|striptags}}" /> 
<meta property="og:image" content="{{ post.image|media }}" />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="Fenn-CS">
<meta name="twitter:title" content="{{ post.title }} | Fenn-CS">
<meta name="twitter:description" content="{{ post.introductory|length > 60 ? post.introductory|slice(0, 60)|striptags~ '…' : post.introductory|striptags}}">
<meta name="twitter:creator" content="{{ post.user.getFullNameAttribute() }}">
<meta name="twitter:image" content="{{ post.image|media }}">

Email setup with SMTP

To be able to send emails, you need to configure you site to work with a provider. Which ever provider you choose is up to you but OctoberCMS has out of box support for Mailgun, SendMail, Mandrill amongts other options, found on the settings page, I just selected SMTP and added my Mailgun credentials! In the video, I did mention sendpulse due to its free volume you might want to check that out if you dont have something you use already.

Resources

Github : https://github.com/StackNerds/portfolio-website-octobercms

Windows

• How to set up a PHP development environment on Windows Subsystem for Linux (WSL)
• A simplified approach to installing laravel using Homestead on windows
• Install  Apache, PHP, MySQL on Windows(YouTube)

Linux

• How To Install Linux, Apache, MySQL, PHP (LAMP) stack on Ubuntu 18.04 (Ubuntu 16.0 available)

General

• OctoberCMS official installation guide
• Laravel Docs

So yeah! the "literature lecture" in part 1 of this series on deciding whether you should really learn how to code is gone! You are now well versed with the reason why you have decide to learn coding and I hope that generates more passion in you. If you are here, you are most likely on a path to become a computer programmer. Congratulations! Let's go ahead and now answer the first question that usually come up : So, where do I start, what language do I learn first?!  Well, pause.

When non-programmers hear about programming, some of the first things that usually come to their minds is how some big names in "Computer Programming" (actually technology) such as Mark Zuckerberg who created a revolutionary website; Facebook, Bill Gates who built a tech empire; Microsoft, maybe because he could code and all the others like Steve Jobs who wielded some form of innovation with tech. It's a talk of disruption.

Yes, there is some correlation. It makes sense to hear of programming and think in that way maybe because you don't have the details; but wait, most of these people are big names in Technology and Entrepreneurship not exactly computer programming. For example among the 3 mentioned names only Bill Gates is a computer programmer doubling as an entrepreneur. Steve Jobs was a business magnet, industrial designer, investor and entrepreneur. Oops, someone looks surprised. It was Steve Wozniak who championed technical innovation at Apple and what Steve Jobs had to offer was his "design and business" expertise while Mark Zuckerberg is a psychology major who learned programming and created something that changed the world. Wikipedia describes him as an American internet entrepreneur and philanthropist. (Which icons do we have then in programming? Google up Guido Von Rossum or James Gosling or maybe Linus Torvalds. Well well, that's not the point but it does give you an idea! They are so many of them!)

So whenever people who get inspired by these tech innovators decide to start learning programming, What they would expect at first from a Computer programming introduction is a lecture like maybe "first steps in building mobile apps" or maybe "introduction to programming websites". They want to get up to speed fast and change the world like Zuckerberg or Bill Gates. Well I am sorry! Introduction to Computer Programming is in fact synonyms to Introduction to Computer Science. The good news is, all what you expected is buried in Computer Science. So finally! welcome to I want to learn Computer Science and Programming part 2! Let's start.

Following our new perspective, the questions Where do I start and What programming language do I learn first! can be answered separately which implies the first step to learning programming it not learning a programming language but learning how to solve problems. But, as you can already guess the questions and their answers look like;

1. Where do I start → Fundermentals of Computer Science.
2. What language should I learn first → Usually easier to answer after Learning "Fundermentals of Computer Science". Also, opinions on what is best to learn first are divided but in this article I exploit some common choices and promote languages that are near computer architecture for beginners. Of coures each option has it's pro and cons.

Fundamentals

If you’re a self-taught engineer or bootcamp grad, you owe it to yourself to learn computer science. Thankfully, you can give yourself a world-class CS education without investing years and a small fortune in a degree program. -TeachYourselfCS.com

If you already tried programing in the past and "stopped growing" at some point, "have built some websites in the past" or learned how to do some very specific kind of programming task like building an app from a bootcamp, you might have come across certain words and or concepts that really really got you confused and lost somewhere along the line as your knowledge grew after such a training. Unless you are pretty smart, you may have noticed your inability to try or take on certain kinds of tasks or problems that other elite programmers would. There's something missing.

Also, when or if you start learning programing, there are lots of "jargons" (actually terms) that usually come up when explaining concepts that usually would require going back to computer science or computer architecture. Proceeding to teach programming without at least giving the learner these basics from computer science would always mean watering down the meaning of such concepts.

A good example is when we try to explain what a Variable is. When explaining the concept of variables to someone who does not understand what Memory and Memory Locations are, it's highly possible to create a false abstract view or way of seeing variables in the learners mind.  Well well, we may simply define a variable as a value or entity that can change just as we know and see it in common sense. This could work at first but things would get nasty when you try to go deeper.

Actually for someone to understand concretely, what a variable with respect to computers and programming means, this person must understand the concept of memory, addressing and naming (bother not about them for now). You may know a variable in anyway that allows you proceed with the basics. That's ok, but what is wrong with learning the accurate thing? or building on the very foundations that determine whether the structure you build collapses or stands?

So if you want to learn how to program, it then, makes more sense to first of all understand how what you would be programming (the computer) works. Yeah yeah, so what are the things taught in Computer Science and what are the benefits, you ask.

Well, you would learn Computer Architecture, Data Structures and Algorithms, Operating Systems, Computer Networking, Databases, Languages and Compilers, Computer Systems (like clouds) and Programming! This does not follow an order but CSC courses are usually organized in a way that would permit you use, your previous knowledge to learn the new concepts being introduced. At the end everything would connect. You only need the basics, I mean the very basic of these topics which are of course non-exhaustive to develop fulfilling and well-remunerated engineering skills over time, it may be valuable commercial work, a breakthrough open-source project like Linux, Firefox or another programming framework like Laravel? :), becoming a great technical leader or making high-quality individual contributions.

A good place to start with Computer Science? Well there are a couple of great online courses, if you are okay with reading, which I strongly recommend, the Open Source Society University has a great CSC course  or you can also follow the great recommendations at TeachYourselfCS.com. If you prefer videos you can follow CrashCourses' Computer Science Series or maybe FreeCodeCamp's Computer Science and Software Engineering Theory with Briana.

Don't get it twisted. The Computer Scientist and the Programmer are NOT exactly the same and the role of computer science is not to teach you programming specifically, the Programmer, I mean that elite programmer, just have to understand "very very" well the fundamentals of Computer Science to be able to perform his craft nobly.

What language to learn first?

I did mention that there's no designated language to start with and the decision is influenced by opinions (mostly academic ones not random opinions, like gossip on footballers. For example what language would Harvard or MIT use?). So, there's no fixed rules. However, there are widely accepted and commonly used languages such as Python, Java, C and now Javascript used in introducing programing.

One of the most favored criterion that is used in picking introductory programming languages is simplicity since it's usually for beginners, however the criteria I recommend is generality (a general-purpose language), architectural closeness of a language to computer organization and sufficient human friendliness together over simplicity, let's review some top choices with the arguments for why you should pick any of them.

Last stop before we review the programming languages, I have mentioned the term Computer Architecture and or Computer Organization a couple of times. You may ask, "what do you mean by understanding architecture.",  "Should I know where the hard drive is, or be able to tear down the motherboard and locate the C-MOS battery before I can learn programming?" Well, no.

Computer organization is an important first look at computing below the surface of software. In our experience, it’s the most neglected area among self-taught software engineers. - TeachYourSelfCS.com

It's just basically understanding how the computer is organized conceptually at the level of the hardware, which eventually allows software to run. So technically it would help you among other things, know where a hard drive falls in the organization of a computer, conceptually.

C/C++

Machine language is the only language the computer understands! It's just working with a couple of electric bits, it's complex and suicidal to program in machine language, so high level programming languages like C were created to save your head. So basically, all code you write in any programming language is converted to machine language. Despite its difficulty is the fastest and most efficient language, it follows the exact architecture of the computer with near zero abstraction. Our insufficient "intelligence" is the only thing drawing us back, otherwise all programs would be written in Machine Language (At first, they were, that's why programmers where extremely few and highly gifted individuals).

C/C++ considered the bread and butter of programming, a language in which almost all low level systems such as your Mac OS, or Windows is written in. Infact C is the language that was used the create the Python programming language, which is undoubtedly the most popular language used in introducing programming. So why C? You sure  is not interested in making another OS or programming language or maybe you are but it's the most popular choice so why would I advocate for it first?

C is the closest programming language to machine language which is flexible enough for humans to easily work with, it models problems from the perspective of a computer and remember the goal is to learn programming while understanding the basics of computers and its science. At some point, you part would change and you might get into game development, web development, or machine learning applications, your choice of language would now be influenced by its application. Starting to learn programming with C means, you would hardly get surprised by the way other languages are organized and works. Many languages including Python, Java and Google's Go and recently Dart and C-Styled. Meaning they learn syntax and semantics from C. It might not be the simplest language to start with, but it would help you understand a lot of things that would help in other programming languages when you pick them up.

Usually when you start with a certain programming language and move to another one, your brain would expect the new programming language to work like the first one you learnt and hence think of the new language in terms of the old one. If you think all that is cool, well then start with C otherwise, let look at python :).

Python

Python is widely accepted as the best  programming language to learn first. Python is extremely simple to begin with and its fast. Unlike C, Python is an interpreted language and can be more forgiving with errors. Python is implemented in C and as a result,  borrows from the C power. Python is more abstracted than C, provides a simpler syntax, much faster to debug but generally slower (the significance of speed here is quite low though). Python makes it way simpler to implement various data structures and carry out computations on them. Due to this, python is a great language to learn ALGORITHMS which is basically what gives "thought" to computers.

Python is highly used in the field of Machine Learning and AI. It also has the advantage that it works on more platforms that C, for example we build web applications in Python but this is not the case with C.

Java

Java is a general purpose platform independent language which enforces Object Oriented Patterns in which almost everything is modelled as an object which is closed to the way we humans see, understand and think about things. Java is widely used for building  enterprise applications such as banking systems and is known to be extremely powerful though a little slower than counterparts like C because it runs on a virtual machine (the Java Virtual Machine - JVM) for this reason, Java programs need to be "interpreted" to first run on the JVM before being finally being "interpreted" to run on the actual machine.

Java intentionally hides several details that C exposes and does work that you are required do to yourself in a language like C automatically (for example Garbage Collection).

Java looks a lot like C/C++ but has fewer low-level facilities which helps to hide the underlying computer architecture. For this reason, Java is a good language to learn after C as it would help you better understand ABSTRACTION (the way implementation details are hidden)  a core computer science concept.

Moving with the tides.

We could say time moved fast but no! Technological evolution moved so fast. Computing technology improved and worrying about certain things like speed has become lesser burdens. The industry has grown also, many tools sprout out, new domains have been created and languages to match these specificities have come up. So away from sorely prioritising architecture over everything, we would consider some of these changes and get into another set of possibilities.

I don't particularly recommend "moving with the tides" as a beginner way to learn programming but if learning to program is not purely motivated by the drive to truly understand the facets or computer science and programming, but is more inclined towards factors such as usability, adoption and job market then here are some languages you can learn first;

GoLang

Go is a statically typed, compiled, general purpose programming language that specializes in concurrency developed at Google. Go is syntactically similar to C, but includes facilities for  memory safety, garbage collection and structural typing. (If you don't understand these words then Go as predicted may be a bad choice for a starting programming language, but moving with the tides still.)

Golang is very much like C but has facets that has seen it being mostly used and promoted as DevOps language due to its highly concurrent nature and sleekness in problems involving distributed networks, cloud services, and other complex back-end-type implementations. You can do pretty much anything with Go.

Ruby

Ruby is an interpreted, high-level, general-purpose programming language. It has grown in popularity over time and the author Yukihiro "Matz" Matsumoto said he made because the object oriented modules in python "felt" like plugins and that he did not like that so he decided to make a genuine object-oriented, easy-to-use scripting language. Many successful projects including github.com, gitlab.com, airbnb and dribble were built on Ruby.

JavaScript

Javascript initially design to work within the browser as a frontend language has grown not only in the frontend sector but has grown beyond the browser it was initially designed for.  Even though javascript is mentioned here, it is, according to my chosen criteria the worst language to learn first. So because, it fails the very first criteria by not being a general-purpose language and the second by being highly abstracted, however it's still a good domain specific language to start with if to say, you, for example simply want to be a web developer.

There are a handful of other languages including PHP and C# (pronounced C-Sharp) that you might find being recommended as first learns, most of them are specialised and or highly abstracted so do not fit as good recommendations according to our chosen criteria and by the way, we can't even mention all of them.

One thing you might have noted is that, Python, Java, Go and many other languages  have C-like syntax and borrowed concepts from it! Even JavaScript has a C-like syntax but is almost completely nothing like C conceptually. You conclude but when doing so, remember that new languages would always come up and the languages in "moving with the tides" section should ideally be updated as things change (dynamic). What would never change, is the fundamentals of Computer Science and Programming. :)

Watch article video on YouTube: https://youtu.be/VwEvoGS4KEc

So you want to learn how to code huh? and you are wondering where you would start? Well well, the answer is, right here! The first step to learning anything is learning how to go about learning that thing. Learning how to learn!

First things first, why do you want to learn how to code or program by the way? Honestly, maybe you may end up not needing to learn how to code if you answer this question correctly. Let's pick a few common reasons people are learning how to code and go through them.

• I have an app idea!
• I want to start a technology company.
• I want to build an app like Facebook and become a billionaire :)
• I would like to build an app or website for my company/business.
• Now is the tech era, everyone is learning how to code, I should too.
• I want to make my own website!
• I am learning for fun.
• I admire programming, I want to become a computer programmer/engineer/scientist.
• I love computers, I would really love to understand how they work.
• I want to switch carriers and become a web developer, I see a lot of people earning so much from that.
• I am pursuing a path in engineering (or maybe accounting) and have understood I need it.

These common reasons, which are not mutually exclusive are likely to come from 3 main types of people who primarily have different objectives. Their objective is usually not necessarily knowing how to code but a means to and end. Just before I name these categories, Let me tell you a "Spanish fiction" and then, you would be able to decide where you fall and if you really "want to learn how to code". Here we go!

Imagine you saw someone interesting and successful in the news who speaks Spanish and from what they are saying, Spanish is really profitable to learn but then, you find out this fellow is only on the news because s/he made a single statement in Spanish! Maybe, "Make Spain great again!" which is literally "Haz que España vuelva a ser grande!" in Spanish!

So you like this fellow and would like to do something similar. You have two options;

• Learn how to make the statement "Make Spain great again" in spanish [Learn how to make a single sentence] OR
• Learn how to make statements in spanish as a whole.

Now by going through the first route and simply learning how to make that single sentence, you might eventually learn how to make statements (speak) in Spanish. But this is only easy if, there exist only a few words in Spanish with few rules and exceptions on how statements are constructed. In addition to that, you would have to learn how to make so many other statements in Spanish by getting their direct translations. That would be a very difficult way of learning spanish!

However, just learning how to make that single sentence and perhaps a few others in Spanish is extremely easy but trying to learn Spanish as in the complete language as a whole by trying to memorize different translations of statements that you learned how to make is, as you see for a second time extremely difficult.

Learning how to make certain statements like, "Good morning!" or "You look awesome" in Spanish, is definitely more interesting than learning the Spanish Alphabet and so that's why it's tempting to try to learn spanish by simply learning how to make individually translated sentences.

If all you wanted was to have a particular statement in Spanish, and you are not interested in Spanish as whole or is interested but just more focused on having Spanish sentences themselves than learning Spanish, you could simply paste the statement "Make Spain great again" in google translate and you would get what you want which is the Spanish equivalent. It might not be very accurate, but it works!

However you don't know how Google translate came about that and why it is that way if you were really interested in spanish and not just mere statements or perhaps need spanish as prerequisite to do some stuff, then you would go with route two which is actually learning spanish; By so doing, you would learn numbers, letters, alphabet, words, types of words (such as verbs and nouns), sentences, punctuation and more!

Notice that you would in the end, still learn how to make the statement you wanted to make! Just that, this time, you would not just be able to make statements in spanish but you would understand how statements are made and perhaps you can write a story in spanish!

The purpose of the tale is to help you realize that coding is like speaking a natural language say French or Portuguese and also, very importantly, help you see that learning how and what to think is more important than learning a language otherwise you would have nothing meaningful to say in any language you learn.

Back to our categories of people and reasons why they learn how to code. Note that the categories of people and their reasons why they want to learn how to code are not mutually exclusive but you can see the big picture! So the categories;

Category 1: Entrepreneurs and Business Professionals

If you have a reason such as I have an app idea, I want to start a technology company, I want to build an app like Facebook and become a billionaire or I would like to build an app or website for my company/business. Then, you most likely fall into this category!

You are most likely only trying to get something done! and In my opinion, you should focus on that instead. If you want to build an app check out how you can start building a fairly good one as soon as possible! You would be surprised you can already start making one. If you want to build a tech company you should ask yourself what problem your tech company is trying to solve or what services it's trying to provide and first, see if you can start building this solution right away! Maybe it's just another simple app or that not-so-simple project that requires you to find people with strong technical backgrounds?! What if you needed a website for your business? It's possible to make one yourself, for free without learning how to code and that's what you should be focusing on! your objective.

Since these reasons and categories are not mutually exclusive, you might start and quickly find out you need to go deeper and then find yourself in category 3 (which you would see) but if you are really just about the objective and getting something started and done, you should figure out if you can do it without necessarily "learning how to code." or maybe decide if learning and understanding the processes then getting a technical partner is the better way.

Take a step back! Maybe, Microsoft Excel is simply what you need. :)

Category 2: Enthusiasts

On the other hand, you if you want to learn how to code because, it seems to be trending, "it's the new big thing" and you have got reasons like everyone else is learning how to code, I should too, I want to make my own website or I want to learn for fun, then you are very likely to be an enthusiast, you are quite interested in the subject of coding and is looking for a good way to be involved. That's still great. You are somewhere in the middle :).

Again, you might end up finding that you are not just an enthusiast but a highly passionate individual who wants to get deep into programming, tech et al.

Category 3: Engineers, Computer Scientists, Nerds

If you are totally fascinated by computers and really want to know how they work, or maybe you are interested in how you can apply programming to solve complex problems in your sector, maybe medicine or stocks and investment?

Good with Electronics? Maths? Sciences? Good at fixing "technical stuff" naturally without any conventional training done? Maybe you are actually starting a course in Engineering or Computer Science itself and you can't wait to reach the "coding part"? umm, then you probably fall here.

So now you know, making a website does not necessarily imply coding, neither does building an app. What then is your decision? To proceed and learn how to code? or Learn the tools you can use to achieve your goals without coding?

Whichever part you are taking is great! In part 2 of this piece, next steps for those who ultimately decide to learn programming are outlined and in part 3, advice on getting things done without necessarily coding.

Watch article video on youtube: https://youtu.be/TtJumU2s26k

Hello there! I am called Noel, I created StackNerds. I am excited you are reading the StackNerds welcome memo. It does not matter when you are reading this, it is the first publication ever on stacknerds.com and it defines who we are as a community and I am happy you considered looking at it. I started building this "stack" because I believe with the internet, we are in "one place". It is then possible for us at stacknerds.com to reach millions of people with the gospel of technology and turn them into digital nomads.

We have moved past the times when to compete, our muscles were more important! That is what the industrial revolution was designed for. Now, for us to compete we need to put our brains to work instead. Yet, the world is so big and we need to scale. Things are going so fast we need to work faster and there are millions of people to reach. It could be difficult!
The best way to do your work faster and leave it exposed to billions of people roaming the digital world is to build on digital frameworks. But first, we need to build our digital prowess.

It does not matter whether you are a doctor or a painter! You can do more with computers when you understand the mechanisms of automation they provide and can reach more people when you understand the depth of connectivity the internet promises.

All of this, you can do without having to become a programmer, engineer or a computer scientist. Even if you are, or want to be any of these things the Stacknerds community is for everyone who simply, is interested in learning or teaching technology and or becoming a digital nomad [Whatever that means to you].

From understanding the basics of technology, what you can do with it and what options are available for you, or getting deep into tech, learning how to code and building something for yourself, the StackNerds community is for you. We are very happy to have you!