How I Started Coding
Six months ago, web development was a relatively foreign concept to me. I would see friends make dynamic animations or “inspect” published sites to temporally mess with the appearance and text, but I’d never seen the beginning of a page being made. The idea felt overwhelming.
Someone eventually did show me the basics of HTML and CSS — the languages for structure and design of almost all sites — but I remember thinking, “How can this ever possibly be used for appealing design?” I was looking at a white background with the default Times font in red carved into the top left corner of the site. Adding a marquee element which makes the content slide horizontally across the page unsurprising did little to convince me that I was capable of making a professional website. Side note: if you’re curious about this tag, try googling “marquee html” and you’ll see the absurdity of this thing.
My background
Up until that point, my life was entirely consumed by the medical field. I’d been training to be a paramedic in Canada for three years with internships on the ambulance and a part-time job as a first responder at events such as raves, circuses, hockey games, and music festivals. I never would’ve imagined that web design would soon be my full-time job.
I’m an extraverted adventure seeker and nature lover who grew up in a household of photographers. Naturally, I got my first camera at 13, and by 18 I was hitchhiking across Canada with my DLSR to capture the stories of the people who were part of my cross-country journey. My first motivation to try web design came from wanting to share my 5,000 kilometre hitchhiking story. I tried using themes on Wordpress, but felt too limited, so three years later I learnt how to code instead.
The challenges of getting started
When I first started making websites, I would regularly forget to add closing divs, my indentations were horribly off, and I constantly lost track of my links to documents or images in a folder. These apparently minor mistakes would however cause nothing on the page to load. Something as simple as a missing forward slash can make an entire section crash. These frustrating mistakes are now the most appealing part of web design for me and make my job addictive for me, though they happen far less frequently. Just like a puzzle, there’s something so rewarding about resolving a bug, but if you’re a beginner programmer, understanding the general layout and the different elements is key to minimizing these faults.
The basics of coding
There are multiple programming languages that can be used to make a website, but the two fundamental standards are HTML and CSS. Whereas HTML dictates the layout of the final rendered page the user sees in their browser, CSS determines the design. All HTML tags within <body> can be modified visually using CSS, and I’ve found that it’s best to keep the files separate. To link your CSS file to the HTML, add this line to the <head> tag under the <title> and <meta> elements:
<link rel="stylesheet" type="text/css" href=“folder/inside-folder/css-file-name.css”>
Most opening tags have a closing tag to mark the end of that section of the page, and sandwiched between the tags are the children. Together, they form an element which looks something like this:
<divclass=“nameofdiv”>
<img src=“static/images/1.jpg” class=“portfolio-image”>
</div>
In this example, my tag is a <div> which refers to a section within the <body>. You can name any tag using a class and then link to it in CSS to change the background colour, dimensions, font size, etc. This is the format in CSS:
.portfolio-image {
width: 100%;
margin-top: 80px;
border-radius: 6px;
box-shadow: 2px 4px 10px -5px rgba(148,148,148,1);
}
</hr> = horizontal line, self-closing</br> = break, referring to the spacing between elements, self-closing<img href=“folder/insidefolder/yourimage.format”> = the link to your image, self-closing<h1> = main header, must be paired with a closing tag to mark the end of the header<h2> = header two, must have closing tag<p> = paragraph, must have closing tag<a href=“link”> = the URL to the linked page, must have closing tag
Why web design is appealing to me
With living in a fast-paced world, being able to quickly and easily gain information from a website is vital. Few people have the patience to look through pages of visually unpleasing text or crammed information, which is where layout comes into play. Creating a straight-forward user experience is critical for the design aspect of web development, and ultimately what makes coding satisfying for me.
As a beginner, in order to create a unique site, first make a standard one where the layout matches the user’s expectations. The fundamental features of the majority of websites are as follows:
- navigation menu at the top of the page (known as a navbar,
<nav>)
- logo and name to the left of the navbar which redirect back to the homepage
- title (also known as a header,
<h1>) with text (or a paragraph, <p>)
- call-to-action at the top and bottom of the page
- images
The following is the basic structure of an HTML file. I do all of my web development on the platform Sublime, and use Bootstrap to facilitate making the site responsive, ie. causing the page content to resize as the width of the page changes. The general layout within my NAMEOFPROJECT.com folder is: html files & static folder > css folder & images folder. Therefore, in order to link to my CSS Bootstrap file, for instance, I would need to specify its location relative to my HTML files, in this case static/css/bootstrap.min.css.
First exciting things learned
Realizing that I could use other sites as inspiration played a major role in developing my own style as a web designer. I still love getting ideas from different webpages for features and layout, and seeing what works. In general, the websites that appeal to me the most are concise, have even margins, and consist of warm colours, such as the following:
I was shocked to find out that hundreds of sites offer open-source code where you can download effects for free. One of the first that I merged into my own webpage was a hover effect by codrops. I started off by downloading the source via the article and deleting elements from the files until only the effect that I needed remained. Only then did I add it to my pre-existing code.
Hardest thing to do so far
Learning the dynamic programming language Javascript has been my biggest challenge so far, mainly due to my comfort with HTML, CSS, and simply Googling for the Javascript answer instead of trying to understand the code. Javascript allows for user interactions on sites, such as submitting a form, receiving an alert on a page or having a slideshow on a timer, all of which is important for complex sites. There are still so many other languages to learn, and I look forward to dedicating more time to understanding this one to start.
Huge thanks to Nick for introducing me to this wild world of coding.
How I Started Coding
Six months ago, web development was a relatively foreign concept to me. I would see friends make dynamic animations or “inspect” published sites to temporally mess with the appearance and text, but I’d never seen the beginning of a page being made. The idea felt overwhelming.
Someone eventually did show me the basics of HTML and CSS — the languages for structure and design of almost all sites — but I remember thinking, “How can this ever possibly be used for appealing design?” I was looking at a white background with the default Times font in red carved into the top left corner of the site. Adding a marquee element which makes the content slide horizontally across the page unsurprising did little to convince me that I was capable of making a professional website. Side note: if you’re curious about this tag, try googling “marquee html” and you’ll see the absurdity of this thing.
My background
Up until that point, my life was entirely consumed by the medical field. I’d been training to be a paramedic in Canada for three years with internships on the ambulance and a part-time job as a first responder at events such as raves, circuses, hockey games, and music festivals. I never would’ve imagined that web design would soon be my full-time job.
I’m an extraverted adventure seeker and nature lover who grew up in a household of photographers. Naturally, I got my first camera at 13, and by 18 I was hitchhiking across Canada with my DLSR to capture the stories of the people who were part of my cross-country journey. My first motivation to try web design came from wanting to share my 5,000 kilometre hitchhiking story. I tried using themes on Wordpress, but felt too limited, so three years later I learnt how to code instead.
The challenges of getting started
When I first started making websites, I would regularly forget to add closing divs, my indentations were horribly off, and I constantly lost track of my links to documents or images in a folder. These apparently minor mistakes would however cause nothing on the page to load. Something as simple as a missing forward slash can make an entire section crash. These frustrating mistakes are now the most appealing part of web design for me and make my job addictive for me, though they happen far less frequently. Just like a puzzle, there’s something so rewarding about resolving a bug, but if you’re a beginner programmer, understanding the general layout and the different elements is key to minimizing these faults.
The basics of coding
There are multiple programming languages that can be used to make a website, but the two fundamental standards are HTML and CSS. Whereas HTML dictates the layout of the final rendered page the user sees in their browser, CSS determines the design. All HTML tags within
<body>can be modified visually using CSS, and I’ve found that it’s best to keep the files separate. To link your CSS file to the HTML, add this line to the<head>tag under the<title>and<meta>elements:<link rel="stylesheet" type="text/css" href=“folder/inside-folder/css-file-name.css”>Most opening tags have a closing tag to mark the end of that section of the page, and sandwiched between the tags are the children. Together, they form an element which looks something like this:
<divclass=“nameofdiv”> <img src=“static/images/1.jpg” class=“portfolio-image”> </div>In this example, my tag is a
<div>which refers to a section within the<body>. You can name any tag using a class and then link to it in CSS to change the background colour, dimensions, font size, etc. This is the format in CSS:.portfolio-image { width: 100%; margin-top: 80px; border-radius: 6px; box-shadow: 2px 4px 10px -5px rgba(148,148,148,1); }</hr>= horizontal line, self-closing</br>= break, referring to the spacing between elements, self-closing<img href=“folder/insidefolder/yourimage.format”>= the link to your image, self-closing<h1>= main header, must be paired with a closing tag to mark the end of the header<h2>= header two, must have closing tag<p>= paragraph, must have closing tag<a href=“link”>= the URL to the linked page, must have closing tagWhy web design is appealing to me
With living in a fast-paced world, being able to quickly and easily gain information from a website is vital. Few people have the patience to look through pages of visually unpleasing text or crammed information, which is where layout comes into play. Creating a straight-forward user experience is critical for the design aspect of web development, and ultimately what makes coding satisfying for me.
As a beginner, in order to create a unique site, first make a standard one where the layout matches the user’s expectations. The fundamental features of the majority of websites are as follows:
<nav>)<h1>) with text (or a paragraph,<p>)The following is the basic structure of an HTML file. I do all of my web development on the platform Sublime, and use Bootstrap to facilitate making the site responsive, ie. causing the page content to resize as the width of the page changes. The general layout within my NAMEOFPROJECT.com folder is: html files & static folder > css folder & images folder. Therefore, in order to link to my CSS Bootstrap file, for instance, I would need to specify its location relative to my HTML files, in this case
static/css/bootstrap.min.css.First exciting things learned
Realizing that I could use other sites as inspiration played a major role in developing my own style as a web designer. I still love getting ideas from different webpages for features and layout, and seeing what works. In general, the websites that appeal to me the most are concise, have even margins, and consist of warm colours, such as the following:
Native Campervans
Donal Skehan
The Discoverer
I was shocked to find out that hundreds of sites offer open-source code where you can download effects for free. One of the first that I merged into my own webpage was a hover effect by codrops. I started off by downloading the source via the article and deleting elements from the files until only the effect that I needed remained. Only then did I add it to my pre-existing code.
Hardest thing to do so far
Learning the dynamic programming language Javascript has been my biggest challenge so far, mainly due to my comfort with HTML, CSS, and simply Googling for the Javascript answer instead of trying to understand the code. Javascript allows for user interactions on sites, such as submitting a form, receiving an alert on a page or having a slideshow on a timer, all of which is important for complex sites. There are still so many other languages to learn, and I look forward to dedicating more time to understanding this one to start.
Huge thanks to Nick for introducing me to this wild world of coding.