I build responsive websites using HTML, CSS and Bootstrap.
I have a background of fourteen years in IT Support, and I use these skills as part of problem-solving within Web Development.
Image courtesy of Am I Responsive
The British Institute of Hypnotherapy is a registering body for hypnotherapists, and its website is an information site for practitioners as well as the general public.
Its aim is to provide information on the purpose of BIH, what practising hypnotherapists can expect as members, and what the public can expect in terms of receiving services from those members.
The website also contains a searchable database which enables people to search for a practitioner in their area. There's also a contact form, a login area for members, and a page dedicated to showcasing different members of the BIH each month, highlighting their areas of expertise.
It may seem like a random website to choose as a side project, but I actually work alongside the Executive Director, providing freelance Administrative services, and she gave her blessing for me to use the BIH website as a side project for my portfolio. As a side note, the website itself was built using Wordpress - an area in which I have no development experience.
However, the initial challenge I had set myself was to see if I could re-create the main website using HTML & CSS so that outwardly the appearance was exactly the same as the Wordpress build. Then further down the line, the login area, contact form, and member's database provide additional learning curves.
Since I was already familiar with the website and its purpose, I didn't need to spend any time researching the background of BIH or its intended purpose as a website, as its presence was already visible. My aim, was to take the website as a whole and hand code it using HTML and CSS, and wrap it in the bootstrap framework. I love the simplicity of bootstrap, and the ease it provides in coding responsive websites.
The prep work I did beforehand, was to take note of all the pages that formed the website, and notice the layout, typography and colours.
I also looked at the structure of the navigation bar, and wondered if I could simplify it by separating Practitioner content from Public content using drop-down boxes. It wasn't a necessary change to the website, but it was a challenge, and that’s what made it viable.
Once I'd finished making notes, I then moved forward with the task of setting up my workspace and started coding.
A website that's hand-coded, and responds to any screen-size (after being tested per 100px from 300 right through to 1200!), and which has also been validated through the W3C.
A Skillcrush Lesson Project
Image courtesy of Am I Responsive
If you've never heard of the Holstee Manifesto, then type it into Google, select images and the original poster design will be displayed there many times over, including several with the odd style tweak here and there. It was this poster that became the first classroom project I created through Skillcrush.
The HTML & CSS lesson covered areas such as div's, floats, font-sizing, font-family, line-height, margins and padding, to name a few, and I used all of them extensively. To imagine how it needs to work, consider the layout of the poster: there are chunks of phrases separated into their own areas, and while all of them have the same font-family, each segment features different font sizes and line-heights. Some sections are grouped together, and some occupy their own line and fill the width of the poster. These were the considerations I had to take into account when planning the layout of the HTML version.
To begin with, I created a simple (not-to-scale) wireframe in Keynote. This was mostly just to get a feel of the layout in my head. I used the bootstrap grid as a guide, and once I was reasonably satisfied where everything would be positioned on the page, I then used a barebones bootstrap template to form the basis of my responsive html poster.
Before adding any content to the web page, I set-up all the rows and columns first, and then commented each section so that I knew which part of the poster it was referring to. Then I moved on to creating the div sections within each column, and in keeping with CSS best practices, I made sure I used div id's, and also kept the name meaningful, which in this case meant reflecting the first two-to-three words of the segment to which it related (see the code snippets). At this point, I also created the stylesheet that linked to the html file, and added in the div sections as I was creating them in the html document. This ensured nothing was missed out.
Once all of the rows, columns and div sections were set-up, and a stylesheet with each section referenced within was created, it was time to move on to adding the actual content. This concluded the framework of the poster, before moving onto the styling of the content.
Below: The HTML & CSS code used to re-create the Holstee Manifesto, followed by the final product.
The Holstee Manifesto was different to some of the other web projects I've worked on, because literally every line of text in the poster requires its own div tag in order for it to be styled properly. It was also quite a challenge ensuring the whole poster was responsive, and would sit as neatly as possible on the page, regardless of the screen-sized used. This was achieved using breakpoints, but there are still aspects of tweaking that need to be made.
The finished product is a brightly-coloured, cheerful responsive html poster, and if you click anywhere on the poster below, it will open into a separate tab that shows the poster in its own web page:
A Skillcrush Classroom Project
Image courtesy of Am I Responsive
Rogue Pickings was a small project from the Skillcrush course in which I had to create a one-page website with the focus on mobile-friendly modules and em's for all of its text sizes.
Skillcrush provided the design comp in a desktop layout (see below), and then I had to re-think the layout from a mobile perspective, and assign responsive typography in accordance with different media queries.
This was a project where responsive web design was truly described in detail by Skillcrush at each stage of the design itself. They also peppered the project overview with lots of questions to get me thinking about the orientation of various different devices, which then linked to the layout of the web page, and as such the reason for using em's instead of pixels, along with base font-size and line-height.
Since completing this project, I've wrapped the website in the bootstrap framework in order to improve its responsiveness.
If you click on the image below, it will take you to a separate tab to display the Rogue Pickings web page.
A Skillcrush Lesson Project
Unplugged was a lesson project from the Responsive Web Development module of the Skillcrush course. It was made to appear as if a fictional client had requested a three-page website to be developed with the the theme of "Premier Indie Rock Music News". In addition to the home/news page, the "client" also required 'About' and 'FAQ' pages. They had already enlisted the help of a Web Designer to create the design comps for the pages, and the home/news page was provided in three different versions - mobile, tablet and desktop. A copy of the files was provided via a download link, and as the Web Developer, it was then my turn to translate those Photoshop mock-ups into code.
For this project, I used an HTML5 boilerplate (as recommended by Skillcrush), to speed-up the setting-up of the pages, and after coding the barebones of the homepage (e.g. navigation, header, main content, footer), I copied this code across to the other two pages, before adding the different div sections for each page.
Once all three pages had been coded, I then moved to the CSS file to start working on the website styling. Initially this work just involved adding the layout styles, as per the styling required for each device type. It was also an opportunity to add in some comments to both the HTML and CSS files to make everything easier to reference later on. It also meant I could check my code for consistency and make any amendments if necessary.
I should add at this point that a component of CSS files that I hadn't previously worked with - media queries and breakpoints - was introduced to me during this project, and it was this lesson that helped me understand their purpose (now I can't imagine coding a website without them).
When I was happy that the layout looked good across all devices sizes, this was the point at which I then added in the remaining CSS styles - referring back to the .psd file for guidance. Once the styles had been added in, it was back to cross-device compatibility to make sure the website displayed properly, and didn't have an obscure image or misaligned header here and there. The result was a website that behaved responsively across each device size, as expected.
A Skillcrush Lesson Project
This project takes its name from the font that was used in the styling of the poster - Abril Fatface is a web font hosted at the Google Fonts site, but for the purpose of the lesson objective, I had to download the font and host it locally, then reference its location in my CSS file in order to demonstrate my knowledge of hosting local fonts.
So that was the first part of the project, the second part was making the ampersand two-tone. You will notice that the whole poster is two-tone, and naturally the text contrasts against the background with the opposite colour applied. This in itself is easy to achieve, however the ampersand was a different beast, and it took me many hours of trying and failing alongside painstaking research before I finally achieved the desired two-tone effect, and the result is displayed below. Possibly not quite as pretty as the one created by Skillcrush, but I was happy with my efforts following the hours consumed.
Refreshing and updating an existing website
The Ginetta G33 website belongs to my former Desktop Support colleague, Mark Thompson, who is a true devotee of the Ginetta G33 sports car, and as such created a hobbyist website dedicated to the cause. He coded the original website in 2004 using Microsoft Frontpage, and by 2016 it was somewhat in some need of modernising.
The website itself is an entirely information-based site, with a few images, tables, PDF documents and external links to other similar websites, but mostly text. It was also approximately 40 pages in size, and at least 36 of those pages were packed with information. Mark didn't really have any pre-requisites for how it should look, he was happy for me to keep the original framework intact as much as possible, and simply modernise it to enable it to display properly on as many screen sizes as possible.
Before I even attempted to start planning how to bring this website up-to-date, I looked at each individual page and noted the following things:
Below is an image of the original G33 home page. Clicking on the image will take you to the old website.
With the above points in mind, I decided to use bootstrap as the basis for updating the website, since it's a responsive framework, and makes planning the layout of the website straightforward. I also implemented a navigation bar and footer throughout the site, and in doing so eliminated two pages from the overall total.
I removed the tiled G33 background because keeping it would have made text difficult to read and photos difficult to view. Instead the home page was given a splash of yellow colour which was a subtle nod to Mark's own Ginetta. I also kept splashes of yellow colour in the navbar and footer throughout the site against a largely black hue, to avoid colour overload.
Overall the website update wasn't too difficult to accomplish. The structure, information and images were already in place, it was really a case of setting up a logical file structure and wrapping the whole website in a responsive framework. The original structure of the website remains the same, and only the home page has really changed, but the biggest leap forward has been in making the whole site responsive.
Below is the Home page image of the updated G33 website. Clicking on this will open the live website in a new tab.