How long to learn HTML5, CSS, php, JS, etc?

Discussion in 'Web Design and Development' started by eclipse, Oct 24, 2012.

  1. macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #1
    Hi all,
    If I was to dive in as an amateur developer interested in designing and manipulating CMS's like Joomla and Wordpress, how long would it take to learn:

    HTML5

    CSS

    PHP

    JS?

    Or would I just mainly be doing HTML and CSS and relying on forum support for the occasional PHP tweak? I'm mainly interested in being able to design websites in CMS, not completely reprogram the php I guess. Any estimates out there as to how long it takes to get a 'good' understanding of these languages?

    Cheers
     
  2. macrumors 65816

    NathanCH

    Joined:
    Oct 5, 2007
    Location:
    Stockholm, Sweden
    #2
    If you want to get into front-end then you're right that you will want to start with just HTML and CSS. When designing Wordpress themes, you will run into PHP but the Wordpress codex is good plus you may only end up editing one or two words.

    I am still learning HTML and CSS after even doing it as my job for several years now. I am finding new ways to be more efficient. At the same time my design style is always changing putting me in new situations. So how long it takes to learn, depends how well you want to learn it. You could have a simple website going by the end of the day if you spend a few hours reading up first.

    I should say, ideally for Front-end it would be more beneficial for you to learn JS before PHP if you want a job in front-end dev.
     
  3. fig
    macrumors 6502a

    Joined:
    Jun 13, 2012
    Location:
    Houston, TX
    #3
    Agreed, I do a lot of modifications to Wordpress themes, including starting with a blank theme and designing it out to something custom, and I know next to nothing about PHP but am pretty proficient in HTML and CSS.

    That's definitely where you'll get the most return on your time investment, then once you've got those pretty nailed down you can start looking at what else it'll benefit you to learn depending what direction you're moving in.

    Jquery can also come in really handy and isn't too tough to pick up as far as implementation.
     
  4. thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #4
    Thanks guys, that's good feedback. Cheers.
     
  5. macrumors newbie

    Joined:
    Jul 25, 2012
    #5
    I learned it quickly, but you need to find a good tutorial series to watch. I would recommend TheNewBoston.com
     
  6. YanniDepp, Oct 26, 2012
    Last edited: Oct 26, 2012

    macrumors 6502

    Joined:
    Dec 10, 2008
    #6
    Honestly? You're always learning. The day you stop picking up new things and trying new approaches, you're in trouble.

    I have a degree in computing science, and I left university in 2007. I've been building sites since: as my own one-man business, for a company in the city I live, and for a huge educational establishment. Looking back now, the code I wrote when I left uni is horrific. Even when I look at code I wrote a year ago, I see ways I could drastically improve it.

    Although I do write PHP often, I really enjoy writing front-end code: HTML, CSS and Javascript. When you're dealing with this stuff, there are a few underlying concepts you really need to get. You can tell when people don't 'get' these concepts because their code grows into a monster, even when they try something mildly complex.

    These tips are aimed at people who know how to write some HTML, and have used CSS before, and want to take their skills to the next level. If you're just starting out, you might not fully understand what they mean, but they'll keep you right.

    The best lesson you can learn is about document flow. Block level and inline HTML elements, the styling limitations of both. What happens when you float (and clear) elements, what happens when you position elements absolutely or relatively, and how these ideas affect everything else on your page. People who don't understand these ideas tend to absolutely position everything, and give everything explicit heights and width. You really don't need to do this, and it makes your front-end code a nightmare to maintain.

    Another important lesson to learn is CSS specificity. If you're new to CSS, you'll probably write rules and wonder why they're not appearing on your page. It's frustrating, but everybody does it at some point. There are times when certain CSS rules override certain other CSS rules: it's all in the selector that you apply the CSS rule with. #myID is more important than div.myClass, which is more important than .myClass, which is more important than div. People who don't understand specificity often end up with CSS with complex selectors, and often end up fighting to understand why certain CSS rules impact other things on their page. Nicole Sullivan gave an excellent presentation on this, calling it 'specificity war'.

    If my first job after university, I was lucky enough to have a boss that really cared about writing neat HTML and CSS. He had crazily high standards, but they really helped me keep my HTML simple and meaningful, and my CSS clean. If you're going to be building themes for CMS and blogs, this is another important thing to learn. We call it 'semantic markup'. Here's a link that tells you a little bit about it.

    The last lesson: don't arrange your site using tables. It's a tired cliché, but it's very important. There is a better way. I remember the first time I had to build a semantic XHTML site using CSS (without tables). I hated it and thought "this would be so much easier if I just used a table". But once you 'get' how to lay out content (which comes from lesson 1: document flow), you'll wonder why you ever used tables.
     
  7. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #7
    Outstanding response from YanniDepp.

    I add my affirmation to all that, and even in the sequence noted. I cannot stress more to the OP the first thing said, "You're always learning", as not only is the technology advancing, but so is the development community and support infrastructure. From a high level view as a developer in general it's exciting to be a part of the open source community in particular, even with all the sloppy code, egos and poorly documented crap which is part of a code base being shared and constantly evolving. It teaches you patience and diligence to research solutions beyond the first hit on Google. Then, ultimately, feel confident enough to help others.

    Welcome to the community!

    The only thing I can think to add beyond all the wonderful advice here is that the real learning - even for a front end UI person - comes from examining template code, making changes and seeing the affects (for better or worse) Books, video seminars, tutorials and support forums, blogs certainly are amazing, rich, and important as well as time saving measures. Nothing replaces opening up an IDE, looking at the code line by line and using books and all these other things as reference in the beginning.

    You can't learn English from a dictionary if you don't know the construct of the language -- so also spend time to learn STANDARDS and BEST PRACTICES from the very outset via these key high level resources as you code your first projects:

    W3 Schools - http://www.w3schools.com/w3c/w3c_intro.asp
    W3C Validation tools - http://validator.w3.org/

    This will make you a better developer, reduce costly errors in time and money in the future, and produce cross-browser compatible code. Front end people should also focus on learning 508 accessibility measures, which I understand was not a concern posted by the OP but I feel must be included in the conversation for those following:

    http://www.epa.gov/inter508/standards/index.htm

    Best of luck to you, and happy coding! :cool:
     
  8. macrumors 6502a

    Joined:
    Oct 13, 2008
    #8
    To the OP: I have been a member of this forum long enough to know that you have been asking questions about front-end web design and development since 2008, so gauging "how long" is impossible without knowing more context about what you know now, your motivations, prior experience, etc.

    In abstract, the students in my program are decently proficient in designing and coding responsive web sites using HTML5 & CSS3 after a single semester-long introductory course... about 60 total hours of classroom time.

    Another 60-hour "advanced" course covers PHP and Javascript.

    So, the list you define comprises about 6 college-level credits. That will give you a strong foundation from, as noted by others, you will continue to learn.

    In fact, you need to continue to learn. I have been very proficient at web development several times in my career. But, take a year or so away from hands on development and the landscape will shift so much that you find yourself starting from scratch again!

    At various times in my career I was an "expert" at:

    -coding with tables and clear pixel gifs,
    -coding to XHTML web standards,
    -semantic markup

    and today I find myself re-learning how to make websites... this time coding responsive sites using frameworks. It never ends... Web design and development is a moving target...
     
  9. eclipse, Oct 26, 2012
    Last edited: Oct 26, 2012

    thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #9
    Yeah, back then I was starting out on the web design journey mainly to help some activist stuff I was involved in at the time. A mere wordpress.com blog would have sufficed. Anyway, it turns out I can put all this to bed. I've been overruled. The designer wife just wants to design it herself in Muse. I'm out.

    Oh well, time to find a cool Open Source game to play...
     
  10. SrWebDeveloper, Oct 27, 2012
    Last edited: Oct 27, 2012

    macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #10
    I know why you mentioned the 60 hours based on classroom time and recognize your disclaimer re: moving target and I do not think you're saying anyone, all the time, can learn in 60hrs guaranteed. ;-) But that is your estimate based on a measurable experience with specific goals (classroom learning) for a basic and initial understanding of the languages and their construct. Yet some of us noted the "years" taken to (paraphrasing) "master" the technologies or that it might only take "one single day" to get a basic site started if one is motivated enough.

    So which is it? (asked rhetorically)

    If I was the OP I might find all this somewhat confusing, estimates varying from one day to 60hrs classroom time to years. I point this out to remind the OP why some of the responders here made it a point not to mention specific time periods at all. I mean absolutely no disrespect to anyone who posted time estimates, and everyone really is right nor shall any opinion be censored, but my main concern is we don't want the OP to feel pressured to learn.

    I agree with the comment, "So how long it takes to learn, depends how well you want to learn it" and hopefully we all do. This is an open ended response, but the most pragmatic.

    That's why some of us focused on what to learn to help the OP.

    From my reading of this topic, the technologies involved for front end development include HTML, CSS, Javascript and related frameworks mostly, including PHP/MySQL for advanced CMS template and theming which involves some back end code.

    I hope the OP understands the original question as to "how long" really is impossible to answer accurately, and that the advice offered as to identifying you as a front end UI person and advising which technologies to focus on is really the proper and most responsible.

    I added this comment to kind of summarize and consolidate things. No disrespect intended to anyone.

    My .02.
     
  11. thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #11
    I understand: the question is open to interpretation. The course summary information about was an interesting benchmark though. Interesting. Anyway, as I said the designer wife has overruled this admin / bookkeeper / wannabe web-developer, and is going to do it herself with Adobe Muse. To her it's just a brochure which happens to be online. A lot of the updating will happen on Facebook!

    Thanks all for your help!
     
  12. macrumors newbie

    Joined:
    Oct 29, 2012
    #12
  13. macrumors regular

    Joined:
    Feb 24, 2010
    Location:
    Sydney, Australia
    #13
    After about 18 months of HTML/CSS, I am now able to convert any Photoshop (PSD) file into a fully functional website (in Drupal, Joomla, WordPress or a standard HTML/CSS template). I acquired paid jobs after 6 months, and am now a freelance web developer (having worked previously for a company). After the initial 12 months, I found that to do anything "interesting" I needed to have a basic knowledge of JavaScript (more specifically, jQuery). So, I committed some time towards that.

    The PHP in Drupal/Joomla/WordPress is easy to manipulate, especially if you have a basic knowledge of the English language (and you know what conditional statements and loops are). I am currently, after 18 months, committing my learning towards these fields. If a client actually asks for backend development (i.e. writing a plugin/module) there is usually much more money in the job.

    However, for frontend development, you can gain a strong knowledge in 3-6 months (I was maintaining a full-time university degree simultaneously, and still am). I've also taught HTML/CSS, and would be willing to help you out if you want to shoot me a private message.

    All the best!
     
  14. macrumors 65816

    Joined:
    Jul 14, 2008
    Location:
    Charlotte, NC
    #14
    Check out this site: teamtreehouse.com
     

Share This Page