If you are new to using fonts in Web Design — google fonts is one of the best places to start!
You can find google fonts at https://fonts.google.com
If you are choosing a font for a title or would like to see what your text would look like in the different font options, you can type your text in the top tool bar and change the size to see your text displayed in all the different fonts.
Heads up — its probably a system font.
This is something that used to happen occasionally in my job. I would have fonts displaying perfectly on my screen and differently on someone else's. Sometimes the difference was so minimal only someone with an eye for design would pick it up.
Usually the reason why the font would be working on my screen was because it was being pulled from my desktop/system as I had downloaded the font files onto my system when I was working on the mock up from design.
You can use the Firefox dev tools to check…
If you have ever tried building an email with HTML you will know how annoying it is to get it working perfectly across all browsers and operating systems. Usually all my major problems happen with Outlook.
One problem I consistently run across is white lines appearing between my sliced images. See Below — these can be either horizontal or vertical.
If you are a web developer, you have probably come across some inconsistencies between browsers where you need to write browser specific code to make your pages looks perfect across all browsers.
I have only used this a couple of times so far for things like padding in inputs or styled selects and it works like a charm!
I have done some research around this and it seems you can get much more specific with the browsers you target but so far, all I have needed are these few options.
See examples below:
This article really is for dummies, but I am one of those dummies! I had a hard time trying to find a simple answer for how to do this on google until one of the designers at work showed me what to do.
I find Photoshop is so hard to use if your not familiar with it or if you don’t know what you are doing but once you know, it’s simple!
Sometimes in my job I get sent a PDF that needs to be turned into an email to be sent out to customers. Quite often this PDF has…
After doing some research around styling select dropdowns, I have come to realize it’s better not to style select dropdowns. The main reason for not styling select dropdowns is that they are displayed differently in different browsers/operating systems so they are hard to style consistently across all use cases.
Make your own select drop down! 🎉 It may look like a lot of code at first but it really isn’t and it's actually quite simple to understand.
See my code pen below for the working code.
Keep reading if you want a breakdown/ plain English run through of what the…
If you just want the code — skip directly to the codepen below!
I had a really hard time finding an article on how to do this on the internet so I thought I would share my final answer (thanks to the colleague who helped me with this!) in the hopes that it may help somebody else.
In the end I couldn't find a good way to keep the file name while replacing the browse icon so I had to replace it using jQuery. …
Basic instructions for complete beginners..
If you have ever downloaded a Colorlib template and tried to change the Sass you will notice it won't work without compiling it and outputting it as CSS.
One of the easiest ways to do this, in my opinion, is to download Koala.
Once you have downloaded and installed Koala (instructions can be found here), drag your project/Colorlib template into the Koala interface and find your sass file which will end in style.scss.
Hi Im Holly! I’m from New Zealand. I’m in my first job as a Front End Web Developer and want to share my learnings and thoughts along the way!