Welcome to ItsProgramming!
Glad to see you! 🙏🏼

If it's your first time here, please read the intro post.
Otherwise, you can view the course chapters below.

Recent Posts

  • How does Hosting Work?

    programminghtmlbasicsjavascriptdeployment

    By now you’ve probably got your own little designs going, you have some JavaScript doing cool stuff, CSS doing cool stuff. You’d probably thought once or twice about - how could I share it? How could I show someone what my skill level is? Or perhaps you have already helped someone fix up their site and you’d like to add it to your portfolio. Time to talk about hosting.

  • Adding Icons

    programminghtmlbasicscss

    Importing icons is just as easy as importing custom fonts. My favorite place to turn to, when I need any icons is fontawesome.com. As of writing this post, they have 1588 free icons for you to use!

  • Object Inheritance

    programminghtmlbasicsjavascript

    Objects are a powerful way to create data structures, provide them with properties and methods. Having them interact with one another and much more. One of the powerful features we haven’t yet looked at, is inheritance.

  • JavaScript Objects

    programminghtmlbasicsjavascript

    You probably noticed that we used some JavaScript objects previously, like “jQuery”, “document”, “Math” to name a few. They seem to be really useful and people seem to be making them. What are they?

  • JavaScript Methods

    programminghtmlbasicsjavascript

    Classes define blueprints for objects. Objects define multiple properties. Objects can also have functions, that they can perform (also known as “methods”).

  • Algorithms

    programminghtmlbasicsjavascript

    So you’ve probably heard of the word “algorithms” by now, either in a good or a bad light, but in my opinion, they’re just a tool, like any other. Oxford says that an algorithm is:

  • Getting Started with jQuery

    programmingjqueryhtmlcssjavascript

    So jQuery seems like a very useful framework, let’s try it out! You probably noticed the word “query” in “jQuery”, it means “to ask for something”. So in this case you could associate this framework allowing to ask you for stuff via JavaScript more easily. When, for example you’d like something out of a database, you would “query” for it, just to give a little more context.

  • Document Traversal and Manipulation

    programmingjqueryhtmlcssjavascript

    The title sounds like we’re some systems scanning and manipulating documents. Which we actually are. So let’s atleast learn to do it professionally, ok?

  • Creating and Removing Elements

    programmingjqueryhtmlcssjavascript

    Manipulating elements is cool and all, but what if we’d like to create some? Or perhaps we have dug ourselves in too deep into the digital jungle or maze and we’d like to remove some dynamically? Let’s take a look at how it’s done both in vanilla JavaScript and jQuery.

  • Element States

    programminghtmlcss

    We’ve covered a lot of the basics for a lot of stuff so far. Let’s take a more detailed look at how we can style HTML elements in different states. Like change color, when the user hovers over a link.

  • Animations

    programminghtmlcss

    We’ve kind of started animating stuff, but those aren’t quite animations. To really get serious about animating elements, transitions wont cut it. So next up let’s look at animating stuff with CSS!

  • Animate.css

    programminghtmlcss

    What if I told you that there exists a CSS animation framework as well? One of my favorites is called “Animate.css” and it is found here. Though I don’t use it a lot, when I actually used it for my personal projects, it was very easy.

  • So What's Popper and jQuery?

    programmingbootstraphtmlcssjavascript

    We’ve covered the majority of Bootstrap in big steps by now. We haven’t yet looked at the other 2 script imports, namely “Popper” and “jQuery”, what are those?

  • Responsive Columns

    programmingbootstraphtmlcssjavascript

    Previously we looked at the most basic usage of columns within rows. Bootstrap allows you to individually control how each column behaves when it has to respond to different screen sizes.

  • Other Frontend Frameworks

    programmingbootstraphtmlcssjavascript

    Of course Bootstrap is not the only framework out there and some people might not like it. I think it’s fine, I’ve been using it for a few years and see no problems with it thus far. For the sake of context, let’s take a look at similiar frontend frameworks. Also, what does “frontend” even mean?

  • Bootstrap: Navigation

    programmingbootstraphtmlcssjavascript

    Cool, so we took a look at creating a simple page layout previously with Bootstrap components, using the Bootstrap grid. Websites usually have more than one page nowadays (shush SPA devs).

  • Bootstrap: Components

    programmingbootstraphtmlcssjavascript

    Bootstrap offers way more, than just an efficient way to position your content. It offers a pretty big list of premade components, which you have to only copy over and configure.

  • Bootstrap: More Components!

    programmingbootstraphtmlcssjavascript

    Let’s look at more components, so that you feel more comfortable using them in your projects. Instead of going through each aspect and taking the fun out of exploring it for yourself, I will just mention the components here, based on simplicity and potential of use in the blog example we already started.

  • What is Bootstrap?

    programmingbootstraphtmlcssjavascript

    Now that we know what dev tools are and what the different windows can be used for, let’s put it to good use. So let’s bring in more code to look at and learn how to build modern, responsive websites in a very practical way.

  • Bootstrap: The Basics

    programmingbootstraphtmlcssjavascript

    After importing Bootstrap succesfuly, we can get to building a layout! Let’s see how the system works first, so that we don’t get headaches of “what goes where” later.

  • Styleguides and Global Web Standards

    the webprogrammingbasicsjavascript

    A very underrated topic, that I literally haven’t seen being mentioned in any beginners course. So let me be the one to mention it.

  • Additional Learning: Free E-Books

    the webprogrammingbasicsjavascript

    Here’s a collection of great e-books regarding programming that are not only for beginners, but also cover more advanced topics too:

  • Taking Screenshots with Dev Tools

    dev toolsthe-webprogrammingbasics

    A very convenient feature, that I actually found out about only about a year ago, is the ability to take screenshots right there in the browser with dev tools!

  • Simulating Mobile Devices

    dev toolsthe-webprogrammingbasics

    You probably noticed the button next to the “inspector” mode at the top of the sidebar. Quite simply, it allows you to simulate how your page will look and act on a mobile device.

  • Inspecting HTML and CSS

    dev toolsthe-webprogrammingbasics

    The very first thing you should learn to do with the dev tools, is inspecting HTML to understand why it does (or doesn’t) work.

  • Getting Started with Chrome Dev Tools

    dev toolsthe-webprogrammingbasics

    Cool! So far we’ve looked at each of the most used languages on the web, how to write code, how to write good code and most importantly - code that others can read. So in a sense you could say that you’re ready to enter the digital jungles others have created out there in the world.

  • Debugging JavaScript with Dev Tools

    dev toolsthe-webprogrammingbasics

    So far the browser dev tools seem to have tons of cool stuff that can be done, it really changes the way you view web pages, since you can now see and interpret the “behind the scenes” stuff. The real power actually is revealed when you are working with JavaScript.

  • Code Commenting

    the webprogrammingbasicsjavascript

    We have so far looked at 3 different languages that make up the web, so we’d probably want to share our code or atleast leave some small notes about what the code does or is meant to do, or whatever else that helps you navigate that small digital jungle that you’ve created for yourself.

  • Additional Learning: Paid Sites

    the webprogrammingbasicsjavascript

    Here’s a list of my favorite sites that you do have to pay for, but the value returned is uncomparable. You get slide decks, transcripts, project files and tests on these sites. In my opinion, if you plan on subscribing to one, try the trial/free tier first. Then go all in and I assure you won’t regret it!

  • Additional Learning: Free Sites

    the webprogrammingbasicsjavascript

    Cool! By now you should be ready to read code others have written! That also means that I am going to use this moment and share the best sites (in my opinion) that you can learn programming for free with!

  • While Loops and Timers

    programmingbasicsjavascript

    Let’s play around with a few of the things we covered previously so that you can practice them in different scenarios.

  • JavaScript Functions

    programmingbasicsjavascript

    There is a way to reuse your code within the file itself too, very useful when your code grows into hundreds of lines.

  • JavaScript Basics

    programmingbasicsjavascript

    We looked at a few ideas of JavaScript in the previous post, let’s go in more detail about each one.

  • Inline vs External JavaScript

    programmingbasicsjavascript

    Great! We’re already writing some basic JavaScript! So far we’ve done it in Codepen examples, so how do we go about setting them up locally on our computer?

  • What is JavaScript?

    programmingbasicsjavascript

    So far we have looked at HTML and CSS, but you must’ve noticed the “JS” tab in the Codepen examples.

  • The Box Model

    programminghtmlbasicscss

    We previously customized the spacing between elements via “margin” properties, like for example, the post element in the previous post (very meta):

  • Finishing the Blog Layout Example

    programminghtmlbasicscss

    Let’s finish the blog template! We will continue exactly where we left off in the previous post.

  • Upgrading the Blog Layout Example

    programminghtmlbasicscss

    Let’s take the blog layout we looked at in the “HTML Layout and Styles” post:

  • Adding Google Fonts

    programminghtmlbasicscss

    Let’s start customizing HTML by changing fonts.

  • Don't Repeat Yourself

    programminghtmlbasicscss

    Another general programming idea, similiar to “Separation of Concerns”, is that you simply don’t repeat yourself.

  • Intro to CSS and Separation of Concerns

    programminghtmlbasicscss

    Previously we wrote styles directly on HTML elements. That is not the most convenient way, because imagine managing 50 files like those and what amount of effort it would take to just change the font style across all of them.

  • Targeting with CSS

    programminghtmlbasicscss

    Let’s continue where we left off in the previous post.

  • How to Write Code?

    programminggeneralbasicsvisual studio code

    There are many different options when it comes down where to write your code. It can be as simple as writing it in your regular notepad, that comes with each Windows installation and you can use an IDE - Independent Development Environment, that means it has many different features to allow you to develop code in a professional environment, where code errors get highlighted and there are lot’s of different ways to debug code.

  • How to be a programmer?

    programminggeneralbasics

    I want to completely destroy the following stereotypes right here and now:

  • What makes a good programmer?

    programminggeneralbasics

    In order to actually succeed as a programmer, you actually need 3 traits:

  • What is HTML?

    programminghtmlbasics

    HTML or Hyper Text Markup Language serves as the backbone that holds all of the content of any webpage. Literally all of them.

  • HTML Pages

    programminghtmlbasics

    Since HTML is used to structure entire web pages, then let’s write one!

  • HTML Layout and Styles

    programminghtmlbasics

    In the previous post we looked at the different elements that are most commonly used in websites. Let’s talk about layout. Obviously, after the content itself, the way it is presented is the second most important thing about a website. How easy is it to find stuff, is there always a way back and similiar problems must be tackled when creating a website.

  • What is Programming?

    programminggeneralbasics

    Starting with the simple question of - What is programming?

  • ItsProgramming: Intro

    Welcome to the new ItsProgramming! I’ve switched to an entirely different setup for the website. I went from using Wordpress to using Jekyll, a Static Website Generator and GitHub for hosting.