Learn the basics of HTML, CSS and JS (i.e. HTML5) and especially how they work together. Broadly speaking HTML is the content of the site, CSS is the styling/graphics and JS is the glue/functionality that ties it all together.
After you got the basics down, which is all client-side, you might want to look into the server-side of things. Which since a few years ago can also be done in JS using NodeJS - a very interesting project in both implementation and surrounding community - which can be used to build a web server with a few lines of code.
If you get into more sysadmin or webmin stuff you’ll want to look into things like Apache and Nginx, not to mention basic DNS or unix know-how, and get familiar with how they can replace/substitute your web server and/or work with your web app.
The web is and has been moving forward extremely fast. Frameworks come and go and fall in and out of favor every few months.
Ajax is another thing you’ll run into which basically only means getting content from a server without reloading the page on the browser (using JS). Traditionally, like, 10 years ago, every time you clicked something on the web you would send a request to the server and the server would send you back a pre-rendered completely new full HTML page. These days a variety of different things can happen such as rendering on client side and or inserting stuff to an already existing page (using JS) or fetching something from a server or another webpage. SPA vs Static sites etc. It’s really the wild west of web development atm.
You can do a “blog” a variety of ways. Either edit the static sites each new blog post or have the site read from some database and edit the database. Or bundle up what I just said into an UI that you can use without yourself directly fiddling with the database (i.e., pretty much a mini CMS).
Along the way to server side you’ll want to get familiar with databases and what they are. Basically they’re an abstraction of writing text into a file, i.e., writing stuff down and getting it back. There’s a lot of options. MySQL is the old school way while lots of new DB’s have been popping up since the NodeJS age such as MongoDB, Redis or RethinkDB.
If you don’t want to fiddle with server side and still have a database you can use services like firebase.com which handles stuff like user authentication etc all for you with a simple client side library (again, JS) you can use. Services like these are very nifty and you don’t have to know diddly squat about unix, servers and stuff like that. Comes with a nice webview of your database etc - of course, for enterprise apps it comes with a nice price tag as well but a great choice for front-end devs. You’d need a database to create sites like facebook which has comments and chat etc.
JSON is a big deal and it’s simple as shit. It’s the way JS presents objects - JavaScript Object Notation. People like it so much they use it everywhere nowadays where you want to send data in a tangible workable form to and from somewhere. Just like XML it’s a way to present data. Essentially it’s a just dictionary or in Java it’d be a HashMap. It’s a lot easier to understand than XML IMHO.
There’s a lot of open source stuff out there you can look at and learn from. Most of it on github. JavaScript can be tricky to wrap your head around at times but it’s not complete garbage as some would have you believe. Async callbacks and function scope are powerful features that goes hand in hand with the async nature of the web.
You’ll undoubtedly hear or come across jQuery at some point and all you need to know is that jQuery is essentially only a simple (“better”) API of working with your HTML/CSS from JavaScript than pure vanilla JavaScript. For instance, getting a HTML tag with the id of main-content would be $('#main-content') instead of document.getElementById('main-content'). This isn’t as true anymore as it was 5 years ago. 5 years ago browsers had a lot of unique quirks you would have to account for. So you would have to write code that checks for if the current browser is Internet Explorer and write different code to do the same thing - jQuery was an abstraction of these “quirks” so you didn’t have to worry which browser the user was using when viewing your site. This is much less of a problem today but still exists to some extent - and if you want IE8 compatability you’d better stick with jQuery. jQuery has grown and does a few other things as well like animation etc. Just remember that jQuery is simply a JavaScript function that is loaded before your other code does. So the ‘$’ mark is simply a function name. I suggest reading the jQuery source for more info. Also: http://youmightnotneedjquery.com/
Also, press F12 (or Apple+Shift+J on Mac IIRC) in your browser to open up the console to fiddle around with/look at what’s really making up the site you’re currently viewing. F.ex you can type this into the console
$('img').animate([{opacity: "0.5", transform: "scale(.5)"}, {opacity: "1.0", transform: "scale(1)"}], {direction: "alternate", duration: 500, iterations: Infinity});
One more thing, when you look at sites source code you might see all jumbled up scribbly nonsense - this is because in production you’ll want to minify and compress the files you are sending over the wire for better loading speeds. This also has the side effect of obfuscating the code.
2cents
