More to come!
More to come!
There’s using Brackets, and then there’s using Brackets.
Find and replace
Using find-and-replace takes out the brunt of the work when it comes to swapping code:
- command + F …to find
- command + G …to find next/previous
- control + shift + F …to find in files
- control + H
- alt + command + F …to replace
- control + shift + up
- alt + shift + command + F …replace in files
Yet another standard feature of Brackets, this keeps your code organized in different colors. Can you IMAGINE how horrible it would be if you just had to stare at a page of just black text…?
Disclosure triangle hide / show
Now you see it…now you don’t.
The disclosure triangle just hides your code for the sake of shortening your page. When you need it, make it visible again. It’s unbelievably easy.
Find opening / closing tags
The <head> , <meta> , and <title> tags are opening tags.
The </head> , </meta> , and </title> tags are closing tags.
Using the boxed arrows button next to “Working Files” in the top left of your screen, you can open more than one file at once and edit them both. Fantastic.
As you take advantage of all Google Chrome has to offer, there is one particular tool that stands out for developers: the Inspector.
How to configure
Using the Chrome menu:
- Select Tools
- Select Developer Tools
- Right-click on any part of the page and select Inspect Element
This brings up a Google Chrome inspector window, similar to the one below:
Things you can do
While you can’t necessarily alter a live page, you can edit certain things – such as text color, background color, font size, the size of an element, etc. – in a sort-of live preview.
Let’s get real…we’re college students. Yes, life moves fast. Yes, the production class makes it easy to get behind. In the hustle and bustle of trying to keep up with learning code, make sure you don’t lose that ever-important professionalism that will, you know, lead from being a student to becoming employed.
Learning hard skills is time-consuming. Don’t negate the value of what you’ve learned with stupid mistakes.
Formatting your code
The beauty of code is its function as a language for development. Think about it: you wouldn’t read a novel that had hideous grammar and inconsistent formatting, nor would you take a class in a romance language from a professor who isn’t fluent. Code is a language, and how you set it up in your editor determines not only how effective your project is but also how easy life can be for an organized coder.
Think your very first original day one HTML document. When you use a tool like Brackets, you get to add the basic HTML skeleton with the click of a mouse. Brackets automatically puts different components, such as <head> tags and <div> tags, in different colors. WHITE SPACE IS FREE…it’s a good idea to space things out as much as possible, and introduce <!– comments –> above any new function you add to make it that much clearer.
Help you help yourself.
Consistent file and folder structure
We touched on this a bit on the Files and Folders page, but just in case you need a refresher…
…files and folders are still the foundation of everything.
It’s not a good idea to go throughout your lessons without organizing your work. Yes, you can create various .html and .css files all over your desktop (or at least all over DropBox). It really doesn’t take long to create a folder for each of your projects. Keep your .html file alone in your main folder, and then create separate folders for .css, .js, and image files.
Don’t forget how to direct links to these files, of course.
Commenting your code
This one is easy: keep it simple!
Comments are there mostly to help you out…remember what a specific action or div tag is for, categorize your code for those who might be learning from your code (or grading it)…and that’s it.
Comments are not for decoration.
They’re not subtitles.
And you don’t need too much of them. Over-communicating the purpose of your code doesn’t exactly spell confidence for your ability to write.
NOT stealing your images
Look…you and I both know that the above GIF is from a scene in Arrested Development. But what’s important for the purpose of this lesson is the little URL at the corner of the picture.
Do you see how it’s barely there? Yet it accomplishes so much. I don’t need to go on too long about the importance of keeping your image sources, and there are plenty of ways to search for license-free images (Google Images has a setting for this purpose).
Don’t assume that just because an image is there, it’s entirely up for grabs. Somebody owns it, and just as you wouldn’t want someone taking away your hours and hours of tedium and claiming something as their own, you should give credit where credit is due.
Before computers, documents were usually stored inside of a folder inside of a file cabinet, similar to this one:
To find a document you had to know where to look, as in which drawer and folder. Complex filing systems often placed folders inside of folders inside of folders… You get the picture.
This filing process was such a part of life prior to the 1980’s that classified ads had a special section for ‘file clerks,’ the lowly employees whose job it was to store and retrieve files.
The file clerk job description disappeared from ads once offices had computers, but the metaphor of files and folders still lives on. Today, the term file usually applies to electronic documents, which are stored in electronic folders. The screen capture below shows an example of a photo named ana.jpg which is inside of a folder named 2009, which is inside of another folder named pictures.
If you asked one of those out of work file clerks from the 80s (these guys know nothing about search tools to retrieve Ana’s picture and told him to look for a picture named ana.jpg inside of the 2009 folder inside of the pictures folder, he probably would find it. This leads us to concept 1, web pages are digital file clerks, which is explained below.
Concept 1: Web pages are digital file clerks.
Although they may look like large impressive documents, web pages are nothing more than text files that tie other files together. The result is the webpage that appears in your web browser.
In addition to the text that you read when you view a web page, the hidden text that actually makes the web page function is known as source code. Source code tells your web browser (Internet Explorer, Safari, Firefox or whatever) how to display the page, where to find pictures, video, and other media files that may make up the webpage. The pictures and media files are totally separate from the web page itself and are stored in folders. This concept can feel a little strange at first but for you to become a competent web developer you must understand and come to terms with it.
For example, a web page that displays the ana.jpg picture that we just looked at, would need to take the file name, ana.jpg, and two folders, pictures and 2009, into account, with source code like this:
If, for some reason, you rename the ana.jpg file or move it into a different folder, your browser file clerk will continue to look for ana.jpg in the pictures/2009 folder, and it will not appear on the web page. This file clerk NEVER takes the initiative to look anywhere other than where you tell him to, so make sure that your instructions are correct!
The same concept of files and folders works for links as well. Most webpages have links that point to other webpages. These links have to take the file name and folder structure into account, in order to function. To illustrate this concept, imagine that the 09 folder has an html file (otherwise known as a webpage) named ana.html that is stored right beside ana.jpg. In order for another webpage to have a clickable link to ana.html, the file name and folder structure must be taken into account.
A webpage in the pictures folder, for example, would need a link like this one
that includes the 09 folder, to connect to ana.html.
A webpage in 09, the SAME folder as ana.html, would simply link to ana.html as in
In this case there is no need to link to the folder.
This screen capture illustrates yet another example:
In this case, a webpage named index.html is linked to ana.html. In this case, index.html is one level above pictures so the link would have to include both the pictures and the 2009 folder as in
By the way, a link from ana.html to index.html would look like this:
In this case, ana.html would be linking ‘upward’ two levels.
The ../ expresses the navigation for moving up a level. If index.html was in the pictures folder, the link would be
with only one ../ .
While we are on this topic, let’s imagine one more scenario. In this case, ana.html is linked to davis.html. As shown at here, ana.html is inside of 2009, davis.html is inside of 2008:
Both folders, 2008 and 2009, are inside of pictures. In this case the link from ana.html to davis.html would be
As you can see, the link moving up one level with ../ and then downward into the 2008 folder in order to reach davis.html.
Image paths work the same way. For davis.html to display ana.jpg the code would have to traverse a path upward one level and then downward into the 2009 folder as in:
Enough! Let’s move on and revisit this stuff later on your quiz!
Concept 2: CSS (Cascading Style Sheets) control the structure and look of a modern website or web page.
CSS was invented several years after people began to build websites but has become the de-facto standard for controlling things such as the color, width, and link styles of your site.
For example, every webpage has a body tag that serves as a container for everything else that appears on the bag. A CSS rule that reads:
would cause the entire webpage to have a black background.
One of the great things about CSS is that it makes it possible to change literally thousands of pages at once (if you happen to have that big of a website just by altering a few letters in a CSS file.
Concept 3: The web server is not your computer.
Conventional web development takes place on a desktop or notebook computer. Once a webpage or website is complete, it is transferred (uploaded) to another computer somewhere else that ‘serves’ the computer to the world wide web, so that any browser connected to the Internet can view it.
As a student who is taking this course in the 21st century, you live in an era when most computers are always connected to the Internet. Being constantly connected can blur the distinction between a local and a remote computer, and students often do not understand the difference between html files, images, etc. stored on their computer and duplicates of the same files that are stored on a web server.
Almost everything that you produce in this course should ultimately make its way to the Internet where it will be accessible through a website that you will create. It is important to understand that the webserver that shares your website with the world and the computer that you use to develop your website are not the same machine. In this class you will develop web pages and ultimately websites on the computer in front of you. Once you have developed a web page or site that you are ready to share with the world, you will move the content to another computer known as a web server that may literally be anywhere in the world.
Here is how it works.
First, you create files and folders on the local computer that is inches away from you and link them together into a local “website” that ONLY exists on YOUR computer.
Once everything works well on your local computer you use a type of program known as an FTP client to move the files and folders to another computer that functions as a web server, that will make all of your work available to the wide wide world.
When you move files and folders to the web YOU HAVE TO CREATE THE SAME FILE AND FOLDER STRUCTURE THAT EXISTS ON YOUR LOCAL COMPUTER OR IT WILL NOT WORK!
Having everything on the web makes it convenient for me to assess your work and you end up with a portfolio that you can use to show your work to other people, including prospective employers.
This is particularly handy for all this times you need a specific color code for a font or background. Whether you’re using RGB or HEX, color.adobe.com offers a color wheel to visualize your creativity. Toggle and select to your eyes’ delight.
Consider your code…er…unminified.
Not unlike Brackets’ automatic color-scheming to let you know what pieces of the code are what, unminify is a way to fact-check your code as you go. As they say, it makes your code pretty. ☺️
Offering a network of tutorials, a playground forum for development and programming, and articles on topics related to development and programming, Codrops is a go-to resource and an invaluable resource with which to begin coding, troubleshoot, or even be inspired with development.
It looks like this:
<!doctype html> <html> <head> <title>Hello world!</title> </head> <body> </body> </html>