Setting Up an HTML5 Template
There’s no shame in picking out an HTML5 template for your professional or personal site. People do it all the time when using services like Wix. It gives you an opportunity to learn from the skills of the professional who made it while you customize it and make it your own.
💬 Few activities can help you learn web development better than customizing a template since that is how most developers use their web development skills. Rarely are you every creating web projects from scratch.
But First …
Step by Step
Find a template you like.
Here are some good places to find HTML5 templates:
Here are some things to consider when selecting one:
- Do you even need a template?
- Is the template responsive?
- How does the template look on a mobile device?
- Does it fall within your reach to maintain with your current Web skills?
- If your template is heavy on images do you have images to include?
Definitely avoid the following:
- Stay away from any PHP template. [I don’t care if 50% of the Web runs on PHP.]
- Avoid Bootstrap or Foundation. [Now that CSS Grid is a thing.]
- Templates that are only for desktop [50% of all web traffic is mobile.]
Once you have found a good template you need to download it.
Now you need to move the file into your web GitLab project.
Navigate into your project repo.
cd cd repos cd YOUSITE
Now use the
mv command to move the compressed file from
~/Downloads to here. You can take advantage of your
mvlast function if you have written one at this point.
⚠️ Make sure you get the compressed file and not something else — especially if you are on a Mac and it has automatically extracted the compressed files for you to try and help you.
⚠️ Pay attention to upper and lowercase. They matter.
YOURFILE.zip with the name of your file. Use tab completion if that helps. Don’t forget the dot
. which means the current directory right here.
mv ~/Downloads/YOURFILE.zip .
💎 Remember you can use your history to not have to retype it if you get it wrong. Use the up arrows or
khey if using
set -o vimode.
To check that the move worked use
You should see the file your moved in the output.
Now we can extract it.
Extracting Any Compressed File from Terminal
If it asks you to replace the
index.html say yes because it was just a filler anyway.
Now all we need is to command and push the new site. We can test it now and begin to customize it later.
Committing and Pushing a Git Project Repo
Test everything out and make sure it looks good on your site. When you are satisfied it worked you can clean up your repo by deleting the
.zip (or whatever) file.
💬 When testing you might think you got the wrong language, when in fact it is just Latin that is used in the Lorum Ipsum text for publishing. This is how template makers fill in text.