So you want to code ? - Learning Resources

by Ange Tuteur February 1st 2016, 12:40 pm

Managing your forum takes more than just changing a few options in the Administration Panel. If you want to set your forum apart from others by adding new features, designs, etc.. then you'll need to learn the basics of web development. This topic will serve as a starting point by providing you with numerous sources to learn the skills necessary for becoming a web developer.

Note however this road is not an easy one.. it will require persistence, patience, and most of all.. practice ! ( or the three P's as I like to call it Cool

) It's recommended that you study at your own pace, re-read as necessary, and study from multiple sources ! Below will be a path with links to different learning resources. It is recommended that you learn one skill at a time, starting with the first and then moving onto the next skill when you're satisfied with yourself.

 Skills
The skills below are listed in the order that they should be studied in, and are the skills which can be utilized to improve your Forumotion forum.

 Tools
Below are various tools that you can utilize to make working with code a whole lot easier.

1. HTML - Hyper Text Markup Language

Learning Difficulty : Easy

HTML is the building blocks of webpages -- the skeleton so to speak -- and is used to form the structure and content of a site. This skill is absolutely necessary for building HTML pages, widgets, editing templates, etc.. for your forum, so it's recommend that you start with learning this language. Don't be intimidated though, HTML works very similarly to the bbcode we use when posting messages on the forum, so you shouldn't have too much trouble.

Below you'll find some links to different websites for learning HTML.

Beginner References
Advanced References
1. Mozilla Developer Network - HTML Reference

2. CSS - Cascading Style Sheets

Learning Difficulty : Normal

CSS is generally used to make your HTML "pretty" by giving it colors, changing the font style, size, etc.. ( think of it as paint or makeup So you want to code ? - Learning Resources Naughty

So you want to code ? - Learning Resources Naughty

) If you plan on designing awesome forum themes you definitely want to learn how to wield CSS, because you'll be using it a lot in your forum's stylesheet ! CSS is written very differently from HTML, so make sure you pay close attention to the rules for writing it ; Generally speaking it's like learning the grammar for a spoken language, but don't worry it's not that hard. Mr. Green

Below you'll find some links to different websites for learning CSS.

Beginner References
Advanced References
1. Mozilla Developer Network - CSS Reference

3. JavaScript

Learning Difficulty : Hard

JavaScript is the programming language for webpages. It allows you to make dynamic webpages, plugins, and even games ! JavaScript is used for a lot of things -- the toolbar, notifications, and the text editor on the forum for example. JS is a full fledged programming language, so if you've never used a programming language before you might have some difficulties at first. Don't lose hope though, it takes a lot of time and dedication to learn JavaScript, the best thing to do is take it one step at a time by practicing and experimenting everyday. Wink

Below you'll find some links to different websites for learning JavaScript.

Beginner References
Advanced References
1. Mozilla Developer Network - JavaScript Reference

4. jQuery

Learning Difficulty : Hard

jQuery is a JavaScript library which simplifies various aspects of JavaScript and is installed on every Forumotion forum. Think of jQuery as an "extension" for JavaScript. If you've managed to master JavaScript then this library will serve as a useful "helper."

Beginner References
1. W3Schools - jQuery Tutorial
2. Codecademy - jQuery Tutorial
Advanced References
1. jQuery Learning Center
2. jQuery API Documentation

Developer Tools

The developer tools are one of your most powerful weapons when it comes to web development. It allows you to debug and run JavaScript, inspect the structure of the web page, and even edit the existing CSS styles all in the browser. Most modern browsers come equipped with such a tool and it can be accessed by pressing the F12 key on your keyboard. The tools vary based on the browser you're using, but the differences are small, as such I'll be using the Google Chrome devtools. Below I'll go through the three most important tools that you'll be using on your forum.

1. DOM Inspector / Elements
The inspector allows you to view the HTML structure of the web page in the left panel as well as the styles applied to the elements in the right panel. You can select elements directly from the page to find exactly what you're looking for. The inspector is extremely useful in knowing the classes, ids, and tag names of elements. These attributes can then be used in CSS to style the elements or JavaScript to manipulate them.

So you want to code ? - Learning Resources Captur10

2. Sources / Style Editor
The sources tab in Chrome ( Styles in Firefox ) allows you to view all the files on a website such as JavaScripts, HTML, and CSS files. In this segment we'll focus on the CSS file, because editing it is extremely useful when it comes to designing. Once you know the class, id, or tag of an element you can then style it via CSS. In the example below I style elements with the

Code:: .statLabel

classname, directly on the page without refreshing. Editing the CSS file on the current page allows you to get a real time preview of your styles, which makes the console a very useful tool for designers.

So you want to code ? - Learning Resources Captur12

3. Console
Lastly is the Console itself. The console is helpful for debugging, if you have problems with JavaScript always check this tab as it will display an error with the exact line it occurred on. Aside from debugging it's also useful for testing JavaScripts. All you need to do is write a few expressions and you can see the result. It's a nice tool for viewing global objects, such as _userdata, _lang.. or simply testing snippets of JavaScript. In short it's a great tool for honing your JS skills.

So you want to code ? - Learning Resources Captur14

4. Documentation
Of course to have a full understanding of the devtools I suggest reading the documentation for your preferred browser.

Editors

The thing about coding is that it can sometimes be messy and hard to read, especially without proper formatting or syntax highlighting. That's why it's best to write your code in an environment that makes reading your code easier. Trust me, you don't want to write your code in the default notepad or the editor on the forum, so I'll list some tools below that make writing code easier.

Notepad++
Personally I recommend getting Notepad++ as it provides a number of tools and supported code types for editing. It's an all round must have for coders.
JSFiddle
JSFiddle is an excellent online editor for writing, testing, and sharing code as well as collaborating with other users.
CodePen
CodePen is another online editor quite similar to JSFiddle that allows you to write, test, and share your code online.
Dreamweaver
Dreamweaver isn't free, but it's a versatile tool for developing websites. Luckily however, there's a free trial so you can get a taste of what it has to offer.

That's all for now ! I wish you luck in your studies !! Very good

Also make sure to utilize the developer tools to their fullest -- don't be afraid to experiment with code.. be creative !! Mr. Green