The More You Code: Creating HTML and CSS Templates

The More You Know image with red X over the word know and code written above it

In graduate school, I always thought I needed to read more before tackling a project or paper. Just two more books and one more article and then I will be ready. My advisor often had to remind me to stop reading and start writing. Maybe it was my love of reading, but more likely, it was my love of procrastinating.

HTML Template

Creating my own website from scratch intimidates and excites me—much like my dissertation did. And I’m tackling it the same way. Just two more JavaScript tutorials. Just one more review of CSS. I’ve now had two people gently remind me that I need to start developing and create a website rather than just reading about it. So I listened and took a baby step today. I opened my text editor (I’m still playing around with Atom and Sublime to see which one I like best) and created a template for my website.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="website.css">
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>
</html>

It felt good to watch my text editor change color as I entered various tags and code. It wasn’t a blank, black screen. It had a template.

Embedded versus External Style Sheets

I decided to link to my CSS rather than having an embedded style sheet (i.e., adding CSS styles in the <head> section of the document within <style> tags) to make it easier down the road when I’m writing more complex code. I want to avoid the mess and make it easier to make universal changes later. You have to dress for the job you want, right? Well, I’m dressing for the complex website I’m imagining, so I created an external CSS style sheet template.

body {
background-color: gray;
}

h1 {
color: navy;
margin-left: 20px;
}

CSS Template

Before attempting to design my website, I wanted to remove the horrible empty Drupal installation screen.

Drupal 8 installation screen

So I decided to write some code to announce that my website is coming soon. As all good developers do, I searched and found some existing code that I can use and manipulate. Plus, having a shell helps take away that all-too-familiar blank screen. After years of writing, that blank screen can still terrify me. When I taught, I would tell students to start typing—it didn’t matter what—just to have something on the screen. You feel less alone that way.

W3Schools has some great CSS templates. I copied the Coming Soon template, and then, I modified it. I added some information about my website, and I changed the image. I also changed a heading level and animated my name and information along with the words Coming Soon so they all move from the top to the center of the page.

<!DOCTYPE html>
<html>
<title>Lindsey Phillips</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: url("compressed_laptop_book.jpg");
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">COMING SOON</h1>
<h2 class="w3-large w3-center w3-animate-top">Lindsey Phillips</h2>
<h2 class="w3-large w3-center w3-animate-top">Freelance Writer, Blogger, and Developer</h2>
<hr class="w3-border-grey" style="margin:auto;width:40%">
</div>
</div>
</body>
</html>

Then, I opened the file in the browser to test my code, and it worked!

Theming Drupal Ain’t Easy

Next came the tricky part: moving it from my local computer to the public domain. I was naively hoping that there would be a blank box in Drupal where I could insert my own HTML code. I looked, and I briefly learned about managing blocks and adding an article or basic page. In case you are curious, adding HTML code inside the create a basic page box results in a website with code for content. How meta!

Drupal 8 has been a frustrating ride so far. I was not able to easily install it and had to do it manually, which took two attempts and PHP update. (See my previous blog post.) Now that I’m finally ready to start working on it, there’s been an update (Drupal 8.2.7.), which requires removing and reinstalling it. (WordPress just notified me when it had automatically updated and required no further action on my part.) I went back to the familiar Drupal download site, and accidentally downloaded the tar.gz file. It worked but there was no CSS, so you can imagine how lovely it looked. So I deleted it once again and reinstalled it using the zip file, which worked. I (half) joked to Arturo that there would be another update before I could install it again. But now I can say that I’m officially an expert at manual Drupal 8 downloads and installations!

Fast forward several hours/years later and I realized that people were not kidding when they said Drupal has a steep learning curve, so I’m going to have to devote some time to learning Drupal 8 before I dive in. From the few videos I watched, it appears to be easy once you learn the nuances of this content management system. But for now, I want to focus on coding, so Drupal 8 is on the back burner.

Hacking My Way Out of a Problem

So now I’m back to my original problem: How do I simply use my own HTML without having to remove Drupal (because I can’t go through another installation)? Arturo saw an all-too-familiar look of frustration in my eyes, and he started searching with me for a solution. And we found one! First, I added my image and index.html files to the public_html folder in the cPanel. Then, I modified the following code in Drupal’s .htaccess file.

#Set the default handler.
DirectoryIndex index.php index.html index.htm

I commented out the second line (so I can easily undo my changes), and I added the following line, which simply switched index.php and index.html.

DirectoryIndex index.html index.php index.htm

Now, the website will look for an index.html file, which I added myself, and run it before running Drupal’s index.php file. Problem solved! It was a small change, but it allowed me to take control of my site and now it looks the way I want.

open laptop with open book inside with words Coming Soon, Lindsey Phillips, Freelance Writer, Blogger, and Developer

This process taught me that writing code (not just reading about it) is the more effective way to learn. I can take all the tutorials I want, but at the end of the day, writing my own code is how I will discover what I know well and what I need to brush up on. Concepts, such as arrays and objects, that I think I understand will become much clearer. I won’t have to stop and look up common tags; it will become second nature. I also realized that with programming and web development, I will NEVER stop learning. So at some point, I have to put down the coding book and pick up my metaphorical pen. In short, I learned that the more you code, the more you know!

3 Replies to “The More You Code: Creating HTML and CSS Templates”

  1. I agree with you about the best way to learn coding is most definitely through the process of writing the code. My approach to coding started out from a perspective of solving a math problem and or writing a treatment plan for a patient since my background was my love for math and years of training that lead me to be a physician.

    In order to practice, I wrote the exercises/problems myself and then figure out how to tackle them. Eventually this process translated to writing requirements or use cases based on what a client wanted, and it significantly helped in dealing with requirements that came from the business/marketing team and then I had figure out how to write the code that made those requirements possible, break them down to tasks, group the tasks into manageable chunks and then come up a time estimate (LOE) for each of the manageable chunks, which would then be tracked as the project progressed.

    An example based on what you have already done for your index.html
    Website exercise
    Marketing team might say:
    Create a site that has three lines of text in the middle of the page, first “Coming Soon”, second “”, third “”. The site will have an image that completely covers the screen and the image will change according to a user’s choice from a drop down that is at the top of the page in the middle. The total number of image choices would be five in number. The second line of text that has “” will be white in color when the page loads and change colors to red, blue, green, yellow or white in a random fashion when the user clicks it. Note: All code must be written in-house and should not use any outside javascript libraries or CSS styles.

    Rough task breakdown might be
    – write my own CSS into an external style sheet that is embeded into HTML page
    – background image style will be cover
    – it has three lines of text, the first is “Coming Soon”, second is “”, third line is “” and
    – the three lines should be horizontally and vertically center aligned
    – site has a dropdown menu at the top in the center
    – drop down menu has 5 items, each item is a name and it’s value is a different image
    – use javascript to switch background image to the value of the dropdown based on user choice
    – default choice for the menu is the first item
    – javascript should be an external .js file that is embedded into your HTML page
    – using javascript add a click event for the second line of text “”
    – the click event changes the color of the text to either red, blue, yellow, white randomly
    – to generate random action use math random in js
    – default color will be white
    – when user hover mouse of the name the mouse pointer should turn into a hand

    HAPPY CODING!

    1. Thanks for taking the time to show me what a client might request based on my index.html. Sometimes the process can seem abstract, so I appreciate having an example to help me visualize it.

  2. Note: Since the exercise per the marketing team did not specify all the details like how big the font should be or what the font should be. Usually when all details are not spec’ed out I either code them however I want initially and modify them after a feedback session from the client or ask followup questions to the requirements until all the details are teased out.

Leave a Reply