Custom WordPress Theme

Our final assignment in the WDDM Program at Humber College was a choice between several different assignments that each involved a culmination of the skills we learned in the program.

One of the choices available was to create a Custom WordPress Theme. As such I had decided to build one based on the default Twenty Seventeen Theme.

I’ve had experience in the past creating websites built with WordPress and I’ve worked with child themes before but I thought I’d take a step further with this CMS. With some of the lessons we had in this program on WordPress I definitely wanted to do this particular challenge.

For this, I decided to do a WordPress Website for a club downtown that could be used by the staff to easily and constantly update the website with new event listings and for visitors/patrons to view the listings of the club and have different methods of contact for various purposes (booking events, general questions, etc).

After installing WordPress and connecting to the database manually on a subdomain through my hosting, I created a new folder on my Desktop and added the first default files for my Custom Theme. These included the main Stylesheet, Index.php file, the Functions.php file (not imperative, but just in case!) and for good measure a screenshot.png image to recognize it better in the Themes page on the back-end. After making the necessary adjustments in the comments I uploaded the theme into the themes folder.

I activated the Theme thereafter and began to make the first changes which was to remove some of the default features and styles to almost start from scratch.

I had already known what look I was going for with the website so I applied the styling and fonts and edited the layout of the website. This involved me editing other files which included but was not limited to the Header.php and Footer.php files which I had to upload to the Custom Theme folder.

To add more features to the website I installed plugins such as a Masonry Plugin as well as a Contact Form plugin. In a more traditional sense, I would have created these features from scratch but seeing as this is WordPress, I thought why make it more complicated than it has to be?

The Event Listings page is the actual Posts page, which I initially had another plugin installed for that but after receiving some advice I removed the plugin and set that particular page as the listings page which can be updated by adding and removing posts as you would normally do on WordPress. Additionally, the website is Responsive as well.

There are some other features I do want to add to this particular theme, one major one would be to include a separate ticket link for events where visitors can go and buy tickets directly from the venue through the website – we’ll see how that goes but stay tuned for updates!

You can see my current version here:

Click Here!

Thanks for stopping by!

– Mike

Advertisements

Composite 2 Complete! For now….

Again, it’s been a while since I posted anything new, yeah, sorry about that again!

Reason is, I’ve been pretty busy with our Composite 2 assignment as we had to create an application built on PHP, MySQL, AJAX, jQuery and CSS.

With 2 other group members we managed to create a World Traveling Application that allows users to sign up and submit reviews for cities that they have been to around the world.

You can see it here, hosted on one of my group members’ hosting:

http://vacationcatalog.williamdev.co/

Feel free to sign up yourself and try out the functionality!

We managed to complete this within a 2 week span which included conceptualization, building out the layout and adding functionality as well as testing.

Of course, there’s much more that we’d to put in the future but we managed to add in Login/Logout functionality, uploading Avatars and adding Reviews and Comments.

For more information, please read the documentation below:

Click Here!

Thanks for stopping by!

– Mike

Google Ads Assignment

We had a lesson this week in our Design Class re-creating a web ad you would normally see when visiting a website. Basically, one of those ‘Cookie’ ads you see when visiting websites like Amazon, Ebay or any type of forum online.

Using the program Adobe Animate (a.k.a Flash 2.0 😛 ), we re-created the following:

https://goo.gl/zGeupu

With a combination of Animations in Adobe Animate including Slide and Fade-In with Keyframes, we built a basic Google Ad that any business can use.

Additionally, we had also created a clickable call-to-action button that will direct you to the advertiser’s website which was made by creating the button graphic in Illustrator and then importing it into Adobe Animate, adding the Fade-In animation, converting it into a symbol followed by a button, and then adding an ActionScript Event Handler that allows the user to click and be directed to a pre-defined website.

Once this was completed we were given a task to create our own versions of this type of ad.

I decided to do 2 ads for the Toronto Zoo that would prompt users to visit their website during a promotional run. I built them in 2 dimensions:

300 x 250 px
728 x 90 px

We were taught the various standard layouts of web ads (which are ones you actually have to follow if you are creating them) and these two dimensions I felt were the most popular given from what I usually see online when surfing the internet.

You can view my final works here:

728 x 90 Ad
https://goo.gl/OlQr5W

300 x 250 Ad
https://goo.gl/D1IJom

Thanks for stopping by!

– Mike

Typography Layout

In our Design class we had an in-class assignment to create a page layout using our knowledge of typography.

For this, we were required to include various elements and tags in HTML and style them appropriately with CSS and make it responsive for a topic of our choice.

I decided to base my assignment on the band Fugazi. Taking my information from Wikipedia, I went ahead and stylized my page with various H1, H2, P, Table, Blockquote, Definition List tags to put this altogether along with various CSS attributes such as Em font sizes, line-height, word-spacing and much more.

After that we were to take our knowledge of Typography and apply it to make Serif and Serifs typefaces with imported Fonts from Google that contrast each other perfectly to make it look professional with a sleek design.

Pretty simple assignment, but good practice in design and responsiveness. This makes for more efficient Website Design in the end.

Click Here!

Thanks for stopping by!

– Mike

Composite 1 Assignment – Barber Shop

Early last week, we were given an assignment to complete a 5 page mock website that comprised of all the skills and lessons we have learned up to this point in our program.

Primarily we would need to use HTML, CSS and our knowledge with Photoshop and Illustrator to plan and build a website for a topic of our choice. I decided to go with a more practical route of re-designing an existing website of a small business in town. At first I debated either to do a Tattoo Shop or a Barber Shop but in the end I finally decided to go with a Barber Shop in which the original one is as follows:

https://goo.gl/j3L700

Seeing as this website had not been updated in quite some time, I decided to re-design and develop a new one for this assignment. Mind you, the original owners of this website and business are unaware that I had recreated their website, hence my inclusion of the copyright information at the bottom of the footer.

Before we even began to write any code, a major aspect was to create a Wireframe and Mockup which would be used as a guide line when actually coding the website.

As such I had create both in Illustrator using Photoshop to optimize the images for Web. You can see my work below.

Framework

Mock Up

Besides the images on the Chair page, I had gathered all the other images from a royalty free website for hi-res stock photos called Unsplash.

Once I completed this and had it approved, I was ready to make this website a reality.

Beginning with our standard HTML Skeleton and CSS page reset, I set out to create the general layout of the pages which you had seen in the mock examples above. Once this was complete, I decided that since all the pages have the same Header and Footer layout, I would convert them into PHP files, thus allowing me to make adjustments to the Header and Footer more efficiently through one PHP page as opposed to adjusting it on each page as HTML files.

Now that I had the basic layout of the website in grasp, I would need to create each individual content of the page. To make some of the content more exciting I decided to add in a jQuery Slider on the landing page that would fade in 3 images every 2 seconds which I learned through a lesson that I had read online. That being said I also included a jQuery plugin for the image gallery in the Footer which would allow you to browse through past cuts that the barbers would have made if this website was made for real. Most of the pages had a pretty standard layout however I did include a Google Maps locator on the Book an Appointment page as well as creating a Appointment Form in case people would like to book an Appointment in advance online with them. Creating a form was a vital component for this assignment and this was a perfect scenario to create one.

With everything now in place, I still had to make this website responsive for different sizes and layouts.

While it was not necessarily a difficult task, I was by far the most time-consuming. Even with a basic layout like this, there was much to consider and I spent a considerable amount of time debugging and making sure each page fit appropriately on every screen width from over 2500px to as small as 320px. Alas, I did decide to include one more jQuery plugin for this, which of course was for the Navigation bar. After much testing and consideration, I decided that once the width was lower than 942px, I would have the Nav Li’s be put into a Hamburger Menu which you can click to show the links to each page.

All in all, this was a very practical website that I learned much about with. Using a combined knowledge of HTML, CSS (Responsive Web Design), Javascript, jQuery (Plug-ins), PHP, Adobe Illustrator and Photoshop this is what I was able to accomplish in the week timeframe that we were given to complete this Project.

You can see the live version here:

https://goo.gl/CDafja

Thanks for reading! 🙂

– Mike

HTML/CSS/JQUERY Calendar Assignment

For our first major assignment in the Web Design, Development and Maintenance program, my class and I were to create a calendar using our knowledge of HTML5 and CSS3 accordingly.

We were to create a calendar that was supposed to feature all of the days of a chosen month. In addition, we were required to put up notices when you would choose a certain day of the month if it was a holiday. Other points included the choice of colour and theme as well as properly labelled syntax and markup which made the code easy to read and identify.

As opposed to just creating a basic, mundane looking calendar I decided that I’d like to go with creating something similar to a menu screen from a game I have played in the past known as Dead Space .

The following image below is what I used as a point of reference.

dead-spaceconcept

From then on, I was set on re-creating something similar to this menu.

Little did I know, how much work I had just put on myself to complete this task…..

First thing’s first I created my folder along with the proper files that I’d be editing in order to have this project come to fruition – this would include an HTML5 file, a CSS3 file and a Javascript file. The project outline did not say anything about including Javascript in the assignment whatsoever but I decided that I’d like to go the extra mile and re-create all the months in 2017 instead of just one month. In order to do so, I would need to use some basic jQuery which I was familiar with to an extent. I’ll get into that part later on.

Anyhow, starting with the basic tags I created the Header, Main, Nav, Section and Footer tags all associated with HTML5 , and of course the classic Div tags.

You can of course see for yourself how I built this project in the source code with the link at the bottom of this article but in a nutshell I had the months included in an H1 tag nested in a Div tag nested in the Header which then was followed by my Main tag.

The Main tag is where the bulk of my work began.

First off, I included a Nav tag that included the months of the year in a sidebar to the left with the Months header inside an H2 tag. Initially I had planned to include this in an Aside tag but if I was going to put all my months in a list, I’d just go with a standard Nav tag with an Unordered List tag that listed every month.

Next up was the most tedious part of the project.

Creating a Div within a Div within a Div, (are you still with me?.. :P) I included the days of the week under an H3 tag to easily identify them in the CSS3 when editing them. After that I had included 7 rows of Nav tags, all representing a day of the week within a column in a Li tag nested inside a Ul tag.

After that, I had created the right side section in a Section tag with the header Notes under an H2 tag followed by another Div featuring my Copyright Information. Following this of course was the Footer tag that included a Section tag with 3 Div tags inside, one for the top, middle and bottom of the footer. The middle Div is where I planned to have my notices for the Holidays pop-up when you would hover over certain days in each month.

In the end, I had my Markup complete and it would end up looking something similar to this:

stage1

Not exactly the most interesting looking calendar yet but I at least had the skeleton of the document complete and would move on to the CSS3 in order to do some basic styling and get all the sections where I wanted to be on my second step.

Mind you I did not include the Eric Meyer CSS Reset in this picture for clarity.

By properly labelling my Divs, Sections, Navs and all other tags either as Classes or ID’s I worked on the widths, heights, margins, paddings, font sizes and backgrounds in order to make it visibly be laid out clearly.

After much tweaking, I had finally come to get my calendar to look like the following:

stage2

Obviously it was still not complete, but I was getting there. Now that I had my HTML5 and the bulk of my CSS3 complete, I was ready to begin adding the graphics. This part was an interesting approach as I had decided to use a combination of Vector graphics, Raster graphics and CSS3 styling to come to the final look that I had wanted.

I traced out the graphics in Adobe Illustrator which in itself looked decent. Following that I used Adobe Photoshop to add some texture with an image of a steel surface that was placed on top with a clipping mask and then using either a Pin Light or Overlay blend mode on top to create a more rugged look to my graphics, to properly convey the look and mood that I was going for.

I did this for every background image until I had them all complete and imported them into my images folder. After that I had added them as background images in CSS3 to whichever class or ID that it corresponded to. Unfortunately at first I did not realize how the graphics would play into the the final look of the calendar so I had had to do some re-adjusting with margins, padding and widths in order for them to fit appropriately without breaking the entire layout that I just spent quite some time adjusting.

Using CSS3, I added some minor adjustments to my images such as the background glow for the left and right sidebars, the headers as well as some border colouring and opacity to avoid the backgrounds get cut off so obviously and suddenly, leaving a more smooth looking border around some sections.

Initially, I had planned to write my Header and Li tags using a custom font in photoshop and then uploading the background to where it was needed but I found the text was too pixelated to read in the browser so I choose to redo the graphics with no text and write the Headers and list items in my HTML5 document instead (in the Photoshop image below, you’ll see that I wrote ‘March 2017’ in Photoshop but in the final cut it’s actually written in HTML5).

Here’s a couple screenshots of my work in Adobe Illustrator and Photoshop:

graphic-work1

graphic-work2

Phewwwww! *takes deep breathe*

Once that was complete, I had finally managed to have the final look of my calendar complete.

In essence this was what was needed for my assignment, but I had decided to go with completing the rest of the months. With that, as mentioned before, I had decided to go with jQuery to make this work. Essentially I would build the other 11 months of the year in HTML5 and apply all the same CSS3 Classes and IDs for styling and the Graphic work. That was the easy part.

The hard (or at least harder) part was including the jQuery to make my Hover functions work properly when selecting each month. Once I had linked externally with jQuery and embedded my .js file I began the document. Starting off, I decided upon load that January would naturally be the first to show so I had all my months and Headers IDs hidden besides January’s with the .show and .hide function. Once that was completed I had created a separate function for each month in the left sidebar so when you select a particular month, it’s respective Header and Month would fade in and any active month/header would disappear using the fadeIn and .hide functions.

Since I had started with March 2017, the month that I began this project, one of the requirements was to include a notice of every holiday in that particular month – in this case St. Patricks Day. If you go to that month and hover over March 17, you will see that in the middle div of the footer tag it displays a notice that it is St. Patrick’s Day. I managed to do this in jQuery with the .click, .appendTo and fadeToggle functions.

Once this was complete, I again did some minor tweaking to make things work and some re-adjustments I had noticed upon further review. You can see a sample of my changes through my Bitbucket account when I uploaded them through the Terminal Command :

bitbucket

With that being said, I had now gone beyond the basic requirements of what was required for this project. I had planned to add a Responsive Layout for smaller screens but due to time constraints I was unable to fully get my calendar responsive on all screens. Currently this calendar is optimized only for the widescreen format. In the near future, I will definitely have that completed as soon as my time frees up from other projects that we are going to begin within the next few days. 🙂

 

calendar-final

Click here to view the live Calendar

Thanks for stopping by!

– Mike

HTML Table Assignment

Earlier in March, we had an assignment to re-create a famous painting by an artist using HTML and CSS code – more notably with a table tag (yes, I know that they’re not used that often anymore, maybe more in back end, but that’s for another discussion).

The painting is done by a Dutch artist by the name Piet Mondrian in 1921 and is known as ‘Composition with Large Blue Plane, Red, Black, Yellow, and Gray’.

Here’s a quick image of what I created, strictly using HTML and CSS, and photoshop for the texture on the picture itself.

html-table

You can view my source code in my Github profile here:

https://goo.gl/JuWFhB

Thanks for stopping by!

– Mike