HTML, CSS, and JS: What You Need to Know for Joomla & Wordpress

It can be very tempting to place all of one’s faith in extensions and plugins when you are operating a Wordpress/Joomla site, but it is critical to understand the underlying infrastructure in terms of HTML, CSS, and JS (Javascript). Now, while it is true that with regard to both Joomla and Wordpress there is a lot going on in terms of PHP/MySQL, we’re going to put that on hold in this article and zero in on what can be accomplished with the three knowledge bases above.

HTML: The Walls, Frame, Ceiling, and Floor


Think of building a website like building a house, anything ‘physical’ is going to start with HTML. While a lot of this is automatically set up for you in modern CMS’, it is still very important to understand that the basic framework of what you are seeing boils down to a mix of HTML/PHP. Typically, you are not going to be doing a lot of modification(s) with HTML unless you are developing a theme itself in a CMS, but understanding the role it plays is crucial in terms of being able to ‘see’ your website for what it is.

CSS: The Paint, Proportion, and Scale



Continuing on with our home-building analogy, CSS is going to provide the color, sizing, scaling, and other subtle touches that you are going to want to implement. Want to move an element like a logo or a text-block? CSS is the answer. Want to add a filter to an image so it’s more subtle/subdued and provides a better background for a given section of your site? CSS again. HTML drops things on to the page, but CSS moves them around. CSS can even remove elements from a page altogether. 

The utilization of CSS within Joomla or Wordpress can either be done via the page builder you are using (depending on the page builder, of course), but it can also be done by creating custom code and entering it into a CSS editor extension/plugin within the back-end of your site. Discovering the name of a given element is a matter of inspecting the element within your browser, and subsequently targeting it with custom CSS to change according to the code you implement.



JS: Taking Our Home from Plain to Smart

Javascript in a CMS is often deceptively ‘off-limits’, but for those with a deeper understanding of plugins/extensions, adding just a bit of jQuery (a Javascript library) can really make a navigation bar pop. Javascript is (typically) responsible for many of the animations we see on websites currently, and it is used to create pop-up windows and various other functionalities that seem to ‘come out of nowhere.’ Javascript can be used dynamically with PHP in order to move, hide, and transition from one piece of content user-side rapidly. Unlike HTML and CSS however, the learning curve with Javascript is steep, and this is why libraries such as jQuery have been created to aid in its ease of use.



Final Thoughts



For the average website built on Joomla or Wordpress, the most critical skill to know out of HTML, CSS, and Javascript is definitely CSS. While HTML is helpful and Javascript can be really, really handy in taking a website to the ‘next level’, CSS allows you to make a site your own and at least get it to a point where you are happy with the look/feel. A solid understanding of HTML/CSS combined with the knowledge of how to use a browser’s console will enable someone to change the look of their site quite effectively. 

There will (inevitably) still be some challenges along the way with regard to Javascript, PHP, and plugin functionality as changes are made…but our development services team is more than happy to discuss your options with you there!