I’ve decided to pick an html and css weakness each week and work on that weakness. Each weakness I choose, I’ll find a project each day to work on that relates to that weakness. For instance, this week, I’m working on the <nav> element and plan to code several different nav’s in several different styles. I found this post really helpful in understanding the basics of creating good navs.
https://www.adam-bray.com/2017/02/17/easy-html-5-css-3-navigation-menu/
I finished the Responsive Web Design course on freeCodeCamp. I really learned a lot! I didn’t realize how dated my HTML and CSS skills were. So much so, I’ll be working on a site redesign for new-aeon-design.com. Can’t wait to incorporate all the new stuff I learned.
freeCodeCamp course completion certificate.
I started working on redesign for another personal project too. I’ll post a link to that when I think it’s upload-able 🙂
I’m on a roll now. I’ve really been cracking away at the keyboard. I’m on day 27 of the 100DaysOfCode twitter challenge. I keep looking for fun projects to get involved with and to also help keep it fresh. Right now, I’m trying to decide whether to start a JavaScript course or start a WordPress course I bought a couple weeks back on Udemy. I’d like to keep the momentum going. I’ve got a bunch of site upgrades to practice my CSS and H5, and also a client project I’m working on. That’s actually what inspired me to take the refresher course. I’m thinking about going full on front end developer!
I’ve currently been working on code related projects at least 3 – 4 hours a day. Sometimes longer.
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.
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.
My SoloLearn CSS course certificate.
The SoloLearn HTML award certificate.
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!