Skip to main content

Recap

I spoke a bit about the history of the modern internet in my post title Coding for Designers. Today, I’ll be going over the technicalities of it all. This is a quick overview.

While I do not use code in my day-to-day responsibilities, I still rely on my knowledge when speaking with development teams. Overall, it helps me align with them during hand-off processes as well as encourage them to recommend new and interesting ways to present content online. While I don’t believe flashy* designs are better than a well-thought interface. I do believe it inspires us and drives us to deliver the best solutions.

HTML is the bones

HTML – HyperText Markup Language

Defines the content and the structure of the webpage (aka document). This is the standard markup language for designing and creating websites.

  • Opening and closing tags
<image></image>
  • Child and parent relationship – The parent design element influences the elements within it.

HTML: head

  • The brain of the document
  • Its properties are not part of the physical layout of the page
  • JavaScript and CSS files are references here
  • It also contains the document’s title. On the current page, it’s “1% Better: programming for designers”

HTML: body

  • Represents the area from top left to the bottom right corner of the page
  • Almost everything that happens on a webpage
  • Holds the physical structure of the page

HTML: tags 

  • Using code helps people identify what type of information it is and how it’s displayed
  • Elements have closing tags: this means they hold content
<p>Blah blah</p>
  • Some elements don’t have closing tags
    • Tags such as “img” do not enclose any content so they do not need an opening and closing tags.
<img src="image.jpg">

HTML: image path

  • File-path is the relative location of a file. For example: if image.png is in the same folder as index.html, the code would be
<img src=”image.png”>
    • If it was in a folder named /files, then the path would be
<img src=”files/image.png”>
  • Excellent organization is crucial
    • Ensures you avoid broken links

HTML: anchors aka link

  • Certain attributes may only have use for specific tags
<a href="url.com">Click me</a>

HTML: hierarchy

2 types of hierarchy: block and inline.

  • Block elements structure the main parts of a page, by dividing your content into coherent blocks.
  • Inline elements differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or a few words.

CSS is the skin

CSS – Cascading Style Sheets

Rules that specify how elements appear on a page. Without CSS websites would look dull.

  • Property is the quality you want to change
    • Pre-defined terms that will change the way elements look and behave
  • Value is the amount of change
    • Properties can have either a specific value or take a broad range of values
  • Declaration – each property-value pair forms a declaration
  • Rules cascade down (get it?)

3 ways to use CSS

  • external – reference to a CSS file in Head
  • internal – includes styling in the HTML
  • inline – included styling within each element

CSS: .classes

  • Custom rules can be written using the class selector. To apply a class, we add a class attribute to our HTML element.
  • Class selection uses dot notation – “.”

CSS: #id

  • Custom rules for only one element.
  • Id selection uses hashtags – “#”
HTML
<div id="aloha"> <.....> </div>

<div class="hawaii"> <.....> </div>

CSS

#aloha { background-color: #ccc; padding: 20px } 
.hawaii { color: blue; font-weight: bold; }

CSS Box model

  • Describes the HTML object structure.
  • Defines the spacing on a webpage
  • The paradigm for how to describe things on the page

JavaScript is the nervous system

JS – the brains behind your web app. Javascript allows you to write small scripts to make your apps dynamic and interactive. It connects it all together.

  • Allows the site to interact with a server using text. It also allows the load of different languages.
  • It interprets your commands and responses to them.
  • This is where you start understanding how programs work.

API – Application Programming Interface

  • API is an agreed-upon way of getting information from one server to another.
  • Routines, protocols, and tools which specify how programs interact.
  • When we use APIs, we use them to route requests to a pre-defined set of responses.

They come in distinct types: get, post, put, patch, delete

  • get – Read – retrieves information
  • post – Create – creates new resources
  • put – Receive – receives capabilities
  • patch – Update/Modify – changes capabilities
  • delete – delete – deletes information

Function syntax – functions have keywords, name, argument(s), and a block. After defining a function, we must call it to execute its commands.

function sendMessage (msg) {
alert ("New message: " + msg);
}
SendMessage ("my message")

Argument
An argument is a piece of information that you give to a function. In this example, the “hello world” line is an argument.

console.log(“hello world”)

Defining functions

  • keyword – function
  • name – send message
  • argument – msg

Naming functions

sendMessage (“Hello world!”)

Build-in functions

console.log (“Hello world!”)
alert (“This is an alert.”)
confirm (“Click OK if this is correct”)
prompt (“Enter your name”)

JS: Data types

There are many types of data.

  • Numbers include all integers (positive and negative) it doesn’t include any decimals
  • Variables – objects that temporarily stores data to memory. Their names and arbitrary and the values can be any object.
  • Loops – allow us to iterate on objects repeatedly until it meets a certain condition.

Terminology

Stack – a bundle of software that comprises the back-end – everything from the operating system and web servers to APIs and programming framework. Basically, it’s the language that a website runs on.

Front end

  • HTML – webpages – bones
  • CSS – design – skin
  • Javascript and framework- dynamic scripts – the nervous system

Back end

  • App server – app logic – location of information
  • Web server – maintains files and content of the website
  • Database – organized way to store information – zip codes, first names

& others

  • Document – synonyms of webpage
  • Continuous integration – the practice of implementing minor changes and testing code to upkeep version control.
  • QA -responsible for identifying any faults in the process and correcting those weaknesses to ensure continual improvement,
  • Future-proofing – making sure you can easily add code or features without breaking existing functionality
  • Console Interpreter –
  • Multi-paradigm –  a programming language that is equally well-suited in more than one programming paradigm.
  • JS objects – containers for named values called properties or methods.

FAQ

What is the difference between webpages & web apps? 

The distinction is that a web app interacts with the user by manipulating data, but a website could be as simple as a single picture or line of text.

Why do pages allow you to inspect the code and alter it? What is the benefit?

At its core, a browser (Chrome, Firefox, etc…) is software that takes HTML and displays it as the website you see. When you open the inspector, you are looking at an HTML document that represents the website you are inspecting. This is useful if you are developing a website as you can look at what the browser is rendering and identify problems.

How is a web developer different from a software engineer/developer? 

All web developers are software developers, but there are other types of software developers.

What is REST API?

REST is an architecture style that helps standardize how we write APIs. It is a set of rules that makes sure anybody who wants to use our API knows what functions they can call.

What is a full-stack developer?

A Full-Stack developer writes both Front-End and Back-End code. In most junior-level jobs this dev will act as both a back-end and a front-end developer, which industry calls a Full-Stack developer.

…about as clear as mud.

One more thing...

This is a part of a series of posts about 1% Better. See more here:

1% better

Definition of UX Done in Agile

Most companies I've worked for incorporate agile or the intention of agile into the processes.…
1% better

Dev 101 for UX Designers

Recap I spoke a bit about the history of the modern internet in my post…