Creating a Website with Code: It’s Not like Riding a Bike!

Because of deadlines with freelance editing and writing jobs, I took a longer break than I wanted from coding. And people weren’t lying to me when they said to practice, practice, practice. I’m out of shape mentally, and I don’t even know how or where to jump back in. I’ve missed it, and reading over my blog and coding notes reminds me of how much I’ve learned and how excited I was.

Now, I just have to find that excitement again. And what better way to find excitement than reviewing what I’ve learned. Wrong! Who wants to do that when you can just strip off the training wheel and go for a ride?

Drupal – Downloading Is Half the Battle

So I finally starting working on my web page and blog, and I’m being ambition by using two web content management systems: Drupal 8 for my domain and WordPress for my blog subdomain. I found a host and the one-click installation sounded easy until I realized that Drupal 8 would not download. Then, I researched and found out that it required a more recent version of PHP.

But that didn’t fix my problem, so I manually downloaded it, and it was working fine until it didn’t. I couldn’t install it. So I researched the problem again and discovered a code for fixing a bug, so I opened up my text editor and got back on my coding “bike.” And it worked. I had a blank Drupal page waiting for me to write some more code.

In the middle of my Drupal 8 debacle, I started playing around with FTP to upload my revised code for fixing the bug. In the process, I managed to delete my public_html folder! But within a few hours, I had fixed the problem and was back to my original issue of installing Drupal 8—whew!

Even though this was bad luck, I know it is great experience for the many debugging and development issues I have in store. Persistence and patience are key—luckily, I have one of those!

WordPress Adventures

Of course, I realize that Drupal 8 is going to be a challenge for me as a novice coder, but I am excited about learning by doing and redoing what I will eventually break. To ease me in, I am setting up my blog with WordPress, and it has been easy so far. I had to look up a few things and I’ve even manipulated the presets by writing my own code (with the help of other examples)!

I used HTML to make a Who’s the Blogger? sidebar. I wanted to jump right in and use my own code, but the blank white box scared me, so I generated my code in the Post section by using a mix of my own HTML code and the one generated for me. I clicked on the text view and typed in my code, adding the <a herf = ""> attribute to link part of my text to my About the Blogger section. I relied on the easier method to insert an image. I used the Add Media button in the Post section and selected the image I wanted. Then, the code was generated for me. Baby steps, right? But I modified it myself, centering the alignment and making sure to add in an alt= descriptor tag. Then, I clicked on the visual view and saw that it did look like I wanted, so I copied and pasted the code into a blank text widget, and then I had a bio on my sidebar—picture and links and all.

CSS, Colors, and Widgets! Oh, my!

The process of making a Who’s the Blogger? widget on the sidebar built my confidence, so I got brave and decided to make my sidebar stand out from my blog entries. I found a few good examples of how to add a divider line and boxes and settled on one:

#sidebar {
border: 3px solid #dfdfdf !important;
box-sizing: border-box !important;
padding: 10px !important;
background-color: lightgrey !important;
}

Now, where and how to add this bit of code. First, I added a customize CSS plug-in to help make this process easier and not mess up the theme template too much yet. Then, I had to open the style sheet and read code. I clicked on the Editor and found the WARNING message: “Editing this code is highly discouraged. Proceed with caution.” So basically, don’t enter unless you know what you are doing, and I’m 75% confident so I proceeded. Caution to the wind!

I read through the code and found the class name I was looking for (.widget). So I changed “#sidebar” to “.widget” and entered in the other code. I was not familiar with the !important property, but now I know that this property will always be applied no matter where the rule appears in the CSS document. And in reading about it, I discovered that you should avoid overusing this property (because it can create problems with debugging and overriding other coworkers’ properties), so I removed those properties, and the code worked fine. I’m already learning the important rule of writing clean code!

But writing code is only half the battle. The other half is design! I didn’t love the light gray background color, so I started playing around with hex colors to find a good one for my blog color scheme. In case you were wondering, violet is not the answer! I decided I like the light gray, but I wanted it to be lighter, so I changed the border and background color to be the same light gray color.

With my design cap still on, I noticed that the text color for my Who’s the Blogger? was black and the font for the headings was gray. So I went back into the style sheet and found the color used for the widget headings and used the same color for my text by inserting color: #636467 in the tag.

But the fun never stops because I noticed that the linked text was still black. At first, I tried inserting link = “#color”. But that didn’t work. Then, I added a font tag inside the <a> tag: <a> href = "http://blog.lindseynphillips.com/about-the-blogger/"> <font color = "636467">. The color problem was fixed! But hold the celebration because then I noticed the pretty purple hover color was broken. It was gray all the time—how plain and boring!

I will spare you the next three hours of my life and just say that it isn’t easy to change the color of linked text in just one place without being 99% confident in proceeding to make changes to the main style sheet. I tried. I tried altering the CSS by adding in various id tags such as a#link:hover {color:#a161bf}. I tried to change it in the text box and use another class (.read-more) to see if I could get it to a different shade of gray. But, you guessed it, it didn’t work.

If life hands you lemons, you research until you find that you don’t need to turn it gray. After reading a few articles about web design, I discovered that it is a good idea to have your link stand out. And I did find this to be a problem when writing the text: I wanted to just say “Read more about my story” but it doesn’t stand out as a link unless you hover over it, so I changed it “Click here to find out more about my story.” So for now, the black/hover-purple text stays. Win-win! (Unless I want to change it to a color that isn’t gray/hover-gray or black/hover-purple. But this is a blog about learning to code, so there has to be room for improvement!)

Despite my rough start, I am coding again. Tags look familiar but I’m having to look up and remind myself about a lot of it, so practice is crucial to development. I guess coding can be like riding a bike—with clipless pedals! There will be slips and falls, but eventually, you will get it and then you can go fast!

2 Replies to “Creating a Website with Code: It’s Not like Riding a Bike!”

  1. I am interested in how your journey unfolds as my own journey from being a physician to a coder has been a happy one and continues to challenge me daily.

    I have a question regarding the use of two content management systems for a single site, especially when WordPress can manage multiple sites on a single installation, so what made you choose Drupal?

    Regarding manipulating existing styles, for example the hyperlinks on the sidebar, you can write custom CSS without altering existing CSS – Copy paste existing style if it makes things simpler, give it a new class name and use that class for the link. Personally, I have used this strategy of writing new CSS, which does not interfere with existing CSS for projects where there is already a lot of existing content and pages written by others, and I am brought in to develop new GUI. If existing styles and code are not very organized , I write my own styles usually naming all of them with a single prefix and hyphen. This allows me to do adjust the GUI however and override any and all existing styles without breaking previously written GUI by others. The reason for using a prefix is to tie it to a single cohesive style, that way if I need to develop another GUI that uses a different style, I can write it with a different prefix. This also allows me to switch styles easily. A lot my strategies in this regard was learnt by designing WordPress themes for work.

    You are no longer on the threshold of becoming a developer, you are already a developer… there is no end point to learning and by the time you learn something well it most likely is obsolete. The core concepts and logic remains similar, it is the syntax that changes as one jumps from language to language.

    1. DrDeveloper says: Reply

      Thanks for calling me an official developer! I have noticed that it requires nonstop learning, which is one of the reasons I love it! I chose Drupal and WordPress to expose me to more content management systems. I chose Drupal in particular based on a conversation I had with a developer. He mentioned that there are a lot of Drupal jobs in this area, and he doesn’t know enough developers experienced in Drupal to fill them, so I thought, why not?

      And thank you for the tip about copying and pasting the original CSS. That is a great idea!

Leave a Reply