Modal windows…the sheer pain

Modal windows became the bane of my life for the past 2 days trying to install different plugins to use modal windows suitable for the modern browser.

I’ve been using Foundation 6 framework to practice using responsive column layouts which has been great. I encourage all of you to try it. Foundation 6 comes with the option to use a modal window which they call reveal, however I’ve had a lot of trouble trying to get this to work. It may be due to my lack of expertise, but seriously, not the easiest to implement and whilst I was looking online for solutions to my problems, a lot of other people were also having issues getting reveal to work so I searched for alternatives.

Currently on my portfolio site – I use lightbox to display my images, however this has become quite old and most people these days prefer to use more lightweight plugins to display their images.

Fancybox – is another such plugin that has been used to display images in a gallery style effect, however from my experience, this is quite heavy on the browser and requires a lot of unnecessary scripts in your html.

Success at last

I came across the JQuery Modal whilst I was tearing my hair out trying to use fancybox. This required quite little scripting and mostly styling in CSS. It provides useful tips in how to implement the modal window with ease. Just download the code from Github and you’re mostly there – a few tweaks here and there and you have yourself a modal window that can help you display text or images. In my case – kitties…

The next challenge is being able to scroll through the images in the gallery smoothly via left and right buttons on desktop, and finger scrolling on mobile and tablet.

The challenge is on….

Sass

As part of my need to expand my technical knowledge into all things code. Learning new ways to do things is part and parcel of every developers life. That being said, the hardest part of keeping on top of new things, is actually installing them on your computer in the first place.

If you’re like me and completely new to coding, you’re probably used to using simple css. And like me, when you work on your projects, you like to separate each style sheet according to the section you’re working on.

After a while, you end up with a lot of <link rel=”stylesheet” type=”text/css” href=”css/***.css”> at the top of your index file. At one point I had 9 different stylesheets linked to my index file – clearly this is very messy. I then learnt that you can consolidate your many stylesheets into 1 and then link that to your index file like so:

For example:

styles.css

@import “intro.css”;
@import “biography.css”;
@import “footer.css”;
etc…

index.html

<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>

For me that was a life saver – but then, I realised that when I was styling my website, I needed to use the same colours here there and everywhere. This can get tedious when you have to remember the same hex code or hsl (hue, saturation and lightness). Which can be tedious.

Sass – a brief introduction

Sass stands for synctatically awesome stylesheets – so what’s the big deal?

Sass (for the newbies) is a simplified way of styling your website. The three main things I like using sass for are:

1. Variables – for example, you want to change colour throughout your whole site but would need to sift through all the lines of css and change each colour individually. Fear not, as with sass, you would only need to change these once.
2. Nesting – allows you to style your page as you set it out in the html so that it’s clearly structured (good for those of you who like things done in an orderly fashion).
3. Import – like css you can use the @import feature to consolidate the stylesheets into 1 css file at the top of your index file however this serves many css files in the web browser. With sass, you only serve 1 css file – how easy?!

Installing sass

This was the tricky part for me. I use windows 10 – and I spent the past 2 days trying to figure out how to get it on my computer. Youtube videos and forums weren’t really helpful until I found this guy!

Ricardo Zea – who is a full-stack designer and the only person I found online who gave me a step-by-step guide on how to install sass on windows.

Check out his guide here

And finally I managed to get it to work and have been playing with it ever since.

View story at Medium.com

 

 

 

 

Finding design inspiration

Easier said than done I hear you cry? Well it certainly was a challenge trying to find inspiration for my portfolio website. However, with a bit of perseverence, anything is possible.

I drew inspiration from portfolio sites I ‘googled’. That’s pretty much where most people start. I also signed up to Pinterest (feel free to view my design boards) which is a great place to draw ideas from particularly if you have no idea where to begin. Often when I start a project I like to view well crafted sites on awwwards, Behance and dribbble which are great places to view other peoples work and gain ideas – all of which are easy to sign up and showcase your work.

Colours

I also started looking at possible colour schemes. A great website that I use often is colourlovers.com which is brilliant for searching palettes – particularly if you’re looking for colours with a particular theme. It’s really easy to use and gives you so many options to incorporate the palette into whatever you’re designing.

Another great website for colour inspiration is Adobe Kuler – which gives you control over so many shades. The colour wheel is a great feature to be specific on the color and of course the RGB and hex codes help when incorporating them into your design.

Typography

Based on today’s websites – you’ll notice that the fonts used are very clean and simple. A place to search for fonts is googlefonts. They’ve recently updated their UI (user interface for newbies). Another great website for typography is fontsquirrel. Compared to google fonts which you add into your code, for designers font squirrel is a great site to download fonts and use them straight away in your designs – I have downloaded so many fonts for my designs and it’s so simple. Just open the zip file, drag and drop into your fonts folder on your computer and they automatically update into photoshop or illustrator with little to no fuss.

Stock images

Finding suitable images for websites is not easy especially when you don’t have the money to pay for them when you’re just starting off. Pixabay and freeimages are great places to search for images that are free to use and download for your own personal website. They have hundreds of thousands of images to choose from, so you’ll never feel like you can’t design and incorporate images into your projects without having to purchase.

These are just some of the websites that I have discovered when looking putting together my portfolio website – I hope these help you as much as they’ve helped me.

My very first website

Hello there!

This blog is dedicated to the journey I’ve started in learning how to code for the very first time.

I came to the realisation that I wasn’t quite where I wanted to be in terms of career. I’m sure we have all been there before. For me, it was the lack of creativity that was getting to me. So this year, I said enough was enough. It was about time I did something with myself, and that’s when I decided that learning to code was the way to go.

So here we are, my very first blog post on my very first blog site. How exciting!