Tag Archives: html

Learning To Code

image of space

Learning to code isn’t easy. It takes time and dedication. There are no shortcuts!

I think it’s true that anyone can learn to code. The question is whether or not you’re committed to the task. Nobody can really teach you how to do this. I guess what I mean is nobody can hold your hand each step of the way and say, “OK, do this. Now do this.”

You can follow tutorials, and read. Then read some more and do more tutorials. Then sit in front of your computer and try and apply what you’ve learned so far. Then read more! More tutorials! More reading!

That’s how you learn to code!

Recently I decided to take the 100DaysOfCode challenge on Twitter.
https://twitter.com/hashtag/100DaysOfCode?src=hash

I’m really happy I decided to do this. My coding style for HTML/CSS/JavaScript were way outdated. I’m pretty much a noob at JavaScript. I can fumble around and get it to do what I want when I need to. I’m far from fluent in it though. Anyway, the first thing I learned is just how dated my web design skills really were. I couldn’t believe how much the markup and code has changed over the last ten years.

So I’m on day 19 of my 100 Days Of Code. Basically, it’s a commitment to code at least 1 hour a day. For me, on most days, I’ve been spending at least a few hours a day on it. I was just going to spend the first couple weeks updating my knowledge of HTML/CSS but I’m learning so much I decided to dedicate the first 30 days to HTML/CSS then spend the remaining time hacking away at JavaScript till I’m somewhat fluent. I’m not new to this, and I know the only way to do this right is dedicate the time to it.

I love when you see Youtube videos with titles like, “Learn JavaScript in 1 Week”. Look, I don’t care who you are. That’s just not going to happen. There is no quick and easy way to learn to code. Frankly the quick and easy way to learn to code is actually really long. Simply sit down in front of your computer and start to code. Get stumped, research, code some more. Spend at least a few hours a day coding. That’s how you learn, and that’s how you get good. There are no shortcuts. Read, learn, code / wash, rinse, repeat! When you think you know all there is to know, it’s time to learn some more!

I think the second most important thing is stay up to date. I’ve been messing around with web design since the 90s. A lot has changed. I’ve rested on my knowledge of HTML since around 2005. A lot has changed. By staying up to date, we strengthen our confidence, and are able to give clients exactly what they pay for. A professional looking website, that loads on multiple devices with a modern up to date codebase.

First thing I’m doing after my 100 Days of Code is updating the outdated look of this website. So much new stuff happening. Can’t wait to share what I’m learning.

Latest Course Awards – SoloLearn CSS & HTML Fundamentals.

My latest course awards. I’ve been working on the SoloLearn app and finished the CSS and HTML fundamentals courses. Great courses and a really fun app for the phone. SoloLearn is a community of coders working on everything from Python to CSS and everything in between. The courses are filled with tutorials, code explanations and quizzes. I really enjoyed these a lot. If you’re looking for a fun phone app to practice code and learn, you might want to check it out.

css certification award

My SoloLearn CSS course certificate.

html award certificate

The SoloLearn HTML award certificate.

A Bash Script HTML Boiler Plate Generator

I decided to do the 100DaysOfCode challenge on Twitter. Basically you have to do at least an hour of code each day for 100 days. For me it’s been a few hours a day, but I’m on a serious mission.

For the most part I’ve been focusing on HTML5 and CSS3. I desperately needed to get up to date with both. Today however, I felt like changing it up a bit. I decided to create an HTML template generator using BASH scripting. I thought about using Python, but BASH seemed more suited to the task, and it’s been a while since the last time I used it.

I’ve only messed around with BASH a few other times. The last time, was probably about 15 years ago when I had to rename a couple thousand image files in a directory. I wrote a script to do the work for me. BASH is perfect for taking repetitive tasks and automating them for you.

BASH stands for the Bourne Again Shell. It’s a scripting language native to Linux and Unix systems. I figured it would be the easiest way to create a program to auto-generate the starting skeleton of an HTML document. You know, all the boring stuff in the head like the title, meta tags, links to your fonts and scripts. Now all I have to do is type the command “template” in a terminal window and it creates all that for me. Then just customize the meta-tags, title and anything else that needs to be changed to fit the project. Here’s how I did it.

First I created a directory on my hard drive ~/scripts/bash

In the new directory I created a basic text file with my html template in it and named it html_template.txt I normally write my own skeletons but for the test I found this really cool site that does it for you. http://htmlshell.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  <meta name="author" content="name">
  <meta name="description" content="description here">
  <meta name="keywords" content="keywords,here">
  <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=font1|font2|etc" type="text/css">
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
  </head>
  <body>
  
  </body>
</html>

Next I wrote my bash script:

#! /bin/bash
# script to auto-generate html templates.
# create alias and link to this script.
#
# example: alias template=~/scripts/bash/./template_maker.sh
#
# point the html template on line 13 to proper directory.
# In my case ~/scripts/bash/html_temp.txt

echo "What is the name of the html file you want to create?"
read Name

cat ~/scripts/bash/html_temp.txt >> $Name

mv $Name ${Name}.html

echo "Would you like to create another file? Type 1 for yes or 2 for no."
read userInput

if [ $userInput -eq '1' ]; then
clear
./template_maker.sh && exit
else
clear
echo "Thank you, come again!"
fi

Here’s a basic explanation….

I created a script called template_maker.sh

Using “echo” we ask the user the name of the file they want to create.

The user types in the name creating the Name variable.

Using the cat command we copy the text (the html template) from html_temp.txt and append it to the $Name variable.

We then copy the Name variable using the “mv” command and add the .html extension.

The program then asks the user if they need to create another file by entering 1 for yes or 2 for no.

If they enter 1 the program starts another instance of the script before exiting and asks the user the name of the file they want to create starting the process all over again.

If the person types anything other than 1 the program ends and prints “Thank you, come again!” to the screen.

I then turned the script into an alias command by permanently adding it to the last line of my .bashrc file in my root directory.

# my custom bash scripts

alias template=~/scripts/bash/./template_maker.sh

If you decide to try this or use this make sure the command points to the directory you stored the bash script in, and make sure you link the text file in the script to the proper directory as noted in the comments section at the top of the script.

Now whenever I start a new project I just open my terminal program, cd to the new project directory,  figure out the page names I’m going to create and get the starter templates or boiler plates loaded. Saves me a good 15 to 20 minutes of time depending on the size of the project I’m working on.

I run the “template” command. Enter the names, index, links, directions, contacts one at a time and the script creates the skeletons of index.html, links.html, directions.html or whatever I want to name the page.

I’d like to improve on this in the future with a more elegant loop, and maybe add an option to create a basic css stylesheet as well. I’m sure I’ll think of a few other improvements too.

So that’s my second attempt at a simple bash script. Hope this made sense and if you read this far, thanks for reading!

Getting Real Serious About Web Design

As I stated in some earlier posts. When I got into cryptocurrency trading I put everything on hold including this business. For the most part, I’ve lived crypto 24/7. I learned a lot and made a few friends along the way.

When I got back into web design I realized immediately that a lot has changed in the code. HTML5 features a lot of new tags, and I could definitely use a refresher course in CSS3. Over the last couple weeks I’ve signed up for several code boot camps focused around HTML5 and CSS3. Because most of these courses all have the same general content flow I do them all simultaneously. I’m currently signed up for I think 4 different boot camps.  In a lot of ways, learning code is all about repetition. The more you get your feet wet and do it, the more you’ll retain. At least, that’s how it has always worked for me.

I finished the shortest course last night. It was an introduction to HTML on CodeAcademy.

Introduction To HTML – CodeAcademy

CodeAcademy doesn’t give you a certificate so I took a screen shot.

Completed course for introduction to HTML

Introduction to HTML – Course Completed.

my completed skills screenshot.

HTML first to be added to my completed skills.

I was a little apprehensive about taking an Introduction to HTML. I’ve been using this markup language since the mid 90’s. I was really happy I took it though, a lot has changed since then. The course covered a lot of the new features in HTML5 and I realized how dated some of the markup I was using was.,

I think I’m going to get involved in the 100 Days Of Code challenge. It’s a challenge to code at least a half hour a day and learn something new everyday for 100 days.  I’d like to finish that before summer arrives 🙂

Next up… Another refresher course in CSS!

Well if anyone needs a website, now is the time to contact me. I’m working cheap right now, but that’s going to change soon. I brought on a local real estate developer, and I should be finished up with that in the next week or so then I’m free to take on new projects.

A Link To My CodeAcademy Profile.

Goals & Resolutions 2019

Getting focused on 2019! Setting goals and starting to work on some old projects. I’ve had this website for several years, and it’s always taken a back seat to all my other projects. That’s changing in 2019. I’ll be doing a lot of design work to this site, adding many offers and trying to finally get the business aspect of this site off the ground.

Blogging will be another big part of my 2019. I’m currently managing several different blogs. I’ll be posting about those and also blogging here regularly. I’ll be offering blogging services too, like setup, and design for anyone that might be considering a blog but isn’t sure on how to get started.

The content on this site will be centered around blogging, HTML, and graphic design, social media marketing, and working as an internet freelancer.

Wishing you all a wonderful 2019, and wishing you health, wealth, and prosperity in the new year.