How to Learn and Practice HTML & CSS Offline

You can practice HTML offline by using a browser, a text editor and a reference guide. The reference guide can be a book, website, or video(saved offline).

By now I am assuming you have learnt some HTML using online tool and tutorials. However, you also want to practice HTML without using the online tutorials and code editor for various reasons. Well, it is possible.

You will need to prepare in 4 steps to ensure you are ready to learn and practice HTML offline.

1. Tools needed: a browser, a text editor, and an offline HTML and CSS course.
2. Content creation.
3. HTML practice project.
4. Getting the project online.

1. Offline Tools for Practicing HTML

You will only need two tools to be able to learn and practice HTML offline.

Offline HTML Text Editor

This will enable you to write and edit code the HTML file. Each computer already has a text editor. For now, you don’t need to install anything new.

However, if you want to try a dedicated code text editor, you can install Sublime Text or atom or notepad++[only on windows].

Point to note. Don’t use word processing software like Word document. They will mess up your HTML code.

Web browser for viewing HTML webpages

We shall use the web browser to view the HTML document. There are many web browsers you can use but I recommend firefox or chrome.

Web Maker (optional)

Webmaker is an offline chrome extension. It lets you edit the code and see the results right on the browser.

If you have used codepen.io, you will notice the similarities. Install this browser extension to continue the interface you already know and like offline.
.

Learning and Reference Materials

2. Content Creation

You will need the words, pictures and/or videos that will go onto your web page / html project. If you already have the content with you skip to the next step.

The content can be about anything. Choose a topic and find or create the content. If you are short of ideas read 100 HTML Practice projects ideas for some inspiration.

If the project is private, you can copy the text and image from just anywhere.

However, if you will publish the content online, you have 3 ways you can go about getting the content.

1. Find content under creative commons and use it. If the content stipulates that you must give credits, make sure you do so.
2. Use copyrighted information and follow the rules allowed for using and sharing such content. Give proper credits where it due.
3. Write the content yourself. Unleash the writer in you and craft the content yourself.

Make sure you save tyour content somewhere. I usually collect the information in a google docs document or a text file.

3. First HTML Practice Project

Now let’s get to the action.

File Creation

Create a file with .html file extension. For my case, I will create a file called micro-livestock.html.

Open the html file with any text editor that you have.

Add the text to your html file.

Alright, you are going to add some HTML code to your file. Then add the appropriate HTML tags. Here is an example of a HTML file you can copy and practice with.

Save your work. Use CTRL + S  shortcut to help you quickly save your work.

Viewing Your HTML Project Offline

Open the HTML file using a browser to view the result.

And voila, you have made your first offline webpage.

4. Getting Your HTML Project Online

Once you have made a webpage, you might want to publish it so that other can see it.

There are various platforms that have been made for just that. I will share two that I personally use.

Codepen

1. Go to codepen.io and login to your account. If you don’t have one sign up.
2. Create a new pen.
3. Copy paste your HTML code.
4. Save your work.

Make sure your image URLs are absolute path URLs. I.e if your images were stored offline, upload them to Flickr and use the link(i.e. they have HTTP or HTTPS on the URL).

Github

Github lets you publish any repository as a github page. A repository is an online folder found on github.

Create a new repository.

• Upload your html file into the new repository.
• Upload the images to github.
• Add a commit message and commit the file to github.
• Go to settings on the repository and go to publish section.
• Publish to master.

Once published, the webpage can be found on http://username.github.io/repository-name.