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!
