# Frequently Asked Questions ## November, 2022 Update Instead of Heroku URLs to retrieve the data for the David Chu's China Bistro restraurant website, which we build at the end of the course, we are now using Google Firebase. The new URL is https://coursera-jhu-default-rtdb.firebaseio.com/categories.json for retrieving all categories of items and https://coursera-jhu-default-rtdb.firebaseio.com/menu_items/{category_short_name}.json for retrieving all items for a single category (e.g., https://coursera-jhu-default-rtdb.firebaseio.com/menu_items/L.json for all items for the `L` Lunch category). ## Most Important! - [How to ask and get your question answered - A MUST READ!](#q-how-to-ask-and-get-your-question-answered-a-must-read) ## Computer and Environment Setup - [What is a terminal and how do I open it?](#q-what-is-a-terminal-and-how-do-i-open-it) - [What is a command prompt?](#q-what-is-a-command-prompt) - [Why does `ls` not work in the terminal?](#q-why-does-ls-not-work-in-the-terminal) - [What is meant by a ‘path’?](#q-what-is-meant-by-a-path) - [The terminal is saying that it cannot find the path I supplied, what is going on?](#q-the-terminal-is-saying-that-it-cannot-find-the-path-i-supplied-what-is-going-on) - [I followed the instructions to setup my computer as presented in the video, but I am still having problems. What could be wrong?](#q-i-followed-the-instructions-to-setup-my-computer-as-presented-in-the-video-but-i-am-still-having-problems--what-could-be-wrong) ## Sublime Text, browser-sync, and Other Course Tools - [I am unable to install browser-sync](#q-i-am-unable-to-install-browser-sync) - [How do I use the Sublime Text HTML shortcuts demonstrated in the lecture videos?](#q-how-do-i-use-the-sublime-text-html-shortcuts-demonstrated-in-the-lecture-videos) - [Sublime text is not auto-completing after I hit `ctrl+space`](#q-sublime-text-is-not-auto-completing-after-i-press-ctrlspace) - [How do I edit multiple lines at the same time in Sublime Text?](#q-how-do-i-edit-multiple-lines-at-the-same-time-in-sublime-text) - [What Sublime Text packages or extensions or plugins does Yaakov use in the Lecture videos?](#q-what-sublime-text-packages-or-extensions-or-plugins-does-yaakov-use-in-the-lecture-videos) - [I’m making changes to my CSS and JavaScript and also running browser-sync, why aren’t my changes showing up in the browser?](#q-im-making-changes-to-my-css-and-javascript-and-also-running-browser-sync-why-arent-my-changes-showing-up-in-the-browser) ## Git - [I am unable to clone the github repo or upload my assignment](#q-i-am-unable-to-clone-the-github-repo-or-upload-my-assignment) - [While typing in my password during an attempt to push files to GitHub, nothing is showing up while I type. What is going on?](#q-while-typing-in-my-password-during-an-attempt-to-push-files-to-github-nothing-is-showing-up-while-i-type--what-is-going-on) - [Why am I seeing “Please tell me who you are” when trying to commit to git?](#q-why-am-i-seeing-please-tell-me-who-you-are-when-trying-to-commit-to-git) - [Where is the link to clone the repository on GitHub? The page looks different than what is shown in the video.](#q-where-is-the-link-to-clone-the-repository-on-github-the-page-looks-different-than-what-is-shown-in-the-video) - [Where is the “Launch automatic page generator” button? The page looks different than what is shown in the video.](#q-where-is-the-launch-automatic-page-generator-button-the-page-looks-different-than-what-is-shown-in-the-video) - [Where is the `gh-pages` branch?](#q-where-is-the-gh-pages-branch) ## HTML, CSS, and JavaScript - [My CSS is not loading for my web page, what is wrong?](#q--my-css-is-not-loading-for-my-web-page-what-is-wrong) - [I am using a responsive framework, and when I add the margins to the `div` elements, they flow beneath each other upon resizing the page. What am I doing wrong?](#q-i-am-using-a-responsive-framework-but-when-i-add-the-margins-to-the-div-elements-they-flow-beneath-each-other-upon-resizing-the-page-what-am-i-doing-wrong) - [When viewing my page in tablet mode (narrower screen width), my 'nav' button does not work. What is wrong?](#q-when-viewing-my-page-in-tablet-mode-narrower-screen-width-my-nav-button-does-not-work--what-is-wrong) - [My hamburger button does not show up in the mobile view. Even though it shows up, when I click on it, the drop-down menu does not appear. What is wrong?](#q-my-hamburger-button-does-not-show-up-in-the-mobile-view-even-though-it-shows-up-when-i-click-on-it-the-drop-down-menu-does-not-appear-what-is-wrong) ## Lectures and Course Content - [How do I upgrade to receive a certificate or specialization upon completion?](#q-how-do-i-upgrade-to-receive-a-certificate-or-specialization-upon-completion) - [Where can I download the source code and lecture notes for the class?](#q-where-can-i-download-the-source-code-and-lecture-notes-for-the-class) - [In the lecture videos, Yaakov downloads and installs git version 2.6.3, do I need that exact version?](#q-in-the-lecture-videos-yaakov-downloads-and-installs-git-version-263-do-i-need-that-exact-version) - [Why are the lecture videos streaming in low quality?](#q-why-are-the-lecture-videos-streaming-in-low-quality) - [My quiz is not graded correctly! or Graded quiz shows wrong answer as correct answer!](#q-my-quiz-is-not-graded-correctly-or-graded-quiz-shows-wrong-answer-as-correct-answer) - [I am getting `XMLHttpRequest cannot load file:///somepath` error. What am I doing wrong?](#q-i-am-getting-xmlhttprequest-cannot-load-filesomepath-error-what-am-i-doing-wrong) *** ### Most Important! #### **Q: How to ask and get your question answered: A MUST READ!** A: There is a simple theme to this answer: Help others help you! Before I dive into how you should ask your question, let me put things into perspective. You are asking others to spend their time helping you figure out your issue for *free*. You should do all you can to help them minimize the time they spend helping you upfront. It's the *least* you can do. Asking generic questions like "My code doesn't work. Please help!" is basically useless as you are inviting people to spend their time asking you basics like: "Ok, *what* doesn't work? Where is your code?" However, even if you do provide some details, they must be the right details so others can help you. Here is a general guide as to what you should provide: 1. Describe your issue with specifics. Don't just say "it doesn't work." Explain what isn't working correctly with steps of what you did when you are experiencing this behavior. 2. Commit your code with the issue to GitHub and provide 2 links: * Link to your repository where people can clone your code and quickly look at it on their own machines. * Link to your *deployed* website (using github.io, i.e., GitHub Pages) so people don't have to spend their time trying to deploy your site just to see for themselves what's going on. *Rarely (but it happens), it's appropriate to simply provide a **small** code snippet that you have a question about. When you do, make sure to use the <> code formatter on Coursera to place your code snippet into the post. Don't just copy/paste it straight into the text of the post. It's very hard to read.* 3. If you are having issues with installation, GitHub, etc., make sure to describe what you did with enough detail, and if there are errors or logs that you saw, you need to include those in your question. Simply saying "It doesn't let me push my code to the repository" won't do. If you tried to push the code and it didn't work, there were error messages that were displayed. Provide those messages, including the exact command you used. **Last, but certainly not least!** I can't recount every scenario that can occur in this short guide. **Use common sense.** Ask yourself: If I came up to a total stranger in this class and showed them my post, would they have enough information to help me or would they for sure have to ask me something? If they would have to ask you something, you are not done with your post. Yes, of course, there are times when you yourself don't know what you don't know. That's ok. Just put in an honest effort to HELP OTHERS HELP YOU. ### Computer and Environment Setup #### **Q: What is a terminal and how do I open it?** A: Most users of modern operating systems are familiar with clicking on icons to start programs or to copy and delete files. A terminal (or shell) is a program that comes with your operating system but allows a user to enter textual commands to perform computing tasks, rather than interacting with icons. The terminal provides what is known as the command line interface, where commands are submitted at a command prompt. **For Microsoft Windows the terminal can be run by following these instructions:** On the keyboard, type `⊞ Win` + `r` at the same time. 1. In the Open: field type **cmd** followed by pressing the `enter` key. 2. A window with a black background, titled _Command Prompt_, should now be visible. In Microsoft Windows, the terminal program is also referred to as the _Command Prompt_. **For Mac OS X:** 1. On the keyboard, press `command + space` to do a Spotlight search. 2. Type **terminal** into Spotlight search and press the `enter` key. #### **Q: What is a command prompt?** A: Once a terminal is open, a small, cryptic looking set of characters is typically displayed at the bottom left of the terminal window; This is called the command prompt. The look of the prompt varies between operating systems, but below are two examples similar to what one might encounter: **Example 1:** A Unix/Linux style command prompt (widely varies) showing the current path as the home directory, denoted by `~`. [Bob@coursera ~]$ **Example 2:** A Microsoft Windows style command prompt showing the current path as \Users\Bob in the C: drive. C:\Users\Bob> In the examples above, Bob represents the username of the person who started the terminal program. On your system, you would likely see your username in the command prompt. The command prompt tells the user that the terminal program is in a state such that it is ready for taking typed commands from the user. After a command is typed at the command prompt, the user must hit the Enter key to submit the command for the computer to run it. #### **Q: Why does `ls` not work in the terminal?** A: `ls` is a command used only in Unix, Linux, and Mac OS X operating systems. If you are running Microsoft Windows you will have to use `dir` to list the contents of a folder. #### **Q: What is meant by a ‘path’?** A: Before computers, paper files were often put in folders (often to be placed in a filing cabinet). Similarly, your operating system (e.g. Microsoft Windows or Mac OS X) lets you put files (e.g. Documents, Music, Images, etc.) inside a folder. This provides a way of keeping your files organized and easier to find when needed. But, the computer lets you take it a step further, allowing you to put folders inside of folders. Within the terminal, folder names are separated by a slash, `/` in Unix/Linux and Mac OS X, and `\` in Microsoft Windows. As an example, assume we have a folder named Website, and inside of that folder, another folder named Resources. Lastly, assume that inside the Resources folder there exists a file named coursera.html. The path is a composition of these folder names used to navigate to a file resource. So, in our example, in Microsoft Windows, the path to our coursera.html would be: C:\Website\Resources\coursera.html And in Unix and Mac OS X /Website/Resources/coursera.html **NOTE:** Be sure to remember that the slashes slant in different directions for different operating systems. #### **Q: The terminal is saying that it cannot find the path I supplied, what is going on?** A: When running commands that deal with paths such as `ls` or `dir` it’s important to use the proper path separator symbol. On Unix (Linux and Mac OS X) systems this would be a forward slash `/` and on Windows the path separator is a backslash `\`. So, for example: [Bob@Coursera ~]$ ls site\ > The `\` symbol used above on a Mac OS X terminal indicates a line wrap instructing the terminal to anticipate more text to be include in the current command, but on the next line. Rather than using the `\` replace this with `/` to print the listing of files under site: [Bob@Coursera ~]$ ls site/ css index.html js This same rule applies to Windows but in Windows the backslash `\` should be used. #### **Q: I followed the instructions to setup my computer, as presented in the video, but I am still having problems. What could be wrong?** A: Keep in mind, that the directions presented in the video assume you have the permissions on your computer's operating system (e.g. Microsoft Windows or Mac OS X) that allow you to install software. This kind of privilege is often tied to what is known as an administrative account. If you are trying to perform these installations on your work computer but are unable to do so, not having the proper permissions is likely the problem. Contact your corporate help desk to see if, first, there is a problem with using your company's resources for the class during appropriate times (e.g. on your lunch break) and if not, if they would be willing to help you install the needed software. However, even if you are able to successfully install the needed software tools (git, Sublime, NodeJS, browser-sync, etc.) other factors can affect the way those programs operate, possibly explaining some of the errors you are experiencing. The npm program, used to install browser-sync, requires that your computer can reach a specific site on the internet to download the browser-sync program for installation. If you are behind a firewall (a program that runs within your network, usually at schools or workplaces, and controls the locations you can reach on the internet), you might experience errors when npm tries to reach the needed location. Likewise, a firewall could also potentially block access to GitHub. Again, if a permissions problem has been ruled out and your workplace does not mind you using their computer and network for this class, speak to your corporation's network administrator to see if the firewall is the problem. Lastly, though you may be running the same operating system as that shown in the video and have perfectly followed the instructions, each computer environment can have its own set of unique factors that might be responsible for the problems you are experiencing. This could be the result of a difference in the [path](#q-what-is-meant-by-a-path) of other installed supporting programs, a difference in the versions of installed supporting programs, or operating system updates that have been installed, to name only a few. Given the large number of students enrolled in this course, it is not possible for the instructor or the teaching assistants to provide help outside of the recommendations listed above as our time must be spent addressing questions that are within the scope of course content. ---------- ### **Sublime Text, browser-sync, and Other Course Tools** #### **Q: I am unable to install browser-sync** A: A very common reason for this is that you are trying to install it on a work or school computer and you are behind a proxy. You will see errors like: npm ERR! network getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443 [...] npm ERR! network connect ETIMEDOUT npm ERR! network This is most likely not a problem with npm itself npm ERR! network and is related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. or npm ERR! Error: tunneling socket could not be established, cause=getaddrinfo ENOENT There will be a load of other stuff but these are key parts of the error. The simplest solution is to use a computer which is not behind a proxy, but if this is not possible then you will need to obtain the proxy details from your IT department and configure npm to use them as follows: npm config set proxy http://proxy.company.com:proxyport npm config set https-proxy http://proxy.company.com:proxyport where 'proxy.company.com' is the proxy server namoe or IP address supplied by your IT department, and proxyport is the port number they supply. Note that if you need to supply credentials to the proxy (again, IT should be able to advise) then you should add them to the proxy address: npm config set proxy http://username:password@proxy.company.com:proxyport npm config set https-proxy http://username:password@proxy.company.com:proxyport You may also find this link useful: http://digitaldrummerj.me/proxy-configurations/#npm If you continue to have problems with this, as there are some variations depending on your particular environment then you may find google to be your best source of help as many other people have had similar problems. Finally, please note that if you do use a proxy then you will most likely have to configure git to use proxy settings too so please see this answer: [I am unable to clone the github repo or upload my assignment](#q-i-am-unable-to-clone-the-github-repo-or-upload-my-assignment). #### **Q: How do I use the Sublime Text HTML shortcuts demonstrated in the lecture videos?** A: These shortcuts require the Emmet plugin: https://packagecontrol.io/packages/Emmet. Be sure to follow the directions provided with Emmet to ensure it is property installed and ready to use with Sublime Text. Examples on how to use Emmet are as follows (**NOTE:** The => is only used to map the typed text example to the result. You do not need to type the => or the text shown after it): Type to get div =>
// cursor right in the div text spot div.foo => div#bar => div.foo#bar => #### **Q: Sublime text is not auto-completing after I press `ctrl+space`** A: One reason this may not work is because the file has not yet been saved with the extension of `.html`. Go ahead and save you file with a name of your choice, but be sure to add the `.html` extension on it. Another alternative is to manually tell Sublime that this is an HTML document. You can do that by selecting "Plain Text," from the menu on the bottom right of Sublime, and selecting HTML. Once either of the above two methods have been completed, you will be able to type 'html', followed by `ctrl+space` on the keyboard, to generate a basic HTML template document. Another reason is that you may have multiple input sources enabled (e.g. because you type in a non-English language). On a Mac, the default keyboard shortcut for switching input sources is `ctrl+space` which conflicts with the Sublime Text shortcut. You can fix this by mapping the Sublime shortcut to something else, like `alt+space`, using [these instructions](https://forum.sublimetext.com/t/solved-ctrl-space-doesnt-complete/7246/4). #### **Q: How do I edit multiple lines at the same time in Sublime Text?** A: In Microsoft Windows, hold down the **`ctrl`** key on the keyboard while performing a select as you typically do (left mouse button down while moving the mouse over the text you want to select, and then releasing the left mouse button). Be sure to keep **`ctrl`** down and you can move to another spot within the text and repeat the step with the mouse to select yet another section of text. #### **Q: What Sublime Text packages or extensions or plugins does Yaakov use in the Lecture videos?** A: Here is the list of Sublime packages that I was using when recording the lectures: * Install this FIRST: [Package Control](https://packagecontrol.io/packages/Package%20Control), then install everything else using Package Control * [AngularJS](https://packagecontrol.io/packages/AngularJS) * [CSS Extended Completions](https://packagecontrol.io/packages/CSS%20Extended%20Completions) * [Emmet](https://packagecontrol.io/packages/Emmet) * [Git](https://packagecontrol.io/packages/Git) * [GitGutter](https://packagecontrol.io/packages/GitGutter) * [Gutter Color](https://packagecontrol.io/packages/Gutter%20Color) * [Highlight](https://packagecontrol.io/packages/Highlight) * [HTML-CSS-JS Prettify](https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify) * [SideBarEnhancements](https://packagecontrol.io/packages/SideBarEnhancements) The Sublime Text theme I am using is Monokai. It comes with Sublime Text by default. #### **Q: I’m making changes to my CSS and JavaScript and also running browser-sync, why aren’t my changes showing up in the browser?** A: If the following command was run: browser-sync start --server --directory --files "*" Then browser-sync will only reload changes made in that current path. For example, say we had the following setup under the site directory (Mac OS X): [Bob@Coursera ~]$ ls -R site/ css index.html js site//css: default.css site//js: myscript.js And I’m running the previous browser-sync command from site/ then any changes to the default.css file or myscript.js file will not be picked up. The only files to be picked up by browser-sync will be located directly under site/ In order for browser-sync to reload changes to the browser for additional subfolders (subdirectories) and files within those subfolders one must set the browser-sync path search to be recursive by typing: browser-sync start --server --directory --files "**/*" ---------- ### **Git** #### **Q: I am unable to clone the github repo or upload my assignment** A: A very common reason for this is that you are using a computer at work or school computer and you are behind a proxy. You will see errors like: fatal: unable to access 'https://github.com/Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, molestias, cumque! Odio illum quisquam sint porro exercitationem natus in consectetur blanditiis sunt, dolor aliquam magnam necessitatibus nobis mollitia quo obcaecati!