Is There a Simpler Tool for HTML than IntelliJ IDEA*?
The bulk of my work is with small businesses that want a WordPress site. Many of my clients want a customized child theme for their site. My go to coding tool is Sublime Text. In the past, I have also used SimpleText, Notepad, PageMill, FrontPage (eeek), Dreamweaver, TextPad, etc. And, in the process, I have avoided, Microsoft .NET and other studio type packages. One required 3-credit class of Visual Studio was enough to make me want to holler, “Where’s the CODE?”
But, like many other experiences where I had to learn a technology to teach a class, along comes IntelliJ. Note that Facebook sucked me in this way, and I now have 4 Facebook Pages. IntelliJ will probably also do some evil morphing on my life too. So, the first answer is that I need to learn Intellij IDEA by JetBrains (hereafter called IntelliJ).
What Does a Simple Tool Look Like?
I start the students I mentor with two tools to learn HTML and CSS: a text editor and a browser.
The steps for creating a simple web page with a text editor and browser
- Write some code in the text editor.
- Save the code.
- Open the file in the browser. Or, if the file is already open, refresh to pick up changes.
- Wash, rinse, repeat.
A simple file structure would be
- Folder for images
- index.html (home page)
- AboutUs.html
- InformationPage1.html
- InformationPage2.html
- etc.
But, after we build a few pages this way, the process gets more complicated, because each page needs to be linked to every other page. So, navigation needs to be added to each page, and then the navigation on each page has to be updated to add the new page.
I once started working on a site with 300+ pages that was static (pure HTML). It took me 30 minutes to create a new page in Dreamweaver and 2 hours to link all the other pages. There is a better way!
How to Structure a Site with Common Elements
A website is interconnected with navigation and needs unity of design.
Examples of page elements a site has in common
- Each page should have the same header and footer.
- At minimum, each page should have a unique title tag and meta description.
- Each page should have navigation to all the other pages, or at least to categories with subnavigation.
- Each page should use CSS for formatting.
Adding these to each page shows the need to pull those blocks of code out of the individual pages and create individual files for the individual elements. But, HTML and CSS cannot do the job of adding the contents of one file into another. At that point, a programming language is needed, and a text editor and a browser are no longer enough to do the job.
One way to work when your website is at the level of needing a programming language is to continue using a text editor a browser and FTP to move the files to a web server with software to make the code from the programming language work (run). Many small website programmers use this method.
How an IDE Adds Efficiencies to the Process
Even if you don’t have programming on your HTML/CSS site*, an IDE** can help make your process more efficient. Here are 5 examples:
- IDE’s have line numbers. This is a simple feature, but it is amazing how much time it saves to be able to move through your code when those numbers are there!
- IDE’s have a panel along the side that shows your file structure. Unlike working in a text editor, you don’t have to go hunting for your files. The reason this works is that an IDE has a function to connect to a directory/folder on your computer.
- IDE’s have syntax error checking. For example, if you have a <div> tag, the IDE will add a </div>. This saves a whole lot of typing … and typos!
- IDE’s show errors in your syntax. Some IDE’s error alert are more intuitive than others.
- IDE’s will indent nested code for you.
* HTML and CSS are coding languages, but they are not programming languages. HTML is a markup language, and CSS is a style sheet language.
** IntelliJ is a type of software called an IDE (integrated development environment). An IDE has much more capability than a text editor.
Some IDE’s Are More Complicated than Others
The IDE I use for sites the most often is Sublime. Most of the sites I have worked on in the last 10 years use a CMS (content management system), such as WordPress Drupal and Joomla, all of which have programming in the PHP scripting language. . I also have clients who prefer to use a web service, such as Wix, Weebly, Squarespace or Shopify, but those systems only work on their web service, not on a local computer, so they are not relevant to this discussion.
The examples mentioned above where a site has common elements apply to these CMS platforms in headers, footers, navigation, etc. But, a CMS also provides many more software options, such as galleries, forms, e-commerce, etc. in the form of plugins, extensions and libraries. Using an IDE makes the job of managing all the pieces more efficient. But, at what point does an IDE become so complicated that the efficiencies are lost? That is why I normally use Sublime for the sites I work on.
Why Would You Use IntelliJ IDEA with HTML and CSS
In normal HTML/CSS development situations, there are probably better tools than IntelliJ. They are better for the task because they are simpler. But, here is one use case that is out of the ordinary. Learning a complicated language, such as Java, and learning a complicated IDE, such as IntelliJ at the same time is extremely stressful. One way to learn IntelliJ in a more peaceful process, is to learn it in a simpler coding situation, such as HTML and CSS.
Does IntelliJ Contain the Tools for a Simple HTML/CSS Learning Project?
Yes, it does. At first I was confused by the materials about IntelliJ. JetBrain’s page about using HTML in IntelliJ says that “The HTML Tools plugin is available only in IntelliJ IDEA Ultimate.” IntelliJ IDEA Ultimate is about $600.00 which is probably out of reach for minors and students in the experimentation and learning phase. But, I wondered whether there might be enough helpful functions in the free Community version to make it a useful learning tool.
Version 2023.1 does have some support for HTML or this article would end here.
What I Found Creating a New HTML Project with IntelliJ
Starting a Project in IntelliJ has a bit of a twist on the word “New”. New does not necessarily mean that you are starting a fresh project. It means that it’s new to IntelliJ, or your copy of IntelliJ. The reason that this is important is that if you have a project that you had already started in some other system, it’s still considered a “New” project.
They key is to go to File -> New and notice the options in the flyout menu. You can start a new project, or you can connect an existing project to IntelliJ. Notice in the second screenshot that HTML already exists in the options.
The New Project Window has options that are specific for the language you choose. The option I chose for HTML is to show example code, which I will use for testing what benefits there are in using IntelliJ for HTML/CSS.
Benefits from Using IntelliJ for a Simple Project
One of the benefits of using a simple project in your first try at IntelliJ is that you will find that each higher level option has many, many additional options and settings. Starting simple allows a student to get used to the environment, as most teachers/trainers start flying through the menus faster than a student can find them, much less use them!
- All the files are there, visible in the left side panel
This is offered in Sublime and other IDEs. - Line numbers.
This is offered in Sublime and other IDEs. - The basic HTML structure is in the example
- If you click a tag, it will show you the other tag in the pair
- There is tag debugging available, but you have to know to go to Build in the menu
The hunt for this function is part of dealing with a complex tool, but the act of using those menus will help you learn the software. - Similarly to #5, there is a Preview in Browser function, but it is tucked into the View menu
The next step would be to see whether that tool can be added to the main window.
Conclusion
Yes, for a learning situation, an HTML/CSS project would be a good introduction to the use of IntelliJ.
* Note: IntelliJ IDEA is a product of JetBrains