Coding For Dummies Cheat Sheet - dummies
Cheat Sheet

Coding For Dummies Cheat Sheet

From Coding For Dummies

By Nikhil Abraham

Coding is equal parts vocabulary, logic, and syntax. Coding may at first seem intimidating, but with practice, though, it’s easy to get comfortable with its terminology, concepts, and structure. Understanding coding is not unlike learning a new language: Use it often enough and you’ll find yourself able to speak, think, and write in code. Still, it’s natural for beginners to have questions. There are many coding resources available to you, both on- and off-line. Ask around and you’ll find you’re not alone — many other people are learning. After all, coding is a never-ending education. Master one facet or another and a new one opens in front of you.

Coding Vocabulary

Coding has an extensive vocabulary that to laymen can seem like impenetrable techno-babble. Whether you’re reading coding-related article online or speaking to a developer at work, you may hear words that you have not heard before or that have a different meaning in a coding context. Here are some common vocabulary words to know:

  • General web development terms:

    • Server: A computer that hosts website code, and that “serves” website code when requested by a “client” computer. Servers usually sit in large warehouses with thousands of other servers, and are similar in size and power to your home computer.

    • Client: A device used to access a website, including desktop or laptop computers, tablets, or mobile phones.

    • Designer: An artistic professional who decides how a website will look and feel, along with the ways users will interact with the website — such as, for example, clicking, swiping, scrolling, and so on.

    • Wireframe: An illustration created by designers that show in detail a website’s layouts, images, and color schemes.

    • Developer: An engineering professional who writes code to turn wireframes into useable websites. Based on the type of code written, developers are referred to as front-end, back-end, or full stack.

    • Front-end: Everything you can see and click in a browser. Front-end developers write code in front-end languages like HTML, CSS, and JavaScript to create the website appearance.

    • Back-end: Everything that happens behind-the-scenes to make the front-end perform as intended. Back-end developers write code in back-end languages like Ruby or Python to create functionality like logging in users, storing user preferences, and retrieving data like comments on a photo.

  • Terms related to front-end languages:

    • *HTML (Hypertext Markup Language): A language used to place text, images, and other content on a webpage.

    • HTML tag: HTML instructions, usually appearing in pairs. Browsers apply special effects to text between an opening <element> and closing </element> HTML tag. For instance, the <h1> tag renders in a browser as a large bolded headline and can be used like this: <h1>Dewey beats Truman</h1>.

    • HTML attribute: Attributes or parameters for HTML tags that modify the tag’s behavior. Attributes are always placed in the opening HTML tag. For example, href is the attribute in the following anchor tag (used to create hyperlinks):

      <a href="http://www.google.com">Search engine</a>
    • CSS (Cascading Style Sheets): Code that modifies HTML on webpages and that controls the appearance of content by changing text size, image size, and other attributes.

    • JavaScript: Code that adds interactivity and animation to webpages. JavaScript also detects browser events such as mouse clicks, validates user input such as text entries, and retrieves data from external websites.

    • Variable: A storage location that’s given a name and that contains numerical data or text (referred to as strings) for later use.

    • If statement (conditional): A code instruction that tests a condition that usually includes variables, such as x < 18, and executes code you write when the condition is true.

    • Function: A name given to a group of programming statements for easy reference and use.

  • Terms related to back-end languages:

    • Ruby: An open-source programming language best known for use in web programming.

    • Rails: A framework designed to make creating webpages with Ruby easy.

    • Python: An open-source programming language used on the web, in scientific applications, and for data analysis.

Coding References and Resources

HTML, CSS, and JavaScript are the most common front-end coding languages. The following table lists some online resources, references, and tutorials to help you continue practicing all three languages.

Common Coding Mistakes

Code not working? Here are some common mistakes that can trip up even the most experienced coder. If your code won’t run, try running down this checklist to see if you have any of these errors:

  • Not having a closing HTML tag </element> after every opening HTML tag <element>.

  • Missing brackets < or > in HTML.

  • Missing curly braces, colons, or semicolons in CSS, as in the following:

    h1 {
      color: blue;
    }
  • Missing curly braces in JavaScript, especially for if statements.

  • Forgetting to have a pair of closing pair of quotes for every opening pair of quotes.

  • Having more than one opening and closing <html> tag, <head> tag, or <body> tag.

  • Putting HTML code in the CSS file or section, and putting CSS code in the HTML section. If the code deals with style and appearance, it’s likely CSS.

  • Not linking to your CSS file using the <script> tag, and so your CSS effects don’t render in the browser.

  • Misspelling a part of a command, as in <img scr=”logo.jpg”>, which is incorrect because the attribute is spelled src not scr.

  • Including attributes outside the opening HTML tag. For example, <img> src=”logo.jpg” is incorrect because the attribute is outside the opening image tag.