A Beginner’s Launchpad to Web Development

unsplash

Introduction

First, you will need to download software and skim through tutorials. As you become comfortable with HTML, CSS, and basic Javascript, you can build web apps using libraries and frameworks that take care of the hard parts of user interface. I will also point to ways you can create public open-source projects and collaborate with others to build software as a team.

Software

An Aerial View

Luiz Centenaro (Unsplash)

Through this overview, I will cover three fundamental technologies used on the Web: HTML, CSS, and Javascript.

HTML

<html>
<head>
<title>Title of The Page</title>
<head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph about something very interesting.</p>
</body>
</html>

The text content is structured into different parts called elements. There is no information about what the text should like though. Web browsers have a default basic style to present this HTML. Here is what the above looks like in a browser:

HTML rendered with default browser style

CSS

h1 { 
font-family: Arial;
color: blue;
text-align: center;
font-size: 36pt;
}
p {
color: orange;
font-style: italic;
font-weight: bold;
font-size: 14pt;
}

The h1 and p style rules define how the text within <h1> and <p> looks in the html. Here is the same html rendered with style:

The same HTML rendered with custom style

Javascript

<body id="body">
<h1 id="heading">This is a Heading</h1>
<p>This is a paragraph about something very interesting.</p>

<script language="javascript">
var heading = document.getElementById("heading");
var body = document.getElementById("body");

body.addEventListener("pointermove",function(event){
moveDiv(event);
});
function moveDiv(event){
heading.style.top = event.pageY;
heading.style.left = event.pageX;
}
</script>
</body>

And the result:

This short example offers a sense of what HTML, CSS and Javascript files look like, and now it is time for a more thorough introduction via beginner tutorials.

HTML, CSS, and Javascript Tutorials

  1. Create a folder in My Documents or other central location called projects, or any general name you want. You will put directories of projects in here to keep everything organized.

2. Make a new folder within that called introduction. You can use this to work through the tutorials.

3. Open your text editor (I will use Visual Studio in the screenshots) and use it to follow the tutorials. You could use the “Try it Yourself” buttons in the W3schools tutorials to load a browser code editor in your browser, but it is better to work with your own files that you can save, link with other files (e.g. CSS, Javascript), and become more comfortable with the text editor.

  1. At the first tutorial page, type the example text in Visual Studio Code.
  2. Save your file as index.html in your projects/introduction/ folder or whatever you named it.
  3. Drag the file into Chrome or Safari, and a new tab should open rendering that file in the browser.
  4. You should see parts of the text such as tag names (e.g. <head>) colors change; this is called syntax highlighting, and Visual Studio automatically sets the mode to html, because the file's extension is html.
  5. Anytime you revise the code, save it (Cmd+S for Mac or Ctrl+S for Win) in the text editor, then refresh (F5 or Ctrl+R(windows) or Cmd+R (mac)) in the browser.

Take Your Apps to the Next Level using Frameworks and Libraries

For example, to re-create the look of iOS or Android apps, you can use Framework7.

Framework7 website

jQuery is a Javascript library that simplifies code for tasks such as animation, and manipulating a web document live to change text or adjust CSS styles.

Version Control using Git

Word’s Track Changes feature

Version Control is a concept most commonly encountered in the medical research field as Microsoft Word’s Track Changes feature. In this workflow, one user can turn on Track Changes, revise the document, and send it back to someone for review. The recipient can accept or reject changes, but once those decisions are made, the edits becomes part of the document and the records of the changes disappear. If a team wants to keep the record of the changes, a common workaround used is to save a copy of the document with the changes tracked permanently. If another user wants to make edits, the user now has to email around the same file with their updated track changes.

This workflow becomes inefficient and unwieldy quickly. Imagine if a team of software developers used the same system, but instead of a single document among two or three people, there are millions of lines of code being edited by dozens to hundreds of engineers. The “Track Changes” approach is simply untenable.

Fortunately, there are more robust approaches to version control. The most popular version control software these days is called Git. The entire codebase of Microsoft Windows (3.5 million files, 300GB of code!) is maintained with Git and discussed on the Microsoft Blog.

Github is a popular platform that maintains software projects using Git and facilitates collaboration among teams. A basic overview article is available on HowToGeek. When building any software project, it is a good idea to use version control by hosting it on GitHub (or Bitbucket, a similar service that offers free private repositories).

There is a good GitHub tutorial in the GitHub Guides. The easiest way to work with a repository is using software with graphical user interfaces:

Troubleshooting

Photo by Hack Capital

Finding help for a coding problem is often easy with the large community of software developers that have a created a knowledge base on the Web. Generally, I search for my issue with Google and find an answer within the first few results. Often the results are from Stack Overflow, a forum website for all types of coding languages.

If your issue is not solved with a quick search, then you could post a question on the StackOverflow forums. SitePoint offers more forums for HTML, CSS, Javascript, and others.

And feel free to contact me with questions!

--

--

Physician in Spinal Cord Injury & Physical Medicine and Rehab @ Rocky Mountain Regional VAMC, Colorado. Interests: Rehab Engineering & software development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
George Marzloff

Physician in Spinal Cord Injury & Physical Medicine and Rehab @ Rocky Mountain Regional VAMC, Colorado. Interests: Rehab Engineering & software development