How To Add Social Media Icons To Your Website

How to Make Your Own Website Tutorial

Adding social media icons to your website is an easy way to make your website look great and help build up your social media following. This is the sixth module in the How to Make Your Own Website Tutorial.

Last time, we introduced CSS and saw how it can be used to style our web pages. We learnt that CSS is a separate language to HTML and how the two go hand-in-hand to allow us to create beautiful looking web pages. In this module, I will show you how to add social media icons to your website and make it stand out even more!

This technique can be used not only for social media icons but indeed any type of icons.

Watch It On YouTube

How To Add Social Media Icons To Your Website

The easiest way to add social media icons to your website is to use a free 3rd party library of icons! I highly recommend Ionicons and Font Awesome Icons for this.

How To Add Social Media Icons To Your Website
How To Add Social Media Icons To Your Website

Using Ionicons

Ionicons is  packaged up as a zip file which you can download here. Unzip it and what you need are the css and the fonts directories.

To include social media icons in your website you just need to reference the CSS in your HTML code as you would any other CSS file:

<link href="css/ionicons.min.css" rel="stylesheet">

Once you have referenced it in your HTML file, use the Ionicons website to find the icon you want to use. To use any icon the HTML tag to use is shown below:

<i class="icon name"></i>

Then simply replace “icon name” above with the actual icon you want to use. For example, to use Facebook:

<i class="ion-social-facebook"></i>

We can add inline style to make it larger:

<i style="font-size: 50px;" class="ion-social-facebook"></i>

Let’s add a Twitter and YouTube too. And let’s add hyperlinks! Note how I applied the style to the div element. In the supporting video I went a step further and split this out to our CSS file.

<div style="font-size:50px;">
  <a href="https://www.facebook.com/learntocodelondon/">
    <i class="ion-social-facebook"></i>
  </a>
  <a href="https://twitter.com/learncodelondon">
    <i class="ion-social-twitter"></i>
  </a>
  <a href="https://www.youtube.com/channel/UCgB1DA8uNnpSWPKHQDWqRWw">
    <i class="ion-social-youtube"></i>
  </a>
</div>

Let’s now build on our RetroSkatr example from the previous modules and add social media icons to the bottom! Check out the CodePen below. Take a moment to see how it all fits together.

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

How To Add Social Media Icons To Your Website
RetroSkatr With Social Media Icons
Exercises
1. Apply icons to the web page you created as part of the exercises in module 5.
2. Experiment with adding different icons into your web page.
3. Challenge: Try embed Font Awesome Icons in your web page!

Summary

That’s the end of “How To Add Social Media Icons To Your Website” module. It was a quick one, but illustrated a key concept of including 3rd party icons in your web pages. Next time we will cover how to organise your website assets to make them easy to manage! This is in preparation to publishing your website online! Oh and by the way don’t forget to follow us on social media using the icons at the bottom of this page! 🙂


Next: Website Structure Explained

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!

Best Web Server For WordPress

Best Web Server For WordPress

In this article I will introduce the best web server for WordPress. Drive Your Online Business Forward With Managed WordPress Hosting From WP Engine!

WordPress is one of the most powerful frameworks for building amazing web sites and you need the best web server for WordPress. You need a WordPress hosting platform!

One of the issues, is that WordPress can be challenging to setup by yourself and even once you get setup it becomes hard to scale your website as it grows!

Why Choose Managed WordPress Hosting?

Often overlooked, WordPress hosting is one of the key component of every successful website. Choosing the best managed WordPress hosting platform for your needs can drastically improve your search engine visibility and increase sales.

Introducing WP Engine

Technology

Thrive amid high-traffic demands, suddenly changing markets, and unforeseen conditions. Create robust and reliable websites with direct cutting edge technologies and one-click management.

Innovation

With a full time engineering staff and dedicated labs team, WP Engine are defining the bleeding edge of WordPress technology. Unlock your brand‘s full potential by leveraging their innovations.

Culture

WP Engine are proud of our people as they are of their technology. WP Engine commitment to individual and community success makes WP Engine a trusted technology partner to customers.

Performance

Your visitors are impatient. And if your site is slow, they’ll take their business elsewhere. But with WP Engine, your visitors are staying put. Sites run four to six times faster on WP Engine unique front-end technology than on another environment. Every WP Engine customer benefits from the same robust, enterprise-grade software technology stack. So whether you have a personal account or a dedicated enterprise solution, you always get an efficient, scalable, secure WordPress experience.

Conclusion

Overall, WP Engine is the WordPress hosting solution that I highly recommend.

Build faster, protect your brand and grow your business with a WordPress platform built to power remarkable online experiences.

WP Engine provides best-in-class customer service on top of innovation-driven technology. This is why over 60,000 customers in 120 countries have chosen us for their mission critical WordPress hosting needs.

In summary, WP Engine is the best web server for WordPress so check it out today!


20% Off WP Engine

best web server for WordPress
Special Offer!

We partnered up with WP Engine to bring you 20% off with a special promo code!

Service Provider: WP Engine
Start Date: 20/02/2017
End Date: none
Promo Code: wpe20off


Click Here To Find Our More About WP Engine

 

The Secret Most Programmers Won’t Tell You!

How to Make Your Own Website Tutorial

In this module we will cover the secret most programmers won’t tell you! This is the fourth module in the How to Make Your Own Website Tutorial.

If you have jumped straight into this section, make sure to start at the beginning and read through from module 1! If you jump straight into this module, it will probably not make sense and the secret will be a total waste!

Last time, we covered the key HTML5 tags used when building web pages. We also saw an example combining all the newly learnt HTML5 tags in a single page. In this module, I will introduce you to the secret most programmers won’t tell you! This module is a bit different because we are going to focus on the process of learning a new language. And believe me, you will love it! OK ready?

Watch Supporting Video on YouTube

The Secret

Google will almost write the code for you

Yes You Read That Right!

When learning a new language, learn the very basics and how it all fits together, take time on this step, then jump straight in and start coding. Then, this is the secret – Google will almost write the code for you! I can feel your doubt…

Let’s Address The Doubt With An Example

Allow me to demonstrate.

So far in this free beginners course, we have learnt most of the HTML basics. We learnt to write HTML code using an advanced text editor. Additionally we found out how to adhere to the HTML standard. We covered the basic structure of an HTML document. Also, we can now use HTML tags and attributes. We can view the results in a web browser. Then we edit, save, view the results and repeat this loop until we are happy with the result. Remember this is called iterating in programming speak. We got this process locked down! As a result, I would argue, we now know HTML!

“Ah but we only learnt a few HTML tags”, I hear you say! “I don’t know HTML at all! For example, I want to make my text bold and you have not shown me how to do that!”

Yes that is true. BUT you understand the process now! The rest you can figure out by yourself easily as long as you know how! All we need to do, is find the missing piece and fit it into our code.

This is where Google comes in. Just search “how to make text bold in html”. Pick a result that looks like a good match. Stack Overflow usually provides the best results because the best answer has the most up votes from other programmers!

Using Stack Overflow to learn
Using Stack Overflow to learn

We just learnt that the correct tag to use is <strong>! It is so simple! We don’t even need to remember anything and believe me even the best programmers who juggle multiple languages sometimes forget simple HTML tag names or attributes. In this example, the answer had over 80 up votes on Stack Overflow which gives us confidence that the answer is correct.Let’s try it out:

<strong>WOW - I just learnt a new tag!</strong>

And the browser will show you…

WOW – I just learnt a new tag!

A Word Of Warning

It won’t always be this easy, especially when you are looking for answers to more complex questions. However, as long as you got the fundamentals of the language understood and you have your iterative loop locked down, you can learn how to do incremental things in a breeze!

Crowd Programming

You simply need to provide the context to Google by supplying the language you are using, in this case HTML and then what you want to do in plain English. Then you need to find an answer from a reputable source like Stack Overflow, take the answer, plug it into your code and test it out!

In fact, the rest is just practice and learning how and where to plug things! I kid you not!

As long as you understand the language fundamentals, you can do this. Trust me, the best programmers do this all the time. It even makes sense, if I want to do something new, I want to see how other programmers are doing it and look at best-practices to find the most efficient way possible! What better way to find out then to consult the best programmers from around the world? It’s like crowd-programming!

However, if you have not learnt the language basics and do not fully understand what is going on, do not have your iterative loop setup, you will likely not be able to join up the dots and will end up guessing and getting into a mess.

The Process Of How To Learn

It may feel like cheating, but it is not. It is just a good way to incrementally increase your knowledge of the language you are learning. The best thing for a beginner to understand is the process of how to learn.

I’ve lost count how many times I have applied this technique over the years as a programmer! I still do it today.

As your experience, knowledge and confidence grows, you can feed back into the community by posting your answers to Stack Overflow (or another programming forum) to more complex questions and help other people out. Programming is about sharing and it is also about the journey. As you go from rookie to guru, you will experience this. Programmers are hippies at heart really! 🙂

Another big mistake new people often make is they learn the whole language. They read all the theory, all the examples, all the intricate details. And then, they say – “now what?” They are stuck! On the one hand, they have learnt the language but are now facing a wall. They don’t know how to apply the knowledge they have gained. The best way is to learn the basics, have a small project in mind and then let the creativity drive you, learning what you need along the way!

The Pace Of Change

It may feel like a cop-out, but it’s not. It is actually necessary to learn this way. We learnt the most common HTML5 tags in the previous module and there is little point learning more at this stage.

Technology is changing at a staggering pace and the days where you read a manual and became good at a language are over. There is constant change and keeping up with the latest and greatest has become part and parcel of being a good programmer.

Another example, I use WordPress for this blog. When I want to add a new piece of functionality, I do a bit of research and see if there are any cool plugins with good ratings I can use. Then I might customise them a bit. Because I know HTML, CSS, JS and PHP fundamentals I can make a few changes to get the functionality I want, learn something new along the way and get up and running very quickly.

New Terminology You Learnt In This Module!

The Secret

Learn the basics, get coding and learn what you need as you go! Leverage other programmers’ knowledge in what I like to call crowd-programming!

Summary

That’s the end of “The Secret Most Programmers Won’t Tell You” module. The key point, there is no point learning EVERYTHING about a language. Just understand the big picture, get something basic working and learn what you need as you go along by drilling down into the details. The more you use a language in practice, the more of an expert you will become. You can then dive deeper into particular areas that your project requires you to become knowledgeable about. There is no point learning every tiny detail because it is not necessary. Moreover, it is almost impossible.

Learning programming is a continuous journey of keeping yourself up to date too, so you will never sit back and say “right I know everything about programming now”.

Next Module: How To Make Your Web Pages Look Cool

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