Improving as a Web Developer

[Heisenbleurgh]

I'm planning 2 months of very intensive web development studying/training and here's what I had in mind:

 

HTML and CSS - (1-2 weeks)

• basic html and css

Advanced Styling - (1 week)

• bootstrap, others.

Javascript - (1-2 weeks)

• basic js
• jquery
• yui
• other libraries*

 

Those three main topics were all I had in mind but after reading around a lot of people were also suggesting learning PHP and some SQL, but I'm not sure how important it is? Is it very related to it or is it more of a framework like Rails (which is what I had in mind to study afterwards) that I can skip and still get to a point where I can say I'm a good web developer?

I've also read about some server applications and other programs like NodeJS that I'm not very sure about needing or not.

 

Any other tips or recommendations related to web developing are appreciated.

 

* - feel free to recommend other js libraries worth checking out

[Aho]

I would stay away from Bootstrap and just about all other front-end frameworks, at least for now. Generally, they're bloated with crap you will never use and restrict your design choices.

 

Take a little while longer with HTML and CSS; understand how a browser takes the markup, renders it, and applies styling. HTML5 elements such as <article> and <section> are frequently misused, so take some time to make sure you understand and can create semantic markup. It's important to SEO and the organization of your page's content.

 

CSS can also get more complicated with many features from the new CSS3 standards that allow for more creation of interactive content that was previously done using JavaScript. I would take some time to learn those, as well.

 

I would also suggest taking a look at SASS in combination with Compass after you feel comfortable with CSS. It's a "preprocesser" for CSS that adds many programming-like features to stylesheets. One of the most important problems it solves is DRY (don't repeat yourself), which is highly prevalent in plain CSS. For example, if you have multiple elements on a page that should be red, instead of defining "background: #FF0000;", you could define a variable "$some_elements_color: #FF0000;" and use "background: $some_elements_color;". This dramatically increases the maintainability of your stylesheets, especially when they get even bigger. SASS also contains mixins (essentially functions you define to output some CSS) so you could easily define a media query mixin such as:

@mixin mq($min, $max){  @if $max == null  {    @media only screen and (min-width: $min)    {      @content;    }  }  @[member=ElsePants] if $min == null  {    @media only screen and (max-width: $max)    {      @content;    }  }  @[member=ElsePants]  {    @media only screen and (min-width: $min) and (max-width: $max)    {      @content;    }  }}

 

and call "@include mq(some_min_width or null, some_max_width or null) { // properties }" every time you needed a media query instead of using the long standard way. There are even actual functions in SASS that can take input and return some output. SASS, coupled with Compass, will save your life as a web UI designer/developer.

 

As you can see, there is a lot to learn in HTML and CSS and I don't believe 1-2 weeks is truly enough to grasp it all.

 

Regarding the PHP/SQL/Rails concern...it really depends on what you want to build. PHP or Rails, coupled with SQL (some sort of RDB), will allow you to create web applications that generate the HTML front-end with dynamic content. For example, if you wanted to create a forum such as this, you would need a language like PHP or framework like Rails. PHP is a server-side language and Rails is a server-side framework built with Ruby; you will need a web server to handle requests to these applications.

 

Node.js is a platform built on Chrome's JS engine that allows you to build "real-time", asynchronous applications. Unlike traditional web apps built on a framework such as Rails, Node.js doesn't wait for an action to complete; it instead uses callback functions that are triggered when the action emits an "event." If the action was to find a record in a database, for example, it could emit an event "found" and pass the user record to the callback function for the "found" event or "notFound" and pass the error back to the callback function for the "notFound" event. Node's event loop and EventEmitter is extremely useful for an application like a chat box which has constantly changing content. 

 

If you're simply looking to design websites, just focus on HTML, CSS, and JavaScript. With JavaScript, look at some of the MVC front-end frameworks; Ember, Angular, Backbone, etc...those are what the industry seems to be moving towards. Of course, you should learn the language first before diving into any framework.

 

Hopefully that gives you some insight into the web development world; it's definitely a fun place to be.

[Marxtai]

 

I would stay away from Bootstrap and just about all other front-end frameworks, at least for now. Generally, they're bloated with crap you will never use and restrict your design choices.

 

I agree that starting right away with a framework and not understand what it does is a bad idea, but I don't think that front-end frameworks such as Bootstrap are "bloated with crap" and that it restricts your design - this depends on the framework though, for example using jQuery for only a single tiny element is really overkill. Of course if you use the default navbar and don't override its styling, you're going to end up with that same design that has been seen thousands of times before, but it can easily be customized. I'd recommand using a framework like that for things such as the grid system, modals, alerts and things like that. You'll most likekly need/use most of these, so there's no point in reinventing the wheel.

 

 

 a lot of people were also suggesting learning PHP and some SQL, but I'm not sure how important it is?

 

It depends on what you want to do. If you only want to do the designs of the website, like how it looks, feels, interacts, than HTML/CSS/Javascript is all that you need. If you want your website to handle things such as a contact form (that sends an email), registration system or any form of dynamic content (ex: blogposts with comments), then you will need a server side programming language to handle all that.

 

 

A general tip, start using frameworks (ex: bootstrap, jQuery) only when you have a good understanding of the language it's for (in this case, CSS and Javascript respectively). Sure, the frameworks are "easier" to use than learning the language and they allow you to quickly develop, but it's also very important to know the bases in order to properly customize it, and especially important if someday you have to work without these frameworks and want to recreate something they do.

[Aho]

I agree that starting right away with a framework and not understand what it does is a bad idea, but I don't think that front-end frameworks such as Bootstrap are "bloated with crap" and that it restricts your design - this depends on the framework though, for example using jQuery for only a single tiny element is really overkill. Of course if you use the default navbar and don't override its styling, you're going to end up with that same design that has been seen thousands of times before, but it can easily be customized. I'd recommand using a framework like that for things such as the grid system, modals, alerts and things like that. You'll most likekly need/use most of these, so there's no point in reinventing the wheel.

If you're going to customize the default elements within the framework, why not write them yourself? Overriding the default front-end framework classes will add to the file sizes of your stylesheets and increase loading time. 

 

The main reason I see people going towards Bootstrap or Foundation is for their responsive grid systems. It's certainly useful, being able to create a grid using such classes along the lines of "grid-50," but it's also unsemantic and unnecessary. There are much better tools out there for creating these grids; Singularity and Susy are the ones that stand out to me. They don't require that you include another library in your HTML and allow much more control over your design.

 

I don't have anything against these frameworks, so I apologize if my posts sound incredibly snobby. I just advocate against using them. You will become a much better web designer by creating your own set of reusable design elements.

[Doldol]

As a backend I would argue Python, using a minimalistic framework like Wheezy, which doesn't restrict much and allows a lot of flexibility, you don't have to use the full library, and can swap stuff out.

 

Python is easy to learn, useful in a lot of programming fields and fun!

An alternative would be Ruby with Rails, but Rails has a higher learning curve and I don't find Ruby that intuitive, but some people will argue otherwise.

 

I would stay away from PHP, it's not fun to use and not intuitive at all, I know it's by far the most popular, but you shouldn't be guided by that.

 

You could also use Node.js (Which is using Javascript as a front end.), but I have no experience with that.

[Masoud Hosseini]

If you want to be a professional Web Designer just learn these items not php and my sql

[iHammmy]

Hello,

 

Try not to overwhelm your self with information at the start, take it easy and don't worry if it takes longer than expected, it doesn't matter Make sure you have fun trying out cool stuff otherwise it will just get boring and feel like a chore...

 

~ Harry

[Lumi]

Javascript took me 2 days to learn. As long as you know the syntax the libraries aren't hard whatsoever to use.

[Heisenbleurgh]

Hey everyone, thanks for all the input so far!

I looked at what some job openings are expecting and watched a couple videos on more experienced developers and I've decided to give myself 2 months for front-end development: html, css, javascript, jquery, sass, angular.js, git, bootstrap and js libraries.

A lot of these I had prior experience with so I'm pretty confident with the 2 month mark. After that I'm gonna try some back-end stuff, most likely Ruby on Rails which I've used a little of before.

[vorticalbox]

jquery mobile is very nice for building mobile web based apps, join that with php, mysql and JS you can build some pretty funky stuff.

[Nallown]

Just like everybody else said. Don't use a rubbish "framework" like bootstrap. They're more of a Template to be honest over a framework.

 

If you want to do something advanced with CSS then use sass and don't use a CSS template. You won't learn anything from them.

[loganryan99]

Using a framework like Bootstrap (or the much better choice, Foundation) is actually extremely beneficial and saves time and money. However, you shouldn't use them as a way to avoid learning CSS - only use a Framework when you get the point where you could make one yourself anyways. Also, don't use SASS or LESS until you've learned basic CSS already, they'll just make you more confused

[Heisenbleurgh]

Using a framework like Bootstrap (or the much better choice, Foundation) is actually extremely beneficial and saves time and money. However, you shouldn't use them as a way to avoid learning CSS - only use a Framework when you get the point where you could make one yourself anyways. Also, don't use SASS or LESS until you've learned basic CSS already, they'll just make you more confused

Thanks, I didn't mean to disrespect anyone commenting against Bootstrap but I was still planning on learning some of it, albeit a month or so from now. I didn't mean to use it as a shortcut to learning css, but I've already had to use it a couple times in previous projects so I felt I might as well get ok at it. Same goes for SASS, and I'll make sure to check out Foundation too. Thanks!

[loganryan99]

Thanks, I didn't mean to disrespect anyone commenting against Bootstrap but I was still planning on learning some of it, albeit a month or so from now. I didn't mean to use it as a shortcut to learning css, but I've already had to use it a couple times in previous projects so I felt I might as well get ok at it. Same goes for SASS, and I'll make sure to check out Foundation too. Thanks!

 

That post wasn't directed at you

[vibeit]

Try to learn PHP after you're done with HTML. PHP is handy especially since websites today are dynamic. SQL is also a must but since for managing databases. jQuery is also good and should be easy to learn if you have a background in java, and CSS is great for building awesome looking sites. At least with these 5 you can already build a basic website. The thing here is if you will be working with a team of web developers, you'll most likely be working in one area such as the user interface or database part. So you might want to pick an area to specialize in, unless you want to be a jack of all trades.

[fizzlesticks]

--snip--

jQuery is a JavaScript library, not its own language.

[fizzlesticks]

That's exactly what I said - "once you understand how Javascript works you would move on to jQuery as it is made from Javascript"

You also said "jQuery and Java are two completely different languages". I was just clarifying since what you said made it sound like it's its own separate thing.

[cuddles86]

If you are looking to go out on your own and create bespoke applications for people then I would personally recommend Ruby on Rails, there is plenty of help out there for new comers as well. Would also recommend why's poignant guide to ruby as a great place to start.

 

If however you are just self teaching and looking to find a job with a development house then you should probably go down the php route as more people / companies use that for development.

 

As for bootstrap, personally I love it but you need to be careful. Make sure that you have a really good knowledge of CSS before starting to use it. If you know what you are doing though it means that you can create an application and then throw bootstrap in quickly for initial stage testing where the UI tweaks don't matter and you just need something clean. It just makes prototyping really easy.