It is becoming more and more popular to now have a sticky header and nav on your website. But what are these sticky elements? WEll let me explain in real easy terms. Sticky elements simply mean they stick to the screen, for example a sticky header and sticky nav will most of the time stick to the top of your window as you scroll down the page. Of course it does not have to be limitied to the top of your screen it can be on the sides or anywhere you need but “sticky” means exactly that they stick there. Continue reading
Owl Carousel Zoom Image Function
Draw using pure CSS and HTML
A fun tutorial this time round! I am going to teach you how to draw Pokemon characters with CSS and HTML. We will draw a Pokeball, Charmander, Bulbasuar and Squirtle using pure CSS and HTML. So this is going to be a fairly long but I think very rewarding tutorial (how could it not be when you end up with Pokemon characters!) We may even chuck in a little animation at the end just to make it even more fun you can see what we end up with here. So let’s not blather on any longer and get stuck in. Continue reading
Fixing Picturefill Firefox Bug
Firstly if you do not know what picturefill is I highly recommend checking it out here. I use picturefill a lot as I think it is fantastic and works generally really well. However recently when testing my site I was using firefox 38 and noticed that the slider I was using picturefill on was not responding correctly, if I shrunk in the screen it was not swapping out the image to a smaller version.
Coding Your Own Responsive Grid
So we all know the free responsive frameworks you can get out there and they are great! But they can be full of lots of code you will never use, so why not code your own basic responsive grid? It is easy and I will show you how.
Even if it is just to get a better understanding of how the frameworks work and for a better understanding of responsive web design this is a great exercise. Continue reading
Flexslider With Zoom Image Function
“Flexslider zoom” has become the most googled term for people reaching my site and going to my blog post Implementing, Styling and Extending Flexslider this probably wasn’t what you lovely people were looking for (however lovely and useful that post may be), So I thought why not give the people what they want, a working flexslider responsive slider with zoom capabilities!.
Responsive Web Design and Wireframing
At my place of work I was recently tasked with educating the design team and operations team on responsive deisgn and how to wireframe for a responsive site project.
The presentation was very well received and I thought it would be another nice item for me to share with you all.
To navigate simply use your down arrow on your keyboard.
Designers Become Front-enders Part 2: Coding Your First Webpage
The Gift Finder
A quick note none of this is set in stone, find your own way that works and use that. This is just a guide from what has been found best practices and what generally works. Continue reading