Code View – Google Web Designer

Articles, Blog

Code View – Google Web Designer

Code View – Google Web Designer


KENT: Hello my name’s Kent I’m the creative
specialist at Google and I like to demonstrate Code view in Google Web Designer Normally I’m working in Design view like this but you can also switch to Code view if you prefer to work that way On the left you’ll see a list of all
the files in your project and a refresh button if you make changes Note you can
open any text file here not just Web Designer files Image assets will appear
in preview and SVGs are editable You’ll see a lot of minified JavaScript files which you normally wouldn’t change and the same goes for these CSS files but really I’m doing all my work with the HTML doc and the window can be collapsed
with this icon You can increase the text size with the zoom control and we can
change the language mode which is auto-detected and provides syntax
coloring and code completion On the right is a minimap which shows the visible part of your code and can be used to scroll through the page or you
can click to jump directly to a section At the top we have the usual controls
like Preview and Publish so you can work entirely in Code view The keyboard shortcut command F brings up the search controls which are also available in the
Edit menu along with the more powerful Find and Replace For example I can
search for div and see 14 are found they’re all highlighted lightly with the current selection stronger and I can step through them with these arrows or use command + G and command + shift + G to step backwards Some extra controls are
available with these icons search within a selection search for whole words, case
sensitive and I can even use regular expressions When done the search panel
can be closed with this button or the Escape key In the main code editor
window note these little triangles to collapse and expand code blocks and these icons can also be used to expand blocks By default Google Web
Designer automatically indents new lines as you type and notice the closing
paragraph tag was created automatically The tab key increases indents and shift
tab decreases them You can select multiple lines and press the tab key to restore the correct indenting and this is useful when copying code from other files for example also with multiple lines selected the command plus square
bracket keys adjusts indents for several lines at once We saw a little autocomplete in the example I want to cover that in more
detail this feature is pretty handy and I like
using it with CSS adding styles which aren’t available in Design view For example I’ll start typing text and I see all these styles I can use then the
arrow keys can highlight the one I want and return or tab will accept the
suggestion then I can continue typing The last thing I want to show is the
Preferences available in the Edit menu you have a lot of options here and can
scroll down to see more but the best one is right up at the top Color theme I’ve already changed mine but here’s the default there’s dark ones and light ones and I’m using Monokai the preview gives you instant feedback on many of these settings like pad parenthesis with extra spaces and indent size I won’t cover
each one of these but they should be pretty self-explanatory especially if
you’re used to working with code editors I’ll point out the Key map which I’ll
set to Sublime so I can use those keyboard shortcuts like command + L to select the current line or command + SHIFT + D to duplicate a line So I’ll save this
now and the color settings are updated but not all my changes like the indent In order to see those changes you’ll need to reopen your file or switch to Design view, make some change then back in Code view you’ll see your updated preferences like the bigger indents That does it for Code view Thanks for watching!

One thought on Code View – Google Web Designer

  1. Could you give me more information about the tool please? I am doing a job on this tool at the University and I don't find much information.
    I do not speak English very well.

Leave a Reply

Your email address will not be published. Required fields are marked *