A Beginners Guide to Coding Principles
Learning code is tough, right? Trust me, I know! I vividly remember starting IT lessons in High School and the teacher attempting to get a bunch of teenagers into the world of coding. Of course, at that age, it couldn't have been more boring or impractical for us at the time and looking back, I SO wish I paid attention and actually explored the world of HTML and CSS coding - little was I to know I would end up starting a business on those very foundations!
Of course, 10 years later, I found myself in the position of starting my own business. At first, I got by on what I thought were the best thing for my business; drag and drop website builders...ahem, Wix, I'm talking about you. My business quickly flourished and as many people know, after being in the business community I found myself gaining more and more knowledge on why this was not only not great for my business, but it could also be detrimental to it's success and SEO rankings.
I quickly found myself in a dilemma - hire a web designer (with money I didn't really have) or learn myself. The latter being the best decision I ever made for not only my business, but myself.
As you may know, or may find out, 'coding' has many different languages. From CSS, HTML and JQuery to PHP, Python, Ruby and more, it's easy to see why people find it a daunting task to learn and undertake. I, myself, have not even explored half of the languages available within this world and as I know from both myself and other website designers, we are always learning and growing.
So, here's what you need to know before getting started with basic coding principles.
1. front end and back end development - what are they?
Before you leap into the world of design and coding, there are some roles that you need to understand in order to apply these to the coding languages you wish to face.
Front end development
A front end developer (like myself) is someone who codes and creates visual elements of the website. We create the elements in which the users see and react too as well as the overall aesthetic of the site. We are commonly referred to as 'Web Designers' however, this may also refer to someone who only builds the design in PhotoShop. Our languages of preference are CSS (Cascading Style Sheets), HTML and JQuery.
A front end developer often works on a static site that does not adhere to database and structural changes. Think of us as the personal stylists of the website; we never make the framework of the garment (e.g. the stitching and sewing) but instead, we utilise the garment and successfully style it to suit the wearer.
Back End Development
A back end developer has the more complex job of ensuring everything within the website works as it should. These are on the 'server-side' of the website and deal with the side that the users cannot see - hence, back end. They deal with more in-depth coding commonly referred too as programming and developing and deal with the structure and dynamic ability of a website.
A back end developer is the creator of the garment, from the stitching to the hemming, they understand the patterns and templates and design the garments based on the users shape and size.
2. what's the difference between css, html and jquery?
Simply put, HTML (Hypertext Markup Language) is the skeletal backbone of any webpage and is what tells the website where element will be and the structure of each page. A HTML markup consists of a series of tags and symbols such as <body> which tells the site where the elements within these tags begin and end.
A HTML markup would look something like this:
CSS (Cascading Style Sheets) is a language used to describe and show the way HTML looks within a web page. As outlined above, HTML is the structural foundations which tells the website what to display and the CSS tells the website how to look.
This can include font management, colours, sizing, formatting and styling of HTML within a page. For example, your HTML code contains a header tag (h1) however without any styling, this won't look any different to your standard body text. By using the heading class; which in this example is h1, we can target the styling of this element so that it appears differently.
This would look something like this: