Every once in a while, I like to round up links to free resources that I’ve found to be helpful as a blogger and content creator. I find that blogging about beauty is always fun but my background in graphic design and web-development is also really exciting to write about once in a while!
I published this post in 2015 but have since updated it to remove broken links and add new resources I’ve come across. The previous list only had 17 links, but I’ve now updated it to 40!
I’m rewriting this post to share more resources and to introduce my Behind the Blog Series which I hope you will enjoy! I know this content isn’t for everyone – there’s only 5 of them that I’ve planned in the entire series, and you’ll be seeing them once a month at most!
I’ll be posting more blogger-related resources and tutorials in the upcoming weeks! Any future requests? Send me an email to get in touch!
Free Resources | Table of Contents
- Improve your Coding/HTML/CSS Knowledge
- Learn Web Coding Languages
- Graphic & Web Design
- Content Creation
- Google Tools to Improve Your SEO
- Miscellaneous Tools
1. Improve your Coding/HTML/CSS Knowledge
1. SMASHING MAGAZINE – an excellent blog/magazine dedicated to coding, little snippets, and tips/tricks for flawless design, coding and web experience
2. TROUBLESHOOTING: SHARE CODE – ever been stuck on a CSS/JS coding and feel like you’re read to rip your hairs out? Check out this article which lists a few web editors that allows you to verify the validity and cleanliness of your codes.
3. CSS BEAUTIFIER – a generator that allows you to quickly clean up your CSS so you can easily edit your file and prevent making any coding mistakes.
4. JSFIDDLE and CODEPEN – a repository that allows you to input CSS, HTML and Javascript codes to test out before implementing on your webpage. Both JSFiddle and Codepen are great for any freelancer and anyone working on collaborative projects as it allows you to save your codes and share them with other designers if you need help troubleshooting. They are both very user-friendly and intuitive to use.
2. Learn Web Coding Languages
5. CODE ACADEMY – A free online learning platform for learning basic webdesign, web-development languages and programming languages. I use it myself, and have completed nearly half of the available free modules.
6. W3 SCHOOL – The holy grail of all things HTML/CSS related, this website has been my go-to resources since I first started web-designing. They have all HTML/CSS tutorials under the sun, and especially if you don’t want to pay someone to make minor adjustments to your page, this website has the resources/tutorials you will need to make that adjustment for yourself. The website is user-friendly, tutorials/articles are easy to follow so you are bound to find what you need!
3. Graphic & Web Design
7. ADOBE KULER – a favourite amongst designers, Adobe Kuler is an online generator that allows you to visually choose a colour palette from one simple colour pick (i.e. monochromatic, complimentary) or choose one from the many presets available. Adobe Kuler is also available as an app for iOS and Android.
8. COLOR HAIL PIXEL – another colour generator that allows you to visually pick a colour by moving your cursor around the page.
9. DESIGN SEEDS – a website dedicated to creating colour palettes from images. Hexadecimal codes are provided for easy use.
10. CANVA – the easiest and most powerful online graphic design website that is lightweight, and comes with tons of different templates to choose from. You can create all sorts of graphics on here, for blogging or personal use. I love the breadth of options available from photos, fonts and templates.
11. PICMONKEY – a free online picture editor. I’ve never personally had to use it since I learned and grew with Photoshop. I heard this is a really helpful tool; allows you to create collages and more.
12. WORDMARK.IT – Want to know how a specific word/sentence looks in different fonts and sizes? This is your go-to page to check how the fonts will look without constantly updating your webpage if you’ve changed the stylesheet. You can even see how the font look against white or black background, saving you the time from constantly testing the font, while changing only one variable at a time.
13. SCREENFLY – We all know how important it is for our website to be compatible on multiple platforms, and devices, especially now that Google has updated its search algorithm to prioritize mobile-friendly sites. ScreenFly is a fantastic tool that lets you check your website’s responsiveness (in real-time) on various different platforms and devices. Check if your layout looks great on Apple iPad, or even the Motorola Razr! You can play around with the settings to see how your blog layout will look if the user changes the orientation (i.e. from portrait to landscape) and check it real-time!
14. IMAGE-MAP – Although I’m not the biggest fan of image maps (clickable links in an image) I do appreciate that they come in handy once in a while, especially if you don’t want to slice and dice your images on Photoshop to embed image maps. For those of you not familiar with it, image maps lets you include links in different spots of an image without have to do anything different to that image. It could be useful if you don’t have Photoshop or not familiar with Photoshop slicing and image mapping tools. Once you upload your image, it will generate the appropriate HTML to paste onto your webpage – doesn’t get any easier than that!
15. FAVICON GENERATOR – a favicon generator that allows you to import existing images and turn them into favicons for your blog. Definitely a must-have for those who are not as artistically inclined as I am.
16. STRIPE GENERATOR – an online background generator that allows you instantly create backgrounds (stripes) in seconds. You control every variable, and if you are not interested in creating your own background, downloads of others’ background is also available. This is an awesome resource for those who do not have Photoshop or too lazy to fiddle with Photoshop. A generator is also available for Tartan Backgrounds.
17. GRAB BUTTON GENERATOR – allows you to quickly generate HTML code for your buttons. It does not create the buttons for you, but create the HTML coding to display the button and the copy/paste box.
18. COLOURLOVERS – a great place to check out if you are ever stuck with deciding which color scheme to use.
19. SUBTLE PATTERNS – an excellent resource for your pattern/background needs. They offer mostly black and white plain or patterned patterns – excellent for print or digital designs.
20. RECITE – allows you to quickly create custom pin-able and instagram-friendly quotes.
4. Content Creation
21. BLOG TOPIC GENERATOR – Ever get that blogger writing block and just don’t know what to write about? Over at Blog Topic Generator, you pop in 3 nouns that you might be interested in writing about, and the generator will spit out blog post ideas like “The Ultimate Cheat Sheet On Beauty” and more! Incredibly helpful when you’re in a rut!
22. CLICK TO TWEET – Have a catchy phrase in your blog post that you want people to retweet or focus on? This nifty little tools lets you tweet specific phrases and even embed a link in your post that lets your reader to easily tweet it.
23. WRITE OR DIE – Just like the name implies, this tool helps forces you to get your draft completed… or it deletes your entire content! Probably quite handy for someone in school too…
24. HEMINGWAY APP – allows you to check the readability of your content by highlighting common writing errors such as lengthy, complex sentences and dense / complicated sentences.
25. LOREM IPSUM GENERATOR – generates dummy text “Lorem Ipsum” in a variety of different lengths.
26. GOOGLE ALERTS – allows you to monitor certain topics and mentions on Google.
27. GRAMMARLY – improves your grammar as it checks your writing on the go.
5. Google Tools to Improve Your SEO
28. MOBILE-FRIENDLY TESTER – allows you to check whether your blog is mobile-friendly or not.
29. PAGESPEED INSIGHTS – allows you to test how fast/slow your pages load.
30. GOOGLE ANALYTICS – the most popular traffic tracking tool out there. Very powerful and allows deep dive analysis of various traffic sources, among many tools.
6. Miscellaneous Tools
31. EMAIL ADDRESS ENCODER – prevents spam bots from spamming your email address by converting them into HTML numbers. Your email address will stay intact and legible on screen. Ingenious!
32. FAKE IMAGE PLACEHOLDER – image placeholder tool that creates dummy image or text to help you see the finished layout during the design process
33. TEXTCLEANR – allows you to clean up text when copying and pasting between applications and tools
34. ALPHABETIZER – allows you to quickly re-arrange a large number/volume of content in alphabetical order and strip any duplicates / HTML.
35. COPYSCAPE – searches the internet to see if there are any copies (or anyone plagiarizing) your blog content.
36. WORDPRESS.COM – My favourite content management system – I’ve been using WP for over 10 years which is a testament to how much I love it! If you don’t have your own host, getting started with WP.com is a great way to test out the platform and see how powerful it is! Many free themes and plugins are available including the powerful Jetpack plugin.
37. TWEETDECK BY TWITTER – allows you to keep track of hashtags and manage multiple accounts on your online dashboard
38. WE TRANSFER – allows massive file sharing with your team and/or clients.
39. BIT.LY AND GOO.GL – free URL shortners.
40. SURVEY MONKEY, FREE ONLINE SURVEYS, and GOOGLE DRIVE: FORMS – allows you to create beautiful, easy to embed, and simple surveys in minutes.
Pin for Later!
