5 Step Guide to Becoming a Code Ninja!

How to Become a Code Ninja

So you want to be a code ninja?

Let’s face it – who doesn’t want to be a code ninja? According to a recent Stack Overflow survey, 10% of developers identified themselves as ninjas! Funnily enough, more than 7% self-identified as rockstars!

That is kinda true, coders have become like rockstars, creating disruptive and innovative technologies in every sector.

For “normal” people, what coders do is like a black art and that is why I think many developers embrace this image and joke around saying that they are ninjas!

It’s like a funny concept in the developer world. It has even become embedded in the ninja definition!

Ninja noun

a person skilled in the Japanese art of ninjutsu.

 

informal definition

a person who excels in a particular skill or activity.

“the courses vary—you don’t have to be a computer ninja to apply”

Let’s jump in!

Follow my  5 step guide to becoming a code ninja!

How to Become a Code Ninja?

Step #1

Read my best programming language guide.

Step #2

Come up with an idea for a mini project. Keep the scope small and manageable.

It’s best to go for a smaller project that you can see yourself finish in a few days rather than a large project that you may fail to complete.

Keep it small and fresh.

If you are stuck for ideas, just start making a web page around a topic you are passionate about.

Pick a hobby or something you enjoy and code around it.

Step #3

Choose your language! Don’t overthink this step, just go with a language that feels right, you can always learn a new language in the future.

If you are unsure, start learning HTML because it’s ideal for beginners. No special tools are required.

All you need is a text editor and a web browser and heaps of motivation!

Step #4

Allocate a full weekend for your ninja training.

Yes a full weekend.

I know you have stuff to do but trust me you will need a full weekend to get started.

Clear your schedule.

Forget your chores.

Cleaning, cooking and laundry can wait.

Forget socialising.

You are gonna become a code ninja!

Step #5

Take an online course for your language of choice.

Start learning and working on your mini project right away.

Hack away at your code until you get results.

Feel the burn but take regular breaks. Take a break every 45 minutes or so, stay well hydrated. You may become engrossed!

By Sunday aim to have something to show for efforts.

It will be amazing.

Let me know how you get on!

Best Programming Language?

Best Programming Language

So what is the best programming language to learn?

You decided to start learning programming and then immediately hit the big question.

With so much choice, how to make the right one?

How to pick the best programming language and start learning?

A bit of research should resolve this, right?

Go and do a bit of Googling, and 2 hours later, you will be overwhelmed by choice and buzzwords! Too much choice starts to cause stagnation, confusion and maybe even a mild headache!

Sounds familiar?

This is by far the most frequent feedback I get from new coders. They have all the excitement, passion and ideas but simply do not know where to start!

Choice prevents them from making a decision!

It becomes a barrier to success.

Too Much Choice Can Be Overwhelming

Do you ever get that feeling of being overwhelmed when you go into a supermarket and want to buy something?

Maybe you want to buy some coffee. There are 100 different coffees to choose from and you feel overwhelmed.

Too much choice can be overwhelming.

There is so much marketing and noise. Too many brands jumping out at us for attention.

Coffee

When we go into an artisan coffee shop you simply ask for our favourite brew. I usually just ask for a skinny latte and trust that the coffee shop owner has stocked the best beans.

This simplifies choice.

So if we cut down the vast choice and buzzwords into a smaller set of choices it becomes much easier.

How can we do this with programming languages?

The answer is actually very simple but not what you may expect…

Don’t worry, by the end of this guide, you will be much better informed to make this crucial decision quickly and easily. Moreover, I will also recommend to you the best and highest rated courses for your language of choice!

I will also help narrow down the best programming language choice to just 7!

Yes just 7 languages!

The choice will then be much easier for you to make.

The choice will be so easy and simple that you will be able to make it right away and with full confidence!

Keep reading to learn how to easily pick the best programming language and start learning today…

The Wrong Question

In most situations, the most pertinent question is almost always the wrong one. It is also the case with this question:

  • – What is the Best Programming Language to Learn?

Why is this the wrong question to ask?

This question is loaded with two major assumptions. Firstly, it assumes that there is actually a “best” programming language to learn. Secondly, it also assumes that this initial decision will have some sort of lasting impact on your journey as a programmer.

Both assumptions are false.

Let me put your mind at rest right away.

There is no such thing as the best programming language to learn. Moreover the first language you learn will have no lasting impact on your future as a programmer!

Common theoretical concepts occur in all programming languages. So any language you start learning will help you grow your generic programming knowledge, confidence and experience.

This will in turn make new programming languages much easier to get to grips with in the future!

In fact, most programmers will be proficient in more than one language. Most will have a favourite or speciality but a good programmer should be able to pickup a new language with relative ease.

Good programmers can get started quickly and learn more advanced features as their experience grows.

An experienced programmer, should have a general awareness of the capabilities of popular languages and be able to decide when a particular language is better suited than another when trying to solve a particular problem.

The language you should use in a particular situation will be largely driven by – what you want to develop.

The Right Question

Therefore, the right question should be this:

  • – What Do I Want To Develop?

An experienced programmer should be able to narrow down the language choice based on what they want to develop.

Don’t worry I am here to help guide you!

My top advice to you as a beginner is: to think about what you actually want to develop. Set yourself a project or a goal.

Then use this guide and allow me to help you make an informed language decision! Armed with your idea, pick the language from this guide and start learning right away, let your creativity drive your learning and your experience will grow in no time!

Do not stagnate!

If you are struggling to decide what you want to develop, don’t worry, I will also provide you with a few inspirational ideas together with appropriate languages you can learn – to help bring those ideas to life!

You really cannot make a bad decision here!

The only potential bad decision is to delay starting learning. Be decisive, get an idea, make a language choice and jump into coding! You can always change direction in the future and learn another language if needed.

I have seen this time and time again – people overthink the first step!

Remember learning new languages becomes easier and easier once you get over that first hurdle and actually start learning.

Let’s jump in!

From Idea To a Language

Simply use the table below to map an idea to a language and start learning to code today by doing it! Grow your experience by letting your creativity drive your learning and development.

You will be a great programmer in no time!

Start now!

Simple 3-Step Process

Step 1: Decide what you want to develop. Start with an idea.

Step 2: Pick your language from the table below.

Step 3: Start learning right away!

The biggest positive from this approach is that you remove the massive roadblock preventing you from learning.

Best of all, you can always learn another language in the future.

And it will be so much easier because you can leverage your experience and grow as a programmer!

It really is a win-win situation!

Mapping Your Idea To  a Programming Language

Use the table below to map your idea to a language…

From Idea To a Language

I have an idea to create…You need to learn…
A websiteHTML + CSS + JS
An iPhone appSwift
An Android appJava
Data analysis or calculation toolsPython
A game for mobile and consolesUnity and C#
A Windows desktop applicationC#
A Mac OS X desktop applicationSwift
A startup like Airbnb with a website and appRuby on Rails
I’m sill not sure…HTML + CSS + JS

7 Best Programming Languages

That’s the basics and you have right there – the 7 best programming languages for beginners. Let’s now explore each of the languages in a bit more detail and get a bit more familiar with them.

I will then show you some incredible courses! Read on!

Best Programming Language HTML

#1 HTML

HyperText Markup Language (HTML) is the standard language for creating web pages. HTML is learnt alongside Cascading Style Sheets (CSS) and JavaScript (JS).

HTML + CSS + JS

This combination is collectively known as front-end web languages.

HTML is the key language for developing content for the web.

HTML is very beginner friendly and you can get started working with HTML code in absolutely no time without special software or experience.

I highly recommend HTML as the default choice for beginners. If you do not have a strong idea right now, just start learning HTML.

Ideas will soon follow!

Once you have mastered HTML, move onto CSS (Cascading Style Sheets) and JS (JavaScript).

Don’t worry I have a great course recommendation for all 3 and more!

Best Programming Language Swift

#2 Swift

Swift is a general-purpose programming language developed by Apple for iOS, macOS, watchOS, tvOS, and Linux.

The language is designed to work with Apple’s Cocoa and Cocoa Touch frameworks and other code written for Apple products.

Swift is an ideal choice if you want to develop apps to run on Apple devices like iPhones, iPads and iMacs. Note that Swift has limited applications outside the Apple ecosystem of hardware.

However many of the concepts you will learn with Swift will still be applicable to other languages you learn in the future!

Best Programming Language Java

#3 Java

Java is a general-purpose programming language. It is an  object-oriented language which means that it is based on a particular way of modelling software as reusable components.

There is a slight theory barrier but once that is overcome you will be good to go.

Java is designed with the “write once, run anywhere” (WORA) principle in mind. This means that Java code can run on all platforms that support Java.

Java was originally developed by James Gosling at Sun Microsystems (which has since been acquired by Oracle Corporation) and released in 1995 as a core component of Sun Microsystems’ Java platform.

1995 may seem like a long time ago, but Java has been constantly updated with Java 9 only recently released. It continues to be a popular choice for many varied applications.

Importantly Java can be used for Android development!

Best Programming Language Python

#4 Python

Python is a widely used high-level programming language for general-purpose programming, created by Guido van Rossum and first released in 1991.

It is an interpreted language which means it does not need to be compiled. This makes development super fast and versatile.

Python has a design philosophy with focus on code readability. It has a syntax which allows programmers to express concepts in fewer lines of code than possible in other languages.

Python has become a popular choice in recent years. Often seen as a powerful scripting language it has become used in both large and small-scale systems.

It is particularly appropriate for use with mathematical and scientific applications.

Best Programming Language C#

#5 C#

C# is a programming language developed by Microsoft within its .NET initiative. C# syntax looks very similar to Java and again has a wide variety of applications.

It is the language of choice when developing applications to run on Windows.

C# can readily be used for scripting within Unity for making games!

Best Programming Language Unity

#6 Unity

Unity is a cross-platform game engine developed by Unity Technologies and used to develop video games for PC, consoles, mobile devices and websites.

Unity has been extended to target 27 platforms making it the game engine of choice for developing games for multiple platforms. This is really more of a software package than a programming language and has built-in support for scripting using C#. But hey, I love games, so it deserves a place on my list!

Consider learning Unity and C# is you want to make serious games.

Best Programming Language Ruby On Rails

#7 Ruby on Rails

Ruby on Rails, or simply Rails, is a server-side (or back-end) web application framework.

Rails is a framework, providing default structures for working with databases,  web services, and web pages.

It encourages and facilitates the use of web standards for data transfer, and mixes nicely with HTML, CSS and JS for display and user interfacing.

Ruby on Rails has grown in popularity over the last few years and some major web sites have been spun up using it!

Airbnb was developed using Ruby on Rails – making it a great choice for developing disruptive and innovative technologies quickly! Think of it as a super language for spinning up startups!

A Word About SQL and JS

Some surveys include SQL (Structured Query Language) as a language alongside programming languages I have listed so far.

I think this is wrong unless your focus is to solely work on databases (e.g. work as a database administrator). SQL should be learnt in the context of another language when that software needs to talk to a database.

Similarly JS (JavaScript) should be learnt together with HTML. It should be learnt alongside or after HTML. In the list above, when I say HTML I really mean the 3 key web technologies that all go hand-in-hand, namely – HTML, CSS and JS!

What About C++ and PHP?

I would highly recommend that C++ is tackled after you learn a language that is highly suitable for beginners like Java.

C++, in my humble opinion, is a hard first language to learn because the programmer needs to be aware of more low-level details like memory management which a language like Java will seamlessly handle for you.

PHP is now considered by many to be slightly dated. It can be easily picked up if needed once you learn HTML, CSS and JS as a nice easy server-side technology. PHP is still widely used but is starting to give way to cooler, feature-rich alternatives like Rails.

What About Language X?

There are other programming languages out there but these are the 7  best programming languages to start learning now. No doubt about it, start with one of these and you will be well on your way to becoming a coder!

Pick one and start learning today!

You can always add another  language to your arsenal later on.

What Does the Community Say?

I analysed last years Stack Overflow survey to find out!

It was the most comprehensive developer survey ever conducted. Here are a few interesting figures captured in a tasty infographic.

I gotta be honest the winner for me was clear – front-end web technologies.

That is HTML, CSS and JS.

Now It’s Your Turn…

So there you have it. The best programming language choice narrowed down to just 7 of the most popular languages out there!

Follow this simple process to make your well-informed choice.

Start with an idea and then let that determine the language to start learning.

Jump in, start learning and coding right away.

Don’t overthink it, because that will only hinder your progress.

One language is a clear default first choice – HTML.

So if you are not sure – just start with learning HTML.

Check out my top recommended courses for each of the 7 languages below!

Good luck!

Recommended Courses

From Idea To a Language To a Course

I have an idea to create…You need to learn……with a recommended course
A websiteHTML + CSS + JS
The Complete Web Developer Course 2.0
An iPhone appSwiftThe Complete iOS 10 Developer Course
An Android appJavaThe Complete Java Developer Course
Data analysis or calculation toolsPythonComplete Python Bootcamp: Go from zero to hero
A game for mobile and consolesUnity and C#Complete Unity Developer
A Windows desktop applicationC#C# Basics for Beginners
A Mac OS X desktop applicationSwiftThe Complete iOS 10 Developer Course
A startup like Airbnb with a website and appRuby on RailsThe Complete Ruby on Rails Developer Course
I’m sill not sure…HTML + CSS + JSThe Complete Web Developer Course 2.0

Take one of the recommended courses and become a ninja… err I mean coder TODAY!

To your coding success,

Alex

Website Structure Explained

How to Make Your Own Website Tutorial

Website structure is really important to get right from the start. This is the seventh module in the How to Make Your Own Website Tutorial.

Website structure is often overlooked by new web developers and as a consequence their websites can later become painful to update and maintain. Moreover changing website structure at a later stage is a big process because all relative paths will need to be updated! Such big restructuring updates often introduce bugs and broken links. So setup your structure from the outset and stick with it.

In the previous module, we built on our HTML and CSS knowledge by learning how to add social media icons to your website in order to help build social media following. In this module we will be covering how to setup the ideal website structure.

Watch It On YouTube

Coming soon!

Website Structure

So far we have learnt the basics of HTML and CSS. Our examples have been limited to one web page, a few images plus a stylesheet. However a real website will be made up of many web pages all linked together, dozens of images and several stylesheets. So the question is: how to organise all this into a clean folder structure?

There are many approaches to structuring a website and I will be showing you my preferred setup. Feel free to define your own or improve on mine. The key is to set this up from the start and stick with it.

The reason I want to cover structure in detail is because it is often overlooked in web development tutorials. People learn HTML and CSS syntax and are then at a complete loss how to put a whole website together.

Setup a folder structure on your local machine as follows:

  • site
    • assets
      • css
      • fonts
      • img
      • js
      • lib

Usually I would place the site folder into a project folder in Documents. So for example for LTCL my site folder would live in Documents/LTCL.

  • site – contains all the top level HTML files
  • assets – groups all the required media files referenced by HTML files
  • css – all your stylesheets
  • fonts – contains your fonts
  • img – groups all your images, this folder may also be organised using sub-directories to add another level of hierarchy
  • js – all your Java Script files
  • lib – keep this for 3rd party content that you want to include in your website

This folder structure will make it super easy to publish too. We will simply upload all the content in the site folder!

Website Structure

 Use Relative Paths

With the structure setup as above in your HTML you should use relative paths as opposed to absolute paths. Remember that a relative path is a path to a file with respect to the current directory. So to reference images use:

<img href="assets/img/myimage.png">

Exercises

1. Setup a website structure for your website you created so far in this tutorial series.

2. Setup a basic index.html file, images and stylesheet.

3. Change all paths to be relative paths.

Summary

That’s the end of “Website Structure Explained” module. We introduced a simple but effective website structure. Next time I will be showing you how to actually publish your website online.

Next Module: Publishing Your Website (coming soon)

If you have any questions or comments please use the form below!

Learn To Code YouTube Channel

Learn To Code YouTube Channel

We are happy to share the launch of our new learn to code YouTube channel. Yet another fantastic and  FREE way we are helping you learn to code online!

We will be initially focussing on creating supporting videos for our FREE online coding tutorials on our learn to code YouTube channel. Later, we will be adding other ad-hoc coding tutorials including how-to videos on learning coding as well as online monetisation. So stay tuned for that – not to be missed!

Most of us know the endless entertainment which online video can provide. More and more people are turning to video platforms like YouTube for e-learning purposes. What to learn something new? There is probably a YouTube channel for that! Best of all it is free and great for beginners.

YouTube is also the second most popular search engine in the world after Google. It contains a wealth of videos dedicated to online learning!

It’s just another great way to help you learn a new skill. So start learning to code by following our YouTube channel.

You can check out the current tutorial in the the series “How To Make Your Own Website” which has supporting videos for each of the modules. This helps bring the tutorials to life by showing you exactly how to code and get setup step-by-step! New modules with supporting videos are being added on a regular basis, so start working through the modules today! It is absolutely free.

Click here to check out our learn to code YouTube channel and make sure to subscribe for future videos!

learn to code youtube

If you have any comments or suggestions on our new learn to code YouTube channel then please use the comment section below! If you would like any specific content to be covered then do let us know!

Happy Coding!

How To Make Your Web Pages Look Cool

How to Make Your Own Website Tutorial

This is the fifth module in the How to Make Your Own Website Tutorial.

In the previous module, we talked about “the secret” that most developers won’t tell you! We saw an example how to discover new HTML tags and plug them into your web pages. In this module, I will show you how to make your web pages look cool!

Watch It On YouTube

The Basics Of Web Programming

So far we have learnt the basics of HTML, the most common tags and got a very simple web page up and running locally (on our machine or using CodePen). But there is more to web programming than just HTML, in fact there are 3 fundamental web technologies that work together to bring web pages to life. All 3 are required to create beautiful websites.

1. HTML

HTML provides the structure to our web pages. You can think of HTML as a noun! This is the content we want to display in our web page. We cover this already in previous modules.

2. CSS

Cascading Style Sheets (CSS) provides the styling for our web pages. Think of CSS as a adjective. It describes the noun. CSS is how we want to display our content in our web page. This is what we will focus on in this module.

3. JS

Java Script (JS) is the most advanced out of the 3 technologies and provides the dynamic elements in a web page. Think of JS as a verb which describes action! JS allows our web pages to be more dynamic as opposed to static content. We will cover JS in a future module.

HTML + CSS +JS = Web Page

Introduction to CSS

CSS3

CSS describes the presentation of a web page or more commonly multiple web pages. This separation of data or content from presentation is a very common programming concept that you will find in most languages. It makes sense to have this separation of concerns for a number of reasons.

CSS is a completely different language to HTML with it’s own syntax. We are currently on CSS version 3 which is abbreviated to CSS3.

Why Separate CSS from HTML?

  • Allows HTML to focus just on the content and leave the formatting and styling to CSS. This helps keep HTML files small and concise.
  • We can use a single CSS to define the style of a whole web site not just one web page! So CSS allows us to scale up.
  • A web site maybe made up of dozens or even hundreds of individual web pages, imagine if the the style was defined separately in each web page and then we decided we wanted to change the font size or colour for the whole site? It would be a massive job! But with CSS we would just need to change it in one place.

CSS Syntax

The basic format of CSS is:

selector {
    property1:value1;
    property2:value2;
    ...
}
...

The selector “selects” the HTML element to style. The code between the brackets declares the properties to apply when styling that element. The brackets just enclose the start and end of the declarations. A semi-colon is used to end each declaration. A CSS file defines a number of selectors and style properties to apply to those selectors.

For example:

h1 {
    color:green;
}

p {
    color:red;
}

This simple CSS selects the header element and styles it red. It will also style the paragraph element in colour blue! CSS is usually stored in a file with extension .css and will contain many styles for different elements contained in your web pages.

Much like HTML, the browser knows how to interpret our CSS declarations and apply them to style our web pages.

Colours

CSS defines a set of supported colours which we can reference in plan English. Like red, white, black, yellow. You can find the full list of supported colours here.

We can also define whatever colours we want using hex. With hex, the digit pairs indicate the red, green, and blue component in the RGB system.

For example, #0000ff has 0 for red, 0 for green and ff for blue. ff means the max amount of blue.

Discussing hexadecimal notation is really out of scope for this tutorial. Suffice to say it’s a number system that has is base 16 instead of our usual decimal system which is base 10. Google is your friend if you wish to learn more about hex.

For our purposes of web design, a simple example will demonstrate all we need to know. For instance, to make our header gold, we would declare:

h1 {
    color:#ffd700;
}

But how do I know that hex #ffd700 is gold? Well, we can simply use a colour picker like colors.io to help us get the hex to use in our CSS! Try it out!

Fonts

As well as colours, we can also define what fonts we want to use! Luckily Google has a large library of ready made free fonts that we can simply import into our CSS!

This is the syntax to get one of those fonts and use it to style our HTML content. This should be declared at the top of the CSS file. We simply list the fonts we want to import separated by the pipe (“|”) character. In the example below, I am importing “Holtwood One SC”, “Source Code Pro” and “Abel” fonts.

@import url("http://fonts.googleapis.com/css?family=Holtwood+One+SC|Source+Code+Pro|Abel");

This declaration imports the font so that it can be used by our styles. We still need to apply the font to individual style the elements and this is done like this:

h1 {
   font-family: "Holtwood One SC", Arial, sans-serif;
}

Notice how we have a list of fonts separated by commas. This is to ensure the page works even if the Google font “Holtwood One SC” fails to load for some reason. If this happens, the header will be styled using Ariel and if that is not possible it will be styled using sans-serif.

The browser will always attempt to apply the first font in the list and if that is not possible it will try the next font and so on. It is good practice to end this list with a font that will always be available by default like “sans-serif”.

Useful CSS Declarations

The CSS language defines a large set of keywords we can use to style our HTML elements to achieve the look we want. It would be very boring to go through each single one here. Similar to how we introduced HTML, I will cover the most common ones to get you started and then you can use “the secret” to do the rest!

Again it is the high level concepts that are important to understand. That is how CSS is coded, what is the basic syntax and how it interacts with HTML. The rest is about practice, experimentation and experience! We are merely introducing CSS in this module.

Margin

Margin is used to generate space around elements. There are 4 margin properties that can be used to define space in each direction around the element. You can declare each one separately. Let’s give our header tag some room to breathe! The px means pixels.

h1 {
    margin-top: 20px;
    margin-right: 10px
    margin-bottom: 20px;
    margin-left: 10px;
}

If you want to give the same margin to all four directions you can use a CSS short hand:

h1 {
   margin: 10px;
}

Padding

Padding is very similar to margin.

h1 {
   padding-top: 20px;
   padding-right: 10px
   padding-bottom: 20px;
   padding-left: 10px;
}

If you want to give the same margin to all four directions you can use a short hand:

h1 {
   padding: 10px;
}

Margin is outer space of an element, while padding is inner space of an element. Margin is the space outside the border of an element, while padding is the space that is inside the border of it.

Margin vs Padding
Margin vs Padding

Font-size

The font-size property controls the size of the font. As you can see most CSS declarations are pretty intuitive! Usually font-size is declared using em in CSS, although px (pixels) or percentage (%) can also be used. An em is equal to the current font-size, for example, if the font-size of the document is 12pt, 1em is equal to 12pt.

h3 {
   font-size: 2em;
}

Font-style

Font style allows us to apply effects to font. For example, if we want to make our sub header italic, we would declare:

h2 {
   font-style: italic;
}

Background

Background defines the background colour of the element. If we want to style the whole web page we would set the background on the body element like so:

body {
   background: green;
}

Styling Anchors

Remember anchors are links to other web pages and they also can be styled using CSS. We can style anchors as follows:

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: purple;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: blue;
}

The text between /* and */ is a comment for us programmers and will be ignored by the browser. We can put helpful comments for ourselves and other programmers who may need to look at our code.

Here is a CodePen to demonstrate:

See the Pen NdVGxy by Learn To Code London (@learntocodelondon) on CodePen.

Selector Types

So far we have used the most basic form of selector to identify the HTML element we want to apply our CSS style to. We have used the HTML tag directly in the CSS. This is called the element selector. There are other selector types we can use and this gives CSS a great deal of flexibility.

Element Selector

This is what we have covered so far. You use the tag name as the selector and the style is applied to all tags of that type in the HTML document.

tag {
    ...
}

We can also list tags to apply the style to:

tag1, tag2, tag3 {
    ...
}

Id Selector

The id selector will style only the tag with that id. The id selector starts with a hash (“#”). Note: the id you use in CSS must refer to an id attribute applied to exactly one element in the HTML document. You should not have more than one tag with the same id attribute in one HTML document.

For example:

#first {
    font-style: bold;
}

And in our HTML:

<p id="first">This is the 1st paragraph which will be styled in bold!</p>
<p>This is the second paragraph which will not be styled bold</p>

Class Selector

A class selector will style all elements which has a specific class. You can think of this selector as being used across different types of tags. The class selector starts with a dot (“.”).

For example:

.red {
    color: red;
}
<h1 class="red">This headline will be red</h1>
<p class="red">This paragraph will be red too</p>

How to use these selectors to structure your CSS declarations will be up to you. I would suggest starting with the element selector for simplicity. If you want to style a particular tag with a unique style then use the id selector. If you want to apply a style across a number of different tags then the class selector is your friend! Although the latter can also be achieved using the element tag and listing tags. There are sometimes multiple ways of doing the same thing and it will be down to personal choice.

3 Ways Of Using CSS

Now that we understand how to write CSS, we also need to understand how to get the browser to apply the CSS to our web page. There are 3 ways to associate your styles with a web page.

Method 1: Inline CSS

This is used to apply a style directly in the HTML document using the style attribute. You can use the style attribute on any HTML tag! Generally this method of using CSS is discouraged because it defeats the whole idea of separating style and content. However it can be useful as a quick and dirty way to apply style. It is useful where you have only a few web pages making up your website or the element you are styling is quite unique and only appears in one or two web pages.

Let’s use this method to style our Hello World HTML page! Again we will use CodePen to demonstrate this.

See the Pen rjbXeL by Learn To Code London (@learntocodelondon) on CodePen.

Method 2: Internal CSS

This is similar to inline method, but we define the CSS in one section inside the head section of the web page. The styles are inside a <style> tag.

Let’s use this method to style our Hello World HTML page! Take a moment to compare the two methods and identify the differences.

See the Pen GrLVNY by Learn To Code London (@learntocodelondon) on CodePen.

Method 3: External CSS

This is the best method and can be used to define the style of an entire web site consisting of many pages. The styles are saved to a separate file with extension .css. I usually call the file style.css. This file is then referenced from the HTML document.

Have a look at the CodePen below to see this in action. Click CSS to view the CSS file. Notice how style.css is included using the <link> tag in the header of the document.

See the Pen PWgMpV by Learn To Code London (@learntocodelondon) on CodePen.

Putting It All Together

Let’s now revisit our skateboarding web page example from module 3 and apply a CSS style to it! Here is an example how to make our web page look cool!

See the Pen KaLKeE by Learn To Code London (@learntocodelondon) on CodePen.

Let’s compare before and after.

RetroSkatr With No CSS
RetroSkatr With No CSS
RetroSkatr With CSS!
RetroSkatr With CSS!

Take a moment to read through the example in detail and understand how it fits together. Focus especially on the CSS code because we have already been through the HTMl code.

You can change the CSS code and play around using the CodePen. Notice how the HTML is almost exactly the same as it was when we went through it in module 3! We only added CSS to bring it to life! The only one line we added to the HTML was to reference the external CSS file in the header! And that’s how you make your website look cool – with CSS!

 <link rel="stylesheet" type="text/css" href="style.css">

Exercise

1. Apply styles to the web page you created as part of the exercises in module 3.
2. Try using inline, internal and external CSS.
3. Research additional declarations that CSS3 supports, can get it to do anything cool with your web page? Experiment!

 

New Terminology You Learnt In This Module!

CSS3

Cascading Style Sheets (version 3) are used to define the format and layout of web pages.

Separation Of Concerns

In software, separation of concerns is a design principle for separating a computer program into distinct sections, such that each section addresses a separate concern. A concern is a set of information that affects the code of a computer program. In the context of HTML and CSS, we saw that it is highly desirable to separate content from presentation.

Responsive Design

An approach to designing web pages in such a way that they work well across all browsers and devices.

Summary

That’s the end of “How To Make Your Web Pages Look Cool” module. We introduced CSS and saw how it can be used to add style to your web pages. If HTML defines the content, CSS defines the style. We also learnt the 3 methods of including styles in our web pages and saw a few examples.

It is worth to note that getting good at CSS is hard, it takes a lot of patience and a good eye for design. An additional challenge is ensuring that your CSS works across all browsers and also different devices!

Visitors should be able to view your website on their desktop, tablet or mobile. We therefore need to use responsive design! I will introduce you to a method to easily get around these problems in a future blog post – so stay tuned!

Next Module: How To Add Social Media Icons To Your Website

Created anything cool? Share it in the comment section with a CodePen, I would love to see your work!