Building a Website from HTML and CSS: Version 1.0
Version 1.0 of any system is just a start
And my version 1.0 is no different.
A few days ago, I launched alexashtondesigns.com. It will become my portfolio site, but I decided to do things a little different. Instead of diving in with a Wordpress theme that someone else developed, I wanted to learn all of those fundamentals myself. So, I coded a website out of raw HTML and CSS while going through W3 Schools tutorials.
The process of building my HTML and CSS website
I started with the very basics. During Thanksgiving week, my ASU course Principals of Web Authoring (TWC 421) assigned the class to complete an HTML and CSS tutorial on learning website Alison. The basic layout of my 1.0 website with sections, articles and a basic header and footer comes from this course. The course has you build an index.html file and an associated styles.css file.
As an aside, while the course was overall a solid introduction to HTML and CSS, the Alison website is not the best user experience, and only works in FireFox. Code Academy, W3 Schools and Free Code Camp also have some excellent introductory tutorials as well.
I added some more elements outside the tutorial:
- Bought the domain on Bluehost.
- Header logo designed using Adobe Illustrator.
- Set up a responsive grid on my portfolio page using Bootstrap.
- Added some fun icons to the portfolio page from The Noun Project (I have a subscription).
- Added various pieces of my portfolio.
- Set up a shared hosting plan on Bluehost and uploaded everything using the cPanel.
We got ourselves a website!
The next step after uploading to the web is live testing.
I tested using Chrome and Firefox, and then Chrome on my Android mobile device. I found problems! Some examples:
Problem: I tried adding a couple photos to the resume page. They were not responsive to mobile view, and caused the text in their respective sections to bleed out of the sections.
Fix: I removed one of the completely; the other (volunteer experience) I set to responsive in the HTML and removed Bootstrap from that page, since it was causing issues. I’ll get back to Bootstrapping the site later.
Problem: header logo not responsive to mobile view.
Fix: added CSS to make it responsive.
I have the header logo its own CSS called img.header-icon. It looks like this:
Then set the logo as follows in the HTML:
<a href=”index.html”><img src=”images/aa-logo.png” class=”header-icon”></a>
From here, I figured, why not start logging these problems and doing a sprint? Obviously, I don’t have a personal license for Jira, so I did it the old fashioned way: Microsoft Excel.
As you see, I have some upcoming “tickets” in the backlog to work on over the next few days. But overall, I have a fully functional portfolio site, built without the assistance of Wordpress or any other theme, template or other drop-and-drag system. Pure and raw HTML and CSS.
Next up? Most likely modernizing the navigation menus and implementing a consistent header and a footer via PHP.
Note: this site contains an affiliate link for Bluehost.