Coming across the GA Dash Tumblr theme tutorial was like a Godsend.
In the past, I scoured the internet for guidance on how to make a Tumblr theme but always came out empty-handed. Either it was some specific how-to on a personal Tumblr account or an outdated YouTube video that skimmed the surface.
So I was thrilled when I inadvertently stumbled on the Dash tutorial for making your own Tumblr theme from scratch. I jumped into it immediately.
My goal was to convert the Learn to Code With Me Tumblr into a custom theme I created myself. Basically, no more relying on a bulky packaged theme. Unfortunately, things didn’t turn out as I had hoped.
How Tumblr Themes Work
When using Tumblr, you basically have your own website. There are a variety of free themes you can use on your Tumblr page – just like WordPress or Blogger. There are even paid themes.
You can also build your own custom theme, which is obviously ideal. This way, you have total control over everything: where the content goes, picture sizes, the navigation bar, colors, fonts, etc.
But the way Tumblr structures their theme-creation is unique to Tumblr: it’s not like building a normal website.
Sure, it requires basic HTML and CSS. But it also uses a bunch of special variables and blocks that are special to Tumblr.
Yes, Tumblr does provide documentation on creating your own theme. But it’s sorta confusing. And mostly boring. And super long. Who wants to read through some dense, mega-page?
This snooze fest of a page is what brought me to GA Dash.
The GA Dash & Tumblr Theme Tutorial Interface
Unlike some of the coding lessons I’ve done in the past where all information is posted to the site (i.e. Made with Code and Hour of Code), to access any free projects on Dash you must create an account. It’s no big deal – just a name and email confirmation.
Beyond the Tumblr theme tutorial, they have five other projects that focus on HTML, CSS, and JavaScript.
Within the project itself, instead of using video, Dash uses a slideshow style to present the information in the lessons.
Below the slideshow, then, is a mini code editor where you type in the code yourself. And to the right-hand side of the interface is an area where you can preview the work you have done thus far.
As you make changes to the code, it appears instantly in that right hand side. Also in the top right of that area, there is a desktop view and a button to swipe to see the mobile preview of the site.
This feature is pretty cool – and something I have yet to see in other online tutorials. Even more, the decision to include that capability is very forward-thinking given the current mobile trends of more and more people using mobile/tablet to web browse.
In any case, as you worked through the project there are periodic “checkpoints.” Basically ensuring that your code up to that point was inputted in the correct way. If it is, a green checkmark appears so you can move onward.
Overall, I think the technology behind Dash is top-notch. My only bone to pick is the fact that the slideshow portion took up 1/4 of the screen, meaning at times I was squinting to see what was written on the slides. If they added an option of making the slideshow fullscreen, the whole experience would be even better.
GA Dash Tumblr Project: Perfect for Beginners, but Lacking in Detail
Pros
In my opinion, the tutorial is perfect for a beginner-ish level. Having some HTML and CSS knowledge would be ideal (stay tuned until the end of this post for some recommended resources for learning HTML and CSS).
The Tumblr project is broken down into six sections:
- Template Tags and Variables
- Making the header pretty
- Learn about Blocks
- Post types
- More post types (there are seven post types on Tumblr)
- Creating pages
All of the above sections were informative. Dash does a good job walking you through the code and explaining what everything does. Now, I finally understand how to make posts in Tumblr with the {block} and how variables basically pull info to fill-in into the theme.
Cons
Then, when all is said and done, you have to export the theme you built in the Dash interface onto Tumblr. But instead of Dash’s helpful slideshows highlighting a step-by-step process, they just offer a blog post that explains it. I mean, it’s not rocket science to copy and paste the theme into Tumblr. But I feel like they sorta leave you hanging at the end.
And to be honest, once you do export it, it doesn’t look great.
Of course, I then went back into the theme to make my own changes. The project you build in Dash is very generic. But there were things I wanted to do to my theme that the tutorial never touched upon. I realized at that point how bare-bones the tutorial was.
Sure, I now understand how to build a basic Tumblr theme from scratch. But who wants a basic theme? (Unless you’re going for that minimalist look.) I realized in order to achieve a truly awesome Tumblr theme, I was going to have to put in a lot more research, time and effort.
Let’s be real: I am a one woman show. I juggle multiple responsibilities. (Like I’m sure many people reading this do as well.)
How much time can I really dedicate to my Tumblr theme?
How the GA Dash Tumblr Theme Tutorial Could Be Improved
I would have loved if the tutorial went further. I wish it discussed more advanced Tumblr theme capabilities like:
- Adding a special bio box on the front page with social links
- Different navigation options
- Social media sharing
- Adding a Google Analytics ID
- Incorporating custom fonts
…and that’s just to name a few.
Moreover, despite having the nifty “mobile view” option built into the dashboard, the Dash tutorial never once mentions mobile issues. (Tumblr actually has a preset appearance for all accounts when on mobile, but one can choose to override it and make their theme look as they wish when on mobile.)
Conclusion: Can You Make Your Own Tumblr Theme With GA Dash?
The answer is yes—but it probably won’t be perfect, or exactly what you had in mind. Even so, it’s a great place to start.
Without a doubt, I learned a lot about how Tumblr themes work and the concept behind the structure.
But I didn’t achieve my main goal: having the Learn to Code With Me Tumblr be on a custom theme. If you look, it’s still running on a theme I certainly did not create. I wish I could build something to that caliber, though.
I was excited to take on a tutorial I could apply to my real life instantly. So excited, in fact, I finished the entire project in a few days.
But after I exported it and went to make my own changes, I quickly learned that in order to make a really kick-butt Tumblr theme, I’d have to dedicate the time. Time I could spend elsewhere, like redoing my actual Learn To Code With Me site.
Maybe I expected too much from a free tutorial.
Still, this Dash project is a step in the right direction. To my knowledge, this is the only legitimate Tumblr theme tutorial. Even the resourceful Tumblr Quick Start course from LinkedIn Learning barely scratches the surface of making a customized theme.
Looking ahead, I hope more online education portals, like LinkedIn Learning, Codecademy, etc., add Tumblr theme making to their agenda. Heck, even smaller-sized companies/people trying to make a name for themselves.
In the end, I have to give General Assembly a major hat tip for even offering this project.
TL;DR
- There is nothing like the GA Dash’s Tumblr theme tutorial on the web
- Dash platform technology almost perfect, combines slideshow + code editor + instant results
- Dash Tumblr Project is awesome, until you get to end and have to export it
- If you know some HTML and CSS, it’s easy
- Wish tutorial included advanced topics like: addressing mobile issues, social sharing, adding other variables (like social links, Google Analytics)
- Learned about what goes into basic Tumblr themes
- Didn’t achieve the goal of making a pimped out custom Tumblr theme
Recommended Courses to Learn HTML & CSS
While there aren’t a huge number of dedicated Tumblr theme tutorials out there, it will help a lot if you have an understanding of HTML and CSS. If you want to learn more before attempting to make your own Tumblr theme, below are some of the courses I highly recommend.
1. HTML, CSS, and JavaScript for Web Developers – Coursera
Build web pages from the ground up using HTML and CSS, which are two of the simplest and best programming languages for beginners. During this Coursera coding course, you’ll code a mobile-friendly restaurant web page and a fully functional web app.
2. Front End Web Development Track – Team Treehouse
This course teaches you the fundamentals of HTML, CSS, and JavaScript, plus other useful front-end developer info like optimization and debugging. If you’re a total HTML/CSS beginner, Team Treehouse is a great place to start.
3. 1 Hour HTML – Mammoth Interactive
This course starts you off with the basic coding language of HTML. In just 1 hour, this condensed tutorial will show you everything you need to know to start coding in HTML.
4. Build Responsive Real World Websites with HTML5 and CSS3 – Udemy
This Udemy course will teach you all the real-world skills to build real-world HTML5 and CSS3 websites. You’ll learn the knowledge you need to build any website you can imagine from scratch.
5. Learn HTML – Codecademy
In this Codecademy course, you will learn all the common HTML tags used to structure HTML pages, the skeleton of all websites. You will also be able to create HTML tables to present tabular data efficiently.
—
Do you use Tumblr with a custom theme? If yes, how did you learn how to make it? Let me know in the comments section below.
Image courtesy of Romain Toornier, Flickr.