Check out the site at: WebExperts

I just built this custom WordPress site from scratch for Web Experts. Check it out!  I started with the barebones underscores framework. I don’t find it difficult to build sites from scratch, however it is much more time consuming than starting with a cool theme to begin with.

All the images on the top section of the home page have a very cool mouse-over effect. Using jQuery,  I added a class to the anchor element on mouseover,  which triggers the images to zoom in using CSS transform: scale, and a transparent background color overlay on the caption element uses a change in opacities to show and hide some interesting text message overlays.  Very nice effect!  Let me know if you like it.

With the help of media queries, the images are sized and grouped precisely, to allow for smooth transitions between screen display sizes from large desktop down to mobile phone.  I designed the colors of the images to go well together, and also have enough contrast in value and hue to attract the eye. I also used a fair amount of Web Experts  branding and imagery in these images. I am emphasizing the responsive and mobile screen capability.

Creating interesting websites that display well on all the various screen sizes and browsers is a true art and has certainly made web development much more complex in the last few years.

In the header, to add interest, I used fixed: position, added a bit of transparency, and wrote some jQuery to slightly expand and contract the header on scroll. I opted for no drop down menus at all, and instead,  the pages scroll down with plenty of interesting content.

Some of the other highlights include some moving graphics about 3/4 down on the home page. I liked it so much that I included it in the footer. I created several different size computer screens images from mobile to desktop, and inserted screenshots from the lovettwebdesign.com site that I built. I added a cool full width color background with texture and wrote some jQuery that slides the image over the background on mouseover. Sweet!

It’s important to be tasteful with these effects to add interest, and be careful not to over do them.

A few other bits of work include customization of the standard comment form and writing a custom query on the homepage.

I wrote a filter function using PHP and added it to the functions.php file to filter the WordPress default comment form to improve the look and feel of the form.  I used the filter function to insert placeholder text in the form fields and did some nice CSS styling for the icing on the cake.  Be sure and check out my new comment form at the end of a post on webexperts.us.

in addition, using PHP and WP_Query,  I wrote a custom query in the site  front-page to call posts from only one specific category.

This is the mobile top view on an iPhone:

Below is the bottom mobile view on an iPhone: