With the rapid growth of technology, the need for specialists that can create and maintain tech tools is more prevalent than ever. We see job offers for something developers and language programmers popping up all around the globe, but how can you even dream of landing these jobs if you've never written a line of code?Well, if you're interested in learning to code there's no better time than now! Follow our guide on HTML & CSS coding for beginners below..."There are so many different types of programming languages nowadays, I just want to learn how to code."The above has got to be the one I hear most frequently and trust me I've been there, done that. Even the most well versed developer is still overwhelmed by the sheer number of ways one can write code today. If you already know what you would like to work with, start from there, otherwise begin with the basics of coding and you'll soon realise what works for you.As a web developer I'll focus on what we do here at Quadra, but feel free to leave a comment or contact us on Facebook or Twitter if your interest is in a different area. We know a thing or two about apps, games, tinkering with Raspberry Pi's and basically anything that has buttons and/or screens involved.Web development has changed a huge amount in the past years and that is both great and troublesome if you're starting out now. The benefit is that there's reliable content for virtually everything you would want to learn, the unfortunate part is that it might be hard as a beginner to identify decent advice amongst the white noise of poorly written and out-dated tutorials that linger around the web.The basics of learning to codeEvery web page needs a common set of tools to be rendered properly, the first being HTML and CSS. As you might know, HTML stands for HyperText Markup Language, meaning it's nothing more that a set of code words that wrap around content so that a web browser (like the one you're reading this post on) can know how to display every bit of information. CSS on the other hand is used to style such content and stands for Cascading Style Sheets; they are used in conjunction with HTML to produce much of what we see as an end product on a web page.A quick example would be:<p>Every bit of text wrapped with this funny brackets and a P will become a paragraph</p><p>A piece of <strong>bold text</strong> can be created by wrapping the portion of text with the strong <span>tags</span>Do you see the pattern? Both tags are wrapped with a < and > brackets (or a less than and greater than symbol, if you wish) and the </tag> with the forward slash before the tag name means it's closing that section.For the above portion of HTML we could write the following CSS code to add some styling:p {font-family: Helvetica, sans-serif;}span {color: red;}The above CSS would, as you can see, change the font of our paragraphs to Helvetica and change the color of the text within the <span></span> tags to red.If you've read this far, chances are you're fluent in English. That alone is such a great help for most coding and programming languages as English is the most predominant language when it comes to development (having Brazilian Portuguese as my native language makes me not so lucky!).When I first started to learn HTML and CSS I used (and still use) some of these sites listed below.CodeCademyMozilla Developer Network's tutorialsw3schoolsA few years back, when I was learning I would use CodeCademy for any type of coding. Their website has changed since and no longer offers all resources for free but they are definitely worth checking out. They not only offer tutorials but also provide a platform where you can write your code and see the results live on your browser. Use CodeCademy to get a feel for coding and familiarise yourself with the terminology and basics.Mozilla and w3schools don't provide a place for you to see your code come to life but are brilliant resources for beginners. Mozilla as you may know are the creators of Firefox, the web browser. The Mozilla Developer Network is not only a great place to learn new coding skills it is also useful if you need some specific documentation, simply hit the search bar on the top right of their site and type away.w3schools works pretty much the same way, I prefer the way MDN relays their information though as they tend to highlight better which functionality is currently supported and where users can read more about it in case they want to go deeper down the rabbit hole.Coding on your own computer & setting up a frontend development environmentOnce you're familiar with the basics of how webpages are structured and want to start writing your own code, you'll need what most of us call a 'development environment'. It may sound like a fancy term, but a dev environment is just the set of tools you use to write code. These will vary from person to person, and will be likely to change over time. What sounds like a perfect tool today may not be as suitable tomorrow, web technologies are always changing which means our toolset and skills will change too.Text editorsThe first tool any developer needs is a good text editor. There are tons available out there, but I think it's safe to say at least a few of them are more suitable for certain tasks then others. When it comes to choosing the best text editor, the most important thing to consider is what works for you. That can sound vague, but with the multitude of Editors available you should test different ones and find one that does everything you need.Currently one of the most popular Text Editors around is Sublime Text. Sublime is my text editor of choice and there are a million reasons why, most importantly it offers a really good out of the box experience and also allows for a lot of customisability. You can install plugins (packages) that will enhance or add new features and automate a lot of your workflow.Another text editor, that whilst it's not as popular, it offers a very interesting feature out of the box is Adobe's Brackets. Brackets also offers a number of plugins to extend its functionality, but what makes brackets so special is that you can preview the results of your code as you write, it also offers code linting by default, meaning it will highlight and offer hints when the code you're writing is invalid or using the wrong syntax.For absolute beginners Brackets would be the number 1 option for a text editor. It can be quite daunting to set up a proper development environment with a local web server, accessing terminals, installing and configuring custom software on your machine and Brackets removes the hassle by giving you a working development environment with live code preview.Web browsersOnce you're more familiar with certain aspects of coding, you can proceed to setting up a local web server and other tools that front-end web developers use. The second tool for your development environment is a good web browser. As web developers most of our code is consumed through web browsers and as users experience the web through multiple devices nowadays, a good web browser will serve as a great tool when testing and viewing the results of your code.The two most feature rich browsers for developers are without a doubt Google's Chrome and Mozilla's Firefox Developer Edition. Both browsers offer a ton of different tools for debugging and viewing website code so download your favourite or try both if you haven't yet.Since most tools between these two browsers work in a very similar way, I'm going focus this little guide on Google Chrome, my current preference. For starters, open a website of your choice and check out some of its code, i'm going with example.com. Once the website loads, right click somewhere in the page and select the 'Inspect Element' option:That should open Chrome's Developer Tools, which looks like:From there you can already spot a few familiar elements like the page markup (HTML) on the left and the styling (CSS) on the right, double click on some of the properties and you'll see you can edit some of these directly from Chrome (you'll lose your edits on page refresh or when you close the tab).That's it! Hopefully this will be enough for you to delve into the world of coding. Coding can be intimidating but the only real requirement to become a developer is commitment. If you set your mind to it and sacrifice a few hours of TV or Gaming, you'll be coding in no time!There is always something new to learn and it's extremely satisfying to apply your newfound knowledge. Learning a skill opens a whole new host of opportunities and experiences, you'll land that coding job in no time!Comment below or get in touch if you have suggestions for our next development post or head to our website to see our full list of services. Until then, happy coding! I'll catch you around the interweb.Honourable MentionOne tool that I didn't mention above but definitely deserves recognition is Team Treehouse's website. They have many Tracks, which will take you all the way from complete beginner to proficient web developer (with options for technologies to learn). Treehouse offers both a basic and a Pro plan starting at US$25 a month, with a 2-week free trial. If you're really committed and have a little extra time to invest, go check them out!To find out more about what we do as developers for Quadra Digital, take a look at our development page or get in touch!
