Category Archives: html css

Working On A Site Redesign.

One of the things I love about working on personal projects is the freedom you get in your design. You can experiment a bit, play around with the code, test out different layouts. For the most part, there really isn’t any pressure to produce something extraordinary on the first attempt. On top of that, you can just keep hacking away till you come out with the perfect design and layout. Add something, take it away, add it back, then completely switch it up if you’d like.

You really can’t do that with client projects. For the most part, you get a feel for what the client expects, code out a couple different versions in a set period of time, and hope and pray the client is happy with one of the end results. If you’re reading your clients correctly and listening to what they want, this usually isn’t a problem.  They pick a design, you get it uploaded to the server, do a little beta testing looking for any bugs or glitches, and if all goes well, you move on to the next project.  Easy peazy!

I’m currently in the middle of a client project that is going well. In the meantime, I’m also redesigning bitcoindood.com and this site. I’ve learned so much in the first thirty days of doing the 100DaysOfCode challenge on Twitter, that I think I’m just going to hack away at my two personal projects and see what I come up with.

It’s been a long time since I just built something with no direction. In my opinion, those were always the funnest projects and gave birth to some of the best results. I’ve got a pretty good handle on the client project I’m working on. Over the next several weeks, I’ll be practicing all the new markup and css I’ve learned on my personal projects. My personal sites will probably be changing on a daily basis. I’m pretty excited to see what I come up with.

In other news I’ve signed up for a free eDX JavaScript course that I’ll be starting next week. Staying busy, keeping it fresh, and updating my skill set!

 

Finished the Responsive Web Design Course at freeCodeCamp.

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.

certificate of course completion html5 and css3

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

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!