We would really love some feedback on this article, so if you could leave us a comment this time about what you plan to work on for the summer, whether it's on this list or not, that would be great. You might even help us plan for future articles and training if we get enough feedback. Follow through to the end for a list of resources as well.
CSS
Websites are styled with Cascading Style Sheets, and having a good foundation of CSS knowledge is one of the best things you can do to strengthen your Joomla tool box. It will also make you a better web designer all around. Once you understand why certain things look and act the way they do in a website, the easier it will be to modify almost any Joomla Template that you use in a project.
With good CSS knowledge you can do many of the following tasks and more:
Change font families, sizes and colors
Change background colors and borders
Customize the way images are displayed
Add spacing between items and sections on a page
Give modules unique styling
Structure entire sections of pages, such as headers, sidebars and footers
Much more...
PHP
Most Joomla developers, even beginning ones, know that Joomla is built and run with the programming language PHP. The inner workings of the Joomla core, Templates and Extensions can become extremely complex. However, with a good understanding of PHP programming, you can still make some rudimentary but very helpful and important changes to your websites. For instance, you could completely re-arrange your Contact or Login forms using Template overrides.
Joomla Template overrides are one of the most useful things you can teach yourself to use as a Joomla developer. Template overrides provide a way to make significant changes to your Joomla Template while protecting your changes from being lost on updates. Overrides also protect your site from being broken since all you need to do if you make a mistake is delete your Template override and you're back to using the Joomla core again.
Firebug
Firebug for Firefox is probably the most important tool I know to recommend that you learn to use in your Joomla development outside of good programming knowledge. This handy little browser plugin will save you massive amounts of time and aggravation, guaranteed. Firebug allows you to quickly and easily inspect each element in a website, whether it's your own or not. What this means is that you could also use it for a very useful learning tool. If you've looked at a site and wondered, "How are they DOING that?" then you could have loaded up Firebug and found out...at least mostly.
Firebug also allows you to make changes in your CSS on the fly inside your browser, so you can experiment easily without breaking anything. Once you're satisfied with your changes, you can make them permanently in your CSS files. There are similar tools in Chrome and IE, but in my opinion every Joomla developer should know how to use Firebug.
JavaScript / jQuery
While CSS controls the look and feel of a website and PHP does a lot of the heavy lifting on the back end, JavaScript is what makes a lot of the front end of a website come alive. From image slide shows to important data validation, JavaScript is an integral part of a Joomla site. Understanding JavaScript programming can help you modify actions on the front end, but more importantly it can help you understand problems when you're troubleshooting. Javascript library issues create some of the most common Joomla problems.
As is the case with much of web technology these days, JavaScript programmers are turning more and more to libraries and frameworks for quick JavaScript development. Traditionally, Joomla has used MooTools as its library of choice, but with massive web-wide adoption Joomla has also embraced jQuery. Standard on new Joomla versions, jQuery will ship alongside MooTools in the Joomla core. It's a really good thing to understand.
Website Planning
We've written a bit about planning and its importance in the overall approach to building websites. If you haven't really gotten this into your process, take some time to develop a good set of rules for your planning. This will definitely save you time and headache, especially if you are starting to build more and more sites.
Some ideas for research here:
- Sitemap planning for structure and navigation
- Website goal planning
- Choosing color pallets
- Project management tools
- Copywriting
- Traffic and resource estimation for potentially busy sites
Google Analytics
We've also mentioned the following quote several times: "You can't improve what you don't measure." Most Joomla templates now include a very easy way to include the Analytics code for tracking. The Google Analytics dashboard continues to improve as well, making reading stats much easier to do. If you want to know what your visitors are doing and how you can get them to do what you want, you'll need to use this tool.
If you're at all interested in improving metrics like the following you should become intimately friendly with Google Analytics:
- Web traffic
- Website conversion
- Website usability
- Bounce rates
Website Optimization
As you may have noticed from my blog posts lately, I'm a bit obsessed with optimization these days. I am a tinkerer. I love to make changes and see the results. This might also be why I love CSS and Firebug so much. How to successfully optimize a Joomla website is still somewhat of a mystery, as is Joomla security hardening, but with some research and study you can find some joy in knowing how to make your Joomla sites screaming fast.
Some ideas to start:
- Learn about GTMetrix.com
- Learn how to optimize images well
- Use the Joomla core for as much as you can, avoiding unnecessary Extensions
- Find a really good Joomla web host
Good optimization also starts with good planning, so pair this with the above tips on website planning for a great combo.
Bonus - Bootstrap
So here's your bonus. Bootstrap has been a huge buzzword in the Joomla world, nearly as buzzworthy as "responsive design" has become. Funny thing is that they are very related. Bootstrap has responsive design built in, and it also allows some very nice rapid development and styling possibilities. Bootstrap is Twitter's CSS framework that Joomla has adopted as its framework from version 3.x onward.
You should know about it for the following reasons:
- It will be the standard CSS framework for all Joomla sites
- It will be adopted by Extension developers as well sooner or later
- It provides very easy styling through well known CSS classes
- It provides great website structure possibilities through CSS classes
- It makes responsive design very easy
- It contains some great elements out of the box such as an image slider, tabbed content and navigation bars
Resources
There are just a couple of places that I would recommend to start your learning and research. The first is obvious, Google. It's almost too easy these days to find out anything about anything. Start there if you don't know where to find something. Beyond that, here are a few links to keep you busy:
CodeAcademy
Great resource for online programming, and it's free. You can learn CSS / HTML, JavaScript / jQuery and PHP here. A great place to start for beginners.
Firebug
Just get this and learn to use it. The little bit of time it takes to get to know it will be made back in no time at all.
Bootstrap
This is the main online documentation. It's not like most documentation though. The ways it's structured, you could almost read through the elements like a magazine...well you could if you're at all like me.
Previous articles that we've written on some of this material:
- Optimizing Joomla websites with GTMetrix
- Optimizing with CloudFlare
- Optimizing with JCH Optimize
- Webinar - How to get higher rankings for your Joomla site
- Webinar - How to speed up your Joomla site
- Using CDN for Joomla for web optimization
So let us know what your summer project is and share any other tips or resources you have in the comments below.