How To Start Learning HTML – A Beginners Guide

Being a computer programmer usually means that you can expect open job positions anytime while also sustaining your own tech-related needs sufficiently. Indeed, even knowing the basics of computer programming can get you places you never thought of before.

But there are other reasons to get started with computer programming and coding. For instance, learning HTML can help you easily build your own website from scratch. Hence, here’s how to start learning HTML even as a beginner.

What Is HTML and Why Do You Need It?

HTML stands for Hypertext Markup Language. To put it simply, it is a language used for writing websites and their web pages. HTML is somewhat like a backbone for websites making their pages functional and creating the structure of your website. In addition to HTML, you will need to use CSS (or Cascading Style Sheets). This is another language used for creating the visual look of your web pages.

Created in 1989, HTML was the invention of Tim Berners-Lee and Robert Cailliau among others. The latest version of HTML is HTML5. As you start learning HTML, you will likely realise that it isn’t as difficult as it may seem at first. It’s just a matter of building a strong foundation with basic HTML knowledge and then learning more about it as you go.

Organise Your Learning Process

Before you begin learning HTML, you should first think about organising your learning process. By having a schedule for your study sessions and considering all the learning materials you will be using, you will be able to get ready on time and organise yourself better. And, of course, by being organised, you will be able to manage your time much better, learning at a faster pace and getting other work done throughout the day swiftly.

In other words, organising your learning process will help you save a lot of time and effort while also streamlining your learning journey. After (or even before) you have chosen your courses and study materials, think about how often you can actually study. Aim for at least three to four hours a week and adjust your schedule accordingly. If you enrol on a course with a fixed schedule, you will also have to take this into account when making your schedule.

But how long will it take you to learn HTML properly? The good news is that you can grasp the basic elements of HTML in no more than a few hours. However, these are just the bare basics and no more than that. To truly understand HTML or even master its advanced elements, you will need to invest more time in learning theory and practising what you have learned. Practice is the keyword here – without it, you won’t be able to learn HTML properly.

Consider Other Things You Should Learn

As mentioned earlier, HTML is not the only thing you will need to use to create your website. There’s also CSS to think about because the two come together. As Veronica Hills professional essay writers review site puts it, “HTML lets you create the skeleton for your website while CSS builds on it creating the bones, the muscles, and everything else.”

Much like with HTML, CSS will require you a few hours to grasp the basics and then tons of practice to properly learn it. Luckily, many resources available to you for learning actually combine materials for HTML and CSS which means you can learn the two simultaneously. Alternatively, you can first seek out HTML resources and then move on to CSS once you are confident with using HTML.

Choose Your Learning Platform and Resources

So, how exactly can you start learning HTML? Well, you can buy a book, enrol in a university course… or you can start learning it yourself by finding relevant online courses or using online learning materials. Here are some options to consider:

  • W3Schools is a website that covers the basics of such languages as HTML, CSS, Python, JavaScript, and others. There are examples and interactive tests available absolutely for free.
  • freeCodeCamp is a free online course on HTML and CSS focusing on practice.
  • Udacity is an e-learning platform where you can find free HTML and CSS courses taught by an instructor who will explain all the basics to you.
  • Codecademy is one of the most popular platforms for learning HTML piece by piece and focusing on theory.
  • HTML.com is a website for beginners who want to learn HTML. It has step-by-step tutorials guiding you through the foundations of the language.

HTML Editors You Can Use

Last but not least, as you study HTML, you will need to use an HTML editor. As experts from the best websites with custom writing reviews say, “Never use word processors for writing HTML code. Instead, use an HTML editor. Test what you’ve written in different browsers to see how your work varies depending on the browser you use.” Here are some HTML editor options to check out:

  • Notepad++ is a very popular choice in the realm of HTML editors but it can also be used for other languages. It is a small program that offers the basic functions for you to write your code as clean as possible. It has a simple design preventing you from getting distracted and also has some plugin options for more functionality. In addition to that, it has a very handy autocomplete feature. However, Notepad++ isn’t supported by Mac computers and can be a bit difficult to get used to as a beginner.
  • Sublime Text 3 is another popular HTML editor which is both free and available for multiple platforms, including Windows, Mac, and Linux. The best thing about this HTML editor is that it is quite user-friendly and has a number of customisation options while also having a visually appealing interface to look at. On the other hand, there is no toolbar or dashboard and you can’t print code or documents.
  • Komodo Edit is another interesting option to check out. It is a free, open-source editor that supports multiple languages and offers different extensions. Komodo Edit is known for having a user-friendly interface and being supported on multiple platforms (Windows, Mac, Linux). That being said, there is no default autocompletion and some of the settings are hard to find and change.

Final Thoughts

All in all, learning HTML definitely has a variety of benefits, no matter what job you are performing or how you will be applying your HTML knowledge. Whether you want to be a computer programmer, or you are a small business owner looking to build your own website, learning HTML is the way to go.

That being said, as you set out on your learning journey, you will need to follow a number of best practices to be successful in your endeavour. Use the tips in this article to help you start learning HTML.

Frank Hamilton - Profile

Posted by: Frank Hamilton

Frank Hamilton is a blogger and translator from Manchester. He is a professional writing expert in such topics as blogging, digital marketing and self-education. He also loves traveling and speaks Spanish, French, German and English. Meet him on Facebook and Twitter.

 

It’s good to share

How to Disavow Links – The Ultimate Guide

As we know, in modern times, backlinks are one of the most important factors when it comes to SEO. In this tutorial, we are not talking about acquiring backlinks, but removing them. Why would we remove them? Well, not all links are good backlinks, bad backlinks come with a spam score which gives you a negative score or a spam score. This is why it is good to use the disavow tool to remove unwanted backlinks.

Unlike some other topics, Google has been quite forthcoming on their backlink disavowal views and its place in your search engine optimisation toolbox. Let’s look as to why you may want to disavow a link and how we go about using the tool.

Why Should We Disavow Links?

If your spam score is increasing or poor backlinks are having a negative effect on your SEO, then the disavow tool is what you should be using. If you receive a message from Google in your Webmaster Tools about having ‘Unnatural Links’, you are being penalised whether you are knowingly complicit or not.

An important role for any SEO export is addressing any Google penalties that may arise. It’s not an issue if you stick to white hat SEO, but knowing how to keep a clean backlink profile for your website is vital when it comes to your SEO strategy.

Another great tool you can use to monitor negative backlinks is Moz Domain Analysis tool. This will provide you with metrics for your PA (Page Authority), DA (Domain Authority) and a Spam Score which is all ranked between a value of 1-100. However, I am going to mention here that if we disavow links in Google’s Disavow Tool, it will not take effect on Moz. We are simply using this tool to check which links we could potentially disavow. Unfortunately, Moz doesn’t have any access as to which links have been disavowed from Google, so just within Moz; it won’t reduce your spam score.

We, unfortunately, will not detect that a link has been disavowed, this isn’t something we were able to include in the old or new DA models. Since disavowing links doesn’t actually remove a link, it just signals to Google that the links aren’t important, our crawler will continue to find the link. We are working on having something like that built into Link Explorer, where if you disavow a link in Google, you can also mark it as disavowed in Moz, but I’m afraid that option isn’t available yet.

So, what constitutes a healthy backlink profile?

In general, the majority of organic backlinks can be classified as ‘good backlinks’. They represent the ideal Internet that Google is looking for. One where the website has great content is referenced frequently, naturally and freely. A single backlink won’t really have a big impact on your website, but they will slowly be building a reputation for your website and acknowledge your website to be a trustworthy and authoritative source.

On the other hand, ‘bad backlinks’ are mostly non-organic (with few exceptions). Two of the biggest offenders of this are where people decide to purchase backlinks in a mass order from shady websites. This, and intentional backlink schemes which utilise a private backlink network (PBN). You can read more about this in this article: What do I need to know about buying backlinks in 2020?.

It is also possible to gain ‘organic’ links from spammy websites that are just lists of products and links with no real content. The link was most likely generated by a script/robot, and it is certainly not benefitting your site, in which case, these are the ones we want to be removing.

Negative SEO Attack

Just to add here, with disavowing backlinks, you have to be really careful. It is a serious action. that can significantly impact your search ranking, whether it’s for the better or worse, so be very careful with the links you wish to disavow.

Google considers it a pretty last-resort option. You can find this in Webmaster Tools > Advanced and there are 3 warning screens you have to click through before you can upload a disavowal file.

In general, you should only disavow a link that you know for sure is bringing you down. Check the Google Quality Guidelines for a more exhaustive list.

Note that a link from a low-traffic or low domain authority site is not a bad link. It probably won’t contribute much individually, but every link is a vote of confidence in your site that Google takes into account. Obviously high ranking PA / DA websites will increase your score quicker, but a thousand low-quality PA / DA websites linking to your website is also helping you as well.

So, What Happens When You Disavow a Backlink?

Essentially, this is a request for Google to ignore those links to your domain. If the link disavow is successful, it won’t be counted for or against you when determining ranking in the search results.

Do note, Google is not obligated to honour your request to disavow the links. If you have a look in their documentation, you will see that it is only a suggestion to disavow the links that you are requesting. Also, this can take up to 48 hours before it takes effect on your websites search ranking.

Is it possible to undo a link disavow?

It is indeed. You are always able to download your current disavow file and edit it to your requirements. I wouldn’t edit it too frequently, you really want to be sure that the links in which you want to disavow are the right ones and the ones you wish to stick with.

How to do I Disavow Links in Google Search Console?

If you have a Google Analytics tracking tag on your website then you will also have access to Google’s Search Console tool.

Within the Google Console, you can conduct a link audit from the Link Report page. Just click the Export External Links button on the top right of the screen then select the More Sample Links option. You can export this file if you wish as well.

Once you have determined which links you are sure you wish to disavow, you will need to create a text file (*.txt) which you can upload to the Google Disavow Tool. With this, you need to follow a specific format but it’s really simple. The format goes as follows:

  • Each entry has to be on a different link
  • Each entry needs to begin with domain:
  • You can name the filename of the text file as anything you like

Following these rules, here is an example of how you can block either a complete domain or just a specific page:


# Pages to disavow
https://spam-website.com/this-is-a-bad-link
https://spammy-website.com/oh-damn-another-bad-link

# Domains to disavow
domain:spam-website.com
domain:super-spammy.org

Blacklisting the entire domain will save you quite some time over blocking just a specific URL. However, there are few instances in which you would want to disavow a single link from a site but still allow other links from that domain, but that’s why the option is available.

Head over to the Google Disavow Tool, select your domain and click through all of the warnings prompts until you reach the dialogue box that allows you to browse your folders and choose a file to upload. Select the disavow file you already created, and select Open to upload it to the disavow tool.

Within the next day or so, Google will no longer take the listed domains into account when determining your pages’ ranking.

Conclusion

Disavowing links can be intimidating if you don’t know what to do, so be sure you know what you are doing before adding a list of domains/pages. You can potentially ruin your SEO if you abuse disavowing, so it’s crucial to get it right.

We think every site owner needs to know about disavowing. It can mean the difference between a clean link profile and a spammy one. Plus, there are so many benefits to disavowing links correctly. Why? Well, your website will most likely get a book in ranking which will result in a higher ranking and more traffic to your website.

As already mentioned though, you don’t want to disavow links if you can help it; a manual removal is always preferable.

Only disavow links when you have no other choice. In this case, don’t be afraid to use the Disavow Tool, at the end of the day, that’s why it’s readily available.

Hopefully, you have a better understanding of why you should disavow links and when you should do it. It can be a bit of a daunting task, but once you get used to it, it’s super easy.

Has the disavow tool ever helped you in the past? How much did it improve your rankings? Let us know! 🙂

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to include both Desktop and Mobile versions for images within an ACF Repeater Field / Image Field

Today, we will show you how you can have different versions for images for your ACF Fields within WordPress. This will work for images, ACF Repeaters and so on…

Recently, we built a website and we used the ACF Repeater field to create the contents for a Carousel using Bootstrap. For this particular job, we needed to use different images for the desktop and mobile version.

So first things first, create a field for ‘Desktop Hero Image’ and a separate field for ‘Mobile Hero Image’.

For our particular example, we ended up with an ACF Repeater as below:

For the full code for a Bootstrap 4 Carousel in WordPress, see the code at the end of this post.

Now, we’ll show you what we did to have a desktop and mobile version for the hero image. If you’ve already created this, you might have a field like this:


    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);"</span>

What we need to do is amend this and create a data attribute for both the desktop and mobile version, as per the below example:


    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_hero_image'); ?>"  data-lrg-src="<?php the_sub_field('desktop_hero_image'); ?>"></span>

Next, we need to add some jQuery code to change the hero image based on the browser width. In our example, we wanted to change the hero image if the window width is equal to or less than 575px. To do this, we added the below jQuery code:

<code class="language-JS">
    // Desktop/Mobile Hero Images

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

One thing to note is that the above code will only work on page load. So if you are resizing the browser, the above code will not change the image. We can, however, fix this by using the resize function. To do this, simply add the below code:

<code class="language-JS">
    // Desktop/Mobile Hero Images + Resize Function

    $(window).bind('resize',function(){

        var windowWidth = $(window).width();

        if (windowWidth <= 575) {
          $('[data-small-src]').each(function() {
            var small_src = $(this).data('small-src');
            $(this).css({'background-image':'url('+small_src+')'});
          });
        } else {
          $('[data-lrg-src]').each(function() {
            var lrg_src = $(this).data('lrg-src');
            $(this).css({'background-image':'url('+lrg_src+')'});
          });            
        }

    });

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

Well, we hope this has helped you.

If you are wanting to know how to create a basic carousel using Bootstrap 4 with an ACF Repeater, please refer to the below code:


	<!-- Home Carousel -->
	<div id="homepage-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-touch="true" data-interval="6000">
		<ul class="carousel-indicators">
			<?php 
				$count = 0;
				while( have_rows('hero_carousel') ): the_row();
					if ($count == 0) {
						echo '<li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>';
					} else {
						echo '<li data-target="#homepage-carousel" data-slide-to="'.$count.'"></li>';
					}
				$count++; endwhile;
			?>				
		</ul>
		<div class="carousel-inner" role="listbox">
			<?php
				if( have_rows('hero_carousel') ): $counter = 1; ?>

				    <?php while ( have_rows('hero_carousel') ) : the_row(); ?>

						<div class="carousel-item <?php echo ($counter==1)?'active':''; ?>">
							<div class="container">
						      <div class="title-container">
						            <div class="headline animated fadeInLeft">
						            	<div class="row">
						            		<div class="col-md-8">
								                <h1><?php the_sub_field('title'); ?></h1>
								                <p class="txt-headline"><?php the_sub_field('text'); ?></p>
								                <?php if(get_sub_field('button_text')) { ?>
								                	<a href="<?php the_sub_field('button_url'); ?>" class="btn"><?php the_sub_field('button_text'); ?></a>
								                <?php } ?>
								            </div>
						            	</div>
						            </div>
						       </div>
						    </div>
						    <div class="homepage-overlay">   					
					        	<span class="hero-slider" style="background-image: url(<?php the_sub_field('image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_image'); ?>"  data-lrg-src="<?php the_sub_field('image'); ?>"></span>
					        </div>
						</div>

				    <?php $counter++; endwhile;
				else : endif; 
			?>
		</div>				
	</div><!-- #Home Carousel -->

As always, we hope you enjoyed this tutorial... If this has helped you, leave a comment below! Happy Coding! O_o

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share