We get customer support requests about editing HTML and CSS code in Google Drive. Chromebook users want to be able to use TechnoHTML with their students. TechnoHTML is a technology project with simple programming activities for middle school students that allow them to make a web page. Acting on a customer request I reviewed several HTML editors that work well with Google Drive. In my next post, I will explain how you can use these apps to create a web page in Google Drive.
Chromebook users need an app to create and edit HTML and CSS code. I read user reviews and then tried three of the most popular apps. I had success with all of them. I have noted some of the benefits and shortcomings of each app to help you pick one to use.
NOTE: These apps were tested in a Chrome browser using index.html and picture files stored in a shared Google Drive folder. The apps were connected to Google Drive and then used to create and edit the index.html file.
HTML Editey
PRO:
- Live Preview: Best feature! HTML Editey has code in the left pane and a preview window in the right pane. The preview updates as you edit the code in the left pane making it easy to see text and formatting changes happening in real time.
- Color Coded Tags: HTML Editey color codes the tags which makes them easier to read. For example CSS, HTML, picture names, and attributes all appear with different colors.
- AutoComplete: The app automatically inserts the end tag, which makes coding faster.
- Word Wrap: Word wrap is when the paragraph text wraps around to the next line instead of running off the screen. This makes it easier to type and edit information.
CON:
- No Pictures in Live Preview: HTML Editey uses placeholders for the pictures. I could not figure out how to solve this problem, even after doing several online searches. To see the pictures I had to open a separate tab, the Google Drive shared website folder which has the index.html and picture file. This would have been an excellent solution, but since HTML Editey has no SAVE button, I could not force it to immediately update code changes, which meant I had to wait a few moments before reloading the page to see updates to pictures.
HTML Editey lets you preview text and formatting changes in the right pane.
ShiftEdit
PRO:
- Color Coded Tags: ShiftEdit color codes the tags which makes them easier to read.
- AutoComplete: The app automatically inserts the end tag, which makes coding faster.
- Drop Down Code Choices: I liked the drop down that shows code suggestions. This made it much easier to type the correct code quickly.
- Syntax Checking: Best feature! If you make a mistake when coding a red X appears by the line number with a explanation along the top of the window.
CON:
- No Word Wrap in the Coding View: ShiftEdit does have word wrap, which is great for writing text. However, to access word wrap you need to be in Design View and then select Tools-Source code. The Source Code pop up window is not as great for editing code because color coding, autocomplete, drop down code choices, and syntax checking are no longer available.
- No Pictures in Design View: I could not get ShiftEdit to properly display images when in Design View. I still had to open the Google Drive shared website folder, with the index.html and picture files, in a separate tab. The good news is that ShiftEdit has a Save button. This means that a Reload of the webpage instantly shows saved changes.
Drive Notepad
PRO:
- Code uses a Larger Font: This may seem like a little thing, but my eyes get tired when I read code. I liked the larger font size.
- Color Coded Tags: Drive Notepad color codes the tags which makes them easier to read. What makes the color coding better than other apps, is that Drive Notepad colors more of the attributes so that things such as px or % stand out on the page.
- AutoComplete: The app automatically inserts the end tag, which makes coding faster.
- Highlights Current Line: Other apps may have this feature, but Drive Notepad makes it very noticeable where your cursor is located and the line you are working on.
- File Management Options: Drive Notepad has simple options to manage the file. For example, there is a Save button and a setting to adjust word wrap.
CON:
- No Live Preview: Drive Notepad does not have a preview. I still had to open the Google Drive shared website folder, with the index.html and picture files, in a separate tab. The good news is that Drive Notepad has a Save button. This means that a Reload of the webpage instantly shows saved changes.
Since all these apps are free, it is worthwhile installing them all, and allowing your students to select their preferred app.