I graduated graphic design in 2009, I worked from 2009-2011 building Joomla and WordPress websites for companies, then went freelance and I’ve been doing responsive front-end web stuff for about five years now. Here’s how I got from where you’re at to where I am now.<p>The web is built using three technologies: HTML, CSS, and JavaScript. Literally every other technology that gets used with the web has to interface to one or more of these three, so focus your learning on the foundational technologies. If you try to learn React and Bootstrap and Flux and Grunt and Parse and Node and SASS and everything else you’ll get worn out just trying to get started. By learning the foundational technologies you can quickly adopt any tool you truly need to use, but you could never keep up with all the tools available out there.<p>Here are some simple rules and attitude changes I adopted in my own discipline that resulted in rapid learning in CSS, then HTML, then JavaScript:<p>- when building new projects, don’t automatically include bootstrap, or other libraries. Only include what you need AS you need it<p>- don’t look at other people’s code before trying to write your own solution first, this helps you clarify your needs!<p>- when you do look at other people’s code, NEVER copy/paste it, read and earn and rewrite what you need<p>- only ever copy/paste code you have personally written in the past<p>- don’t be afraid to rewrite code at any time<p>- code is expendable, and the more code you write the better you will write code<p>- avoid preprocessors and compilers, they create extra work<p>- anything that can be built depending on a library can be built more efficiently without it<p><i></i>HTML Questions for Learning:<i></i><p>- can I still do it without that containing <div> as a wrapper?<p>- is there any HTML like <div style=clear:both></div> trying to solve CSS problems using markup?<p>- how could this be rewritten without using any classes at all?<p>- what’s the fewest amount of tags I would need to mark up this design from scratch?<p>- what’s the most relevant or correct HTML5 tag for this ([and there are a lot of them!) <a href="https://developer.mozilla.org/en/docs/Web/HTML/Element" rel="nofollow">https://developer.mozilla.org/en/docs/Web/HTML/Element</a><p><i></i>CSS Questions for Learning:<i></i><p>- how could I write this CSS without using any classes at all?<p>- if I remove this line, does anything break?<p>- what styles can this element inherit from other CSS rules?<p><i></i>JS Questions for Learning:<i></i><p>- if jQuery does this, what regular JavaScript does jQuery use internally to do this?<p>- if jQuery didn't exist, what would the solution designed to meet my needs look like?<p>And in addition to that, all I can say is that the more you do it the better you will get! Create some basic templates and get used to creating throwaway HTML pages to test one thing, or check something. Don’t get invested in and finesse and polish every project or page you build or you’ll have a very shallow level of skill and spend too much time on too few pieces.<p>One good habit would be to start pushing code to Github. You can view the traffic there, so if people are viewing and using your code you can be motivated by that.<p>Also, CodePen is like a social front-end coding playground. I would highly recommend you check that out and get the habit of testing and trying things out in the open.<p>The other last thing I will say is this: simplify! in 2013 my idea of a barebones HTML page was a whole site template like this: <a href="https://github.com/tomhodgins/5keleton" rel="nofollow">https://github.com/tomhodgins/5keleton</a><p>By 2015 I had it pared down to this: <a href="https://gist.github.com/tomhodgins/c09dd6f9485d77d14e55" rel="nofollow">https://gist.github.com/tomhodgins/c09dd6f9485d77d14e55</a><p>But that was still so heavy it was slowing down my learning. Now when I want to test something here’s the HTML snippet I pop into a new text file:<p><pre><code> <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title></title>
<style></style>
</head>
<body>
<script></script>
</body>
</html>
</code></pre>
Only when you distill it down to the basics can you do it at the scale you need to really experiment and learn.<p><i></i>Resources:<i></i><p>- Mozilla Developer Network for CSS: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference</a>, and JavaScript: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...</a> Reference<p>- HTML5 Specification for HTML reference: <a href="https://www.w3.org/TR/html5" rel="nofollow">https://www.w3.org/TR/html5</a><p>- You Might Not Need jQuery for learning JS: <a href="http://youmightnotneedjquery.com" rel="nofollow">http://youmightnotneedjquery.com</a><p>- Ditching jQuery for learning JavaScript basics: <a href="http://gomakethings.com/ditching-jquery" rel="nofollow">http://gomakethings.com/ditching-jquery</a>