In a previous blog post, I explained how I set up a basic website to allow my students to see their grades. The website worked well, but it left much to be desired visually. So I decided to create something more visually appealing.
I’ve recently been researching personal branching, and have used online tools to create a logo and a color palette to use for my personal brand. For the curious, I used designs.ai to create the initial idea, and then refined it in Canva.
Why do I mention this in this blog post? I do so because I decided to take the opportunity of creating this website to showcase my personal brand — the more places it’s visible, the better, right?
In addition to taking the opportunity for showcasing my personal brand, the visual elements it incorporates would make the site look more appealing — which was the aim of this exercise in the first place.
Deciding on the visual scheme
Having decided on a color scheme to match the color palette of my brand, as well as the logo and the fonts to use, what I needed was a way to style my html.
If you have been reading up on web development, you probably already know that the best way to style html is using CSS. Therefore, the first step I needed to do was to create a style.css file that contained all the styling for my website.
This styling would include color schemes, as well as specifying fonts for specific parts of the website. Based on my branding efforts, I had settled on Kiwi Maru as the font for my name, and Ribeye Marrow as the font for my tagline.
I had also settled on serval shades of brown and beige, as well as a dark rich green for my color palette. I needed to create a CSS style file that applied these visual elements to all pages in my website. Here is the file that I wrote to do this.
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Ribeye+Marrow&display=swap');
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: beige;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 20px;
background-color: beige;
}
header {
text-align: center;
margin-bottom: 20px;
}
header img {
max-width: 100%;
height: auto;
}
.company-name {
font-family: 'Kiwi Maru', serif;
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #4a2e15;
}
.tagline {
font-family: 'Ribeye Marrow', serif;
font-size: 16px;
color: #4a2e15;
}
nav {
text-align: center;
margin-bottom: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
font-weight: bold;
}
.owner-section {
margin-top: 40px;
}
.owner-section h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.owner-section p {
font-size: 16px;
line-height: 1.5;
}
footer {
text-align: center;
margin-top: 40px;
padding: 10px;
background-color: #333;
color: white;
font-size: 14px;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.company-name {
font-size: 20px;
}
.tagline {
font-size: 14px;
}
.owner-section h2 {
font-size: 18px;
}
.owner-section p {
font-size: 14px;
}
}As you can see, I have a class for “company-name” and a class for “tagline”. In these classes I specify the fonts to be used. I use “font-chaining”, if I may coin a term, by first specifying the font I want and defaulting to serif if the desired font is not available. Here is an example
font-family: 'Kiwi Maru', serif;I also use media queries to make the site responsive. This can be seen in the last section of the CSS as shown below.
@media (max-width: 768px) {
.container {
padding: 10px;
}
.company-name {
font-size: 20px;
}
.tagline {
font-size: 14px;
}
.owner-section h2 {
font-size: 18px;
}
.owner-section p {
font-size: 14px;
}
}Using this media query, I try to target different styles for mobile users. The rest of the CSS is self-explanatory, I hope. If you need me to explain it more, please let me know in the comments and I will do so.
Using the visual scheme in static html
Now that I have setup the visual scheme in my CSS file, it is time to begin using it. I use it in two places, in static html files, and from within my cgi-bin script. This section shows an example of its use in my statics html files.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is the homepage of my site. It describes who I am.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sherif Fadel Fahmy</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<header>
<img src="logo.png" alt="Logo">
<h1 class="company-name">Sherif Fadel Fahmy</h1>
<p class="tagline">Innovate. Engineer. Educate.</p>
</header>
<nav>
<ul>
<li><a href="index.html">About</a></li>
<li><a href="books.html">Books</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="mygrades.html">Get My Grades</a></li>
</ul>
</nav>
<section class="owner-section">
<h2>About Me</h2>
<p>I am Sherif Fadel Fahmy, an associate professor in the Computer Engineer Department of the AASTMT, Sheraton Cairo Branch. I have been the department chair of this department since 2016. My research interests are mainly in distributed systems, real-time systems and operating systems. I have also recently forged into the area of machine learning, I try to apply it to my main research interests. My main website is at <a href="https://sheriffadelfahmy.org">Sherif Fadel Fahmy</a>, this is a faster and leaner website containing just my basic information. </p>
</section>
</div>
<footer>
© Sherif Fadel Fahmy 2023. All rights reserved.
</footer>
</body>
</html>As you can see, I use the classes defined in the CSS file to style my content. For example,
<h1 class="company-name">Sherif Fadel Fahmy</h1>would apply the font and general styling defined in the “company-name” class in my style.css file to my name. You will see similar class specifications for my tagline and the main text in the page.
One other point that can help readability, and thus SEO, on mobile devices is the viewport meta tag. Here is the value of this tag in my html file,
<meta name="viewport" content="width=device-width, initial-scale=1">This makes the content scale with the device width. When you make your content scale with the device width, it adapts to whatever device you’re viewing it on. This is important because otherwise, browsers tend to show the page as if it’s on a desktop and then shrink it down to fit the device screen. This can make the text look super tiny and weird on mobile devices. But if you tell the browser to show the page at the device’s width, the text becomes way easier to read on mobile devices.
Using the visual scheme in the cgi-bin script
The final part of this post is how I use the scheme from within my cgi-bin script. Here is the python code that I use for this.
#!/usr/bin/env python
import cgi
import openpyxl
# Assuming the Excel file is named "grades.xlsx"
excel_file = '/var/data/grades.xlsx'
# Read the student ID from the form data
form = cgi.FieldStorage()
student_id = form.getvalue('studentId')
student_id=int(student_id)
# Load the Excel file and retrieve the grades for the student ID
workbook = openpyxl.load_workbook(excel_file)
worksheet = workbook.active
grades_row = None
for row in worksheet.iter_rows(values_only=True):
if row[0] == student_id:
grades_row = row
break
print("Content-Type: text/html") # Required CGI header
print() # Blank line indicating the end of the header
print('''
<html lang="en">
<head>
<meta name="description" content="Here are your grades, best of luck!!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Grades Are</title>
<link rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
<div class="container">
<header>
<img src="../logo.png" alt="Logo">
<h1 class="company-name">Sherif Fadel Fahmy</h1>
<p class="tagline">Innovate. Engineer. Educate.</p>
</header>
<nav>
<ul>
<li><a href="../index.html">About</a></li>
<li><a href="../books.html">Books</a></li>
<li><a href="../publications.html">Publications</a></li>
<li><a href="../links.html">Links</a></li>
<li><a href="../mygrades.html">Get My Grades</a></li>
</ul>
</nav>
<section class="owner-section">
<h2>Student Grades</h2>
''')
if grades_row is None:
print("<p>No grades found for the provided student ID.</p>")
else:
print("<p>Grades for student ID:", student_id, "</p>")
print("<ul>")
for grade in grades_row[1:]:
print("<li>", grade, "</li>")
print("</ul>")
print('''
</section>
</div>
<footer>
© Sherif Fadel Fahmy 2023. All rights reserved.
</footer>
</body>
</htm
''')Essentially, I have two large print statements that produce the bulk of the code. Between these two print statements, is an if statement that either prints the grades of the student or informs the student that his/her grade is not found.
Conclusion
That’s it ladies and gents. This is how I made the grades website more visually appealing — and took the opportunity to showcase my personal brand as well. You can checkout the final result here. Please let me know if you have any comments or questions in the comments section.
