As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Got a job doing front-end web development, need help with self-training

ObiFettObiFett Use the ForceAs You WishRegistered User regular
edited August 2010 in Help / Advice Forum
So this company I work for is taking a chance on me and approved a move over to their Web development team. I am currently a supervisor in their Technical Support department. I know next to nothing about web development. D:

The good:
- They know that I have no experience with HTML, CSS, or Javascript.
- I have had a little over a years worth of Comp Sci education at a major university, consisting of mainly Java and C+. So I am not clueless when it comes to programming languages.

The mildly scary:
- They don't have any books on the basics of HTML, CSS, or Javascript.
- They said they want me to find some good books so I can self-teach while they help me. They will refund me or buy them for me.
- There are lots of these books. I don't know which are effective and which aren't.

What I need:
What are some good books to learn the basics and beyond of HTML, CSS, or Javascript?


Thanks in advance, H/A!

ObiFett on

Posts

  • UnderwhelmingUnderwhelming myMomIsTheJam July 13, 2013 Registered User regular
    edited August 2010
    I used webmonkey's online tutorials when I was learning over 9 years ago. It looks different now, but still might be of use.

    http://www.webmonkey.com/tutorials/

    Underwhelming on
  • ReznikReznik Registered User regular
    edited August 2010
    Reznik on
    Do... Re.... Mi... Ti... La...
    Do... Re... Mi... So... Fa.... Do... Re.... Do...
    Forget it...
  • splashsplash Registered User regular
    edited August 2010
    http://www.w3schools.com/ is good as it's official and actually does do a pretty good job with explanations. You shouldn't frustrate yourself going to a bunch of different websites and sources. And for the fact that so many websites will contain outdated or incorrect information.

    Other than that I started really studying web development over the past half year and this is really all it takes in my opinion and in this order:

    Lynda.com XHTML and HTML essential training (short video tutorials). XHTML is extremely easy to learn. There are so many things that have been deprecated that CSS and JavaScript or other things basically do everything. The HTML5 standard is now being taught in college classes but isn't commonly used yet in the real world (perhaps you are aware of these things already).

    CSS: The Missing Manual (2nd edition) An extremely good book dedicated all to CSS at an uninflated price. It would be a good idea to read this one textbook on CSS rather than any online tutorials or videos.

    For JavaScript I'm not sure. I wish I had one good source myself. The class I took last quarter was the Javascript missing manual book but isn't good. W3schools is definitely alright for understanding JavaScript. But the most advanced and latest work in JavaScript is being done with the JQuery library. If they use that you'll definitely have to learn that.

    splash on
  • JacksWastedLifeJacksWastedLife Registered User regular
    edited August 2010
    Splash has good suggestions. I personally don't like w3schools.com but that may be because I don't like their page design.

    For JavaScript I highly recommend JavaScript: The Good Parts

    I also would suggest finding a good jQuery book, unfortunately I have none to recommend. jQuery is kind of the hot thing when it comes to JavaScript.

    Good luck with the self teaching. I'm also a self taught front end engineer. I have a degree in Graphic Design and got a minor in CS and did nothing but Java coding. HTML was probably the easiest to learn and (good) CSS the hardest. It's easy enough to sling a CSS selector around, but very hard to do it right, especially cross browser.

    JacksWastedLife on
  • Dr. TrevorkianDr. Trevorkian Registered User regular
    edited August 2010
    splash wrote: »
    http://www.w3schools.com/ is good as it's official and actually does do a pretty good job with explanations. You shouldn't frustrate yourself going to a bunch of different websites and sources. And for the fact that so many websites will contain outdated or incorrect information.
    They are in no way affiliated with the W3C. I've seen this mistaken impression stated before and assumed it was because of the name. Is there some authoritative resource where people are seeing this?

    Regardless, I do use and recommend w3schools for light reference. I mostly just use it when I can't recall a CSS property name. It seems like it might be a good place to get a thin overview of HTML, CSS, and JS but it came along years after I learned, so I don't know.
    splash wrote: »
    Other than that I started really studying web development over the past half year and this is really all it takes in my opinion and in this order:

    Lynda.com XHTML and HTML essential training (short video tutorials). XHTML is extremely easy to learn. There are so many things that have been deprecated that CSS and JavaScript or other things basically do everything. The HTML5 standard is now being taught in college classes but isn't commonly used yet in the real world (perhaps you are aware of these things already).

    CSS: The Missing Manual (2nd edition) An extremely good book dedicated all to CSS at an uninflated price. It would be a good idea to read this one textbook on CSS rather than any online tutorials or videos.

    For JavaScript I'm not sure. I wish I had one good source myself. The class I took last quarter was the Javascript missing manual book but isn't good. W3schools is definitely alright for understanding JavaScript. But the most advanced and latest work in JavaScript is being done with the JQuery library. If they use that you'll definitely have to learn that.
    It's been a few years, but I did enjoy some Lynda.com videos about design. Even then, most of the technical topics were outdated or just not very quality tutorials to begin with. It looks like some updates were released last year, so that might be worth checking out now.

    A quick look at the table of contents and some reviews gives me the impression that the above CSS book is a very good suggestion.

    JavaScript books are tough to recommend. Personally, I learned enough to get by in the mid '90s (from WebMonkey!) and then mostly ignored it until the renaissance a few years ago following the popularizing of ajax and the rise of serious JS libraries. In all that time I've never really sat down with a JavaScript book. If I were to shop for one I'd want to make sure it includes a good discussion of the Document Object Model (DOM), common problems and solutions (not full recipes, but some discussion of patterns and maybe anti-patterns), platform differences, ajax (naturally), and maybe a tour of available libraries (jQuery, prototype, mootools, ?).

    I would suggest that immediately after you have a grasp of the basics you read Steve Souders' High Performance Web Sites. Not only will it guide you toward good habits and free you from wondering what the best practices are for implementing these new things you've learned, it is also a book that touches on a lot of different areas related to building and delivering web stuff, giving you a more comprehensive understanding and suggesting different areas for you to investigate.

    Dr. Trevorkian on
  • splashsplash Registered User regular
    edited August 2010
    My bad on W3schools being official. It's so up to date they tricked me.

    splash on
  • Pixel BluePixel Blue Registered User regular
    edited August 2010
    For editing CSS you can't go wrong with Firebug, which is a Firefox addon. It lets you mess with the CSS of a page live -- so you can see what works/what doesn't, tweak stupid pixel-by-pixel widths/paddings/margins/etc. You literally point to a page element with your cursor and you can see what CSS it's inheriting, play with it, etc. I was on a web dev team for the past three years and it's my favorite developing tool by a long shot.

    Pixel Blue on
  • EchoEcho ski-bap ba-dapModerator mod
    edited August 2010
    Pixel Blue wrote: »
    For editing CSS you can't go wrong with Firebug, which is a Firefox addon. It lets you mess with the CSS of a page live -- so you can see what works/what doesn't, tweak stupid pixel-by-pixel widths/paddings/margins/etc. You literally point to a page element with your cursor and you can see what CSS it's inheriting, play with it, etc. I was on a web dev team for the past three years and it's my favorite developing tool by a long shot.

    Seconding this - and for Chrome, it's actually built in. Right-click page, view component. Lots of nifty stuff there.

    Echo on
  • Dr. TrevorkianDr. Trevorkian Registered User regular
    edited August 2010
    Pixel Blue wrote: »
    For editing CSS you can't go wrong with Firebug, which is a Firefox addon. It lets you mess with the CSS of a page live -- so you can see what works/what doesn't, tweak stupid pixel-by-pixel widths/paddings/margins/etc. You literally point to a page element with your cursor and you can see what CSS it's inheriting, play with it, etc. I was on a web dev team for the past three years and it's my favorite developing tool by a long shot.

    Oh yeah, as far as tools go, that's super important.

    I use Chrome for general browsing, but for development Firefox+extensions is indispensable. Here is a list of the extensions I had on my dev profiles about a year ago. (Not much has changed.)

    http://twitpic.com/q1g0d
    http://twitpic.com/q1g1h

    Not as important now that Chrome is my main browser, but maintaining separate Firefox profiles can make a huge difference if you have a large number of extensions required and can divide them by context. I wrote about that here.

    Dr. Trevorkian on
  • ObiFettObiFett Use the Force As You WishRegistered User regular
    edited August 2010
    Wow. Thanks for all the help so far.

    I had been given the weekend to make my decision about the job. I read a thread in this forum about a CS graduate not being able to find a job due to no work experience. That's what got me interested in taking this job. But, I was a little iffy because I hadn't done any web programming and wanted to make sure I wasn't giving up my completely secure supervisor job for a job I would utterly fail at attempting (going to school right now while supporting a wife and daughter, so stability is pretty important until I can graduate).

    After talking to a couple people about web programming I feel much more secure about my ability to pick up HTML, CSS, Javascript, and jQuery. I go in tomorrow to let them know that I will be accepting their offer.

    All the advice about books and websites from you all will be really helpful starting tomorrow. I will be asking for the following books:

    CSS: The Missing Manual

    Javascript: The Good Parts

    jQuery in Action, Second Edition


    I'll start into W3schools, Lynda.com, and (recommended by a friend) train.byu.edu for HTML training.

    That should get me the basics of each language, right?

    ObiFett on
  • mspencermspencer PAX [ENFORCER] Council Bluffs, IARegistered User regular
    edited August 2010
    Above all, do buy multiple redundant books, and don't be afraid to waste money on a book. Your employer wants you trained and productive ASAP, and now is not the time to be frugal and only buy optimally-educational books and save money.

    Seriously, one beginner-level book might technically be all you need -- but I wouldn't stop there. Take the advice in this thread, make a list of books people recommend, go into a book store, and walk out with three or four different publishers' beginner/for dummies/getting started/introductory books. Seeing things explained from different perspectives and with different learning styles will bring the confusing parts into sharper focus.

    If you're worried about your employer thinking "he's just milking the free-books agreement" think about what costs them more: paying your salary for an extra two weeks while you come up to speed, or paying for another $300 worth of books. If you think they're worried about this, discuss your plan to buy redundant books with them, and confirm that they agree with that reasoning. Books are cheap compared to payroll hours.

    mspencer on
    MEMBER OF THE PARANOIA GM GUILD
    XBL Michael Spencer || Wii 6007 6812 1605 7315 || PSN MichaelSpencerJr || Steam Michael_Spencer || Ham NOØK
    QRZ || My last known GPS coordinates: FindU or APRS.fi (Car antenna feed line busted -- no ham radio for me X__X )
  • DisrupterDisrupter Registered User regular
    edited August 2010
    Here is a tip as a former web developer...

    Test In IE often. I can not tell you the amount of times IE messed everything up.

    Heres a few examples:

    If you float a div in IE and have a margin in that same direction, it will double the margin.

    Padding in IE is added to the width, so 100width plus 10 padding=120 wide element. In FF or any sane browser, this is not the case.

    IE 6 and below do not support pngs.

    IE is much more picky about javascript calls, in this case it is correct. FF and the others seem to be ok ignoring two objects with the same ID, IE will go crazy on your ass.

    For general tips, Firebug is a need. Get IE 8 since it has the IE toolbar in it. Personally I just toss in code in all my pages to force IE 8 to display as IE 7 and then just make everything work in IE7.

    Use Jquery. It basically does everything youd want to do in javascript, but much easier and less messy. It will also make Ajax a breeze.

    If you have any CS background, HTML/CSS/Javscript is easy. The main thing to watch out for is IE and its many many quirks.

    Disrupter on
    616610-1.png
  • SeguerSeguer of the Void Sydney, AustraliaRegistered User regular
    edited August 2010
    Disrupter wrote: »
    Here is a tip as a former web developer...

    Test In IE often. I can not tell you the amount of times IE messed everything up.

    Heres a few examples:

    If you float a div in IE and have a margin in that same direction, it will double the margin.

    Padding in IE is added to the width, so 100width plus 10 padding=120 wide element. In FF or any sane browser, this is not the case.

    IE 6 and below do not support pngs.

    IE is much more picky about javascript calls, in this case it is correct. FF and the others seem to be ok ignoring two objects with the same ID, IE will go crazy on your ass.

    For general tips, Firebug is a need. Get IE 8 since it has the IE toolbar in it. Personally I just toss in code in all my pages to force IE 8 to display as IE 7 and then just make everything work in IE7.

    Use Jquery. It basically does everything youd want to do in javascript, but much easier and less messy. It will also make Ajax a breeze.

    If you have any CS background, HTML/CSS/Javscript is easy. The main thing to watch out for is IE and its many many quirks.

    Salmon'ed for... incorrect?

    IE6 won't support 24bit PNGs using alpha opacity, but they will support 8bit PNGs without alpha opacity.

    Generally this is moot as you use the PNGs for the alpha, but the more you know.
    If you float a div in IE and have a margin in that same direction, it will double the margin. This avoids all (most of) the messiness with box model differences.

    Padding in IE is added to the width, so 100width plus 10 padding=120 wide element. In FF or any sane browser, this is not the case.

    For these, get in to the habit of having extra divs, it will help. My general div structure goes along the lines of:
    <div id="content">
      <div class="spacing">
        <p>This is some content</p>
      </div>
    </div>
    

    That way you can apply a width/height to #content, and margins and padding to #content .spacing

    Seguer on
  • DisrupterDisrupter Registered User regular
    edited August 2010
    You're right about the Pngs. I was just speaking in terms of how he will actually encounter the issue. Though it was a suprisingly long time before I discovered one COULD use PNGs if they were 8bit. It just didnt come up for a year or so. :)

    And yes, for most spacing related issues, you can resolve it with having an "inner" or "spacer" or whatever class to handle the spacing or borders. I suppose I should provide solutions rather then just issues.

    Disrupter on
    616610-1.png
  • wmelonwmelon Registered User regular
    edited August 2010
    Here are a few virtual hard disk images that will make your life a lot easier when testing in IE.

    Microsoft old IE version Virtual Machines.

    wmelon on
  • ransimransim Registered User regular
    edited August 2010
    Disrupter wrote: »
    Here is a tip as a former web developer...

    Test In IE often. I can not tell you the amount of times IE messed everything up.

    Heres a few examples:

    If you float a div in IE and have a margin in that same direction, it will double the margin.

    Padding in IE is added to the width, so 100width plus 10 padding=120 wide element. In FF or any sane browser, this is not the case.

    IE 6 and below do not support pngs.

    IE is much more picky about javascript calls, in this case it is correct. FF and the others seem to be ok ignoring two objects with the same ID, IE will go crazy on your ass.

    For general tips, Firebug is a need. Get IE 8 since it has the IE toolbar in it. Personally I just toss in code in all my pages to force IE 8 to display as IE 7 and then just make everything work in IE7.

    Use Jquery. It basically does everything youd want to do in javascript, but much easier and less messy. It will also make Ajax a breeze.

    If you have any CS background, HTML/CSS/Javscript is easy. The main thing to watch out for is IE and its many many quirks.

    Red because this isn't really the case anymore.

    IE 8 will generally play well with the other browsers I have run into very very few instances where something happens in IE 8 that doesn't happen in other browsers.

    IE 7 however is going to cause you headaches. I code my designs in chrome & safari first since those two tend to be the most specific as far as rules go. Generally speaking if it works in Chrome & Safari it'll work in Firefox and IE 8. You'll then need a separate stylesheet for IE 7 and IE 6. But really, keep it simple and you'll be ok.

    Thing to remember with css: The styles cascade so items on the bottom of the cascade that are at the same level of specificity will override earlier items. Inline CSS (which btw is evil and should be avoided at almost all costs), will completely override any styles in a separate stylesheet.

    I actually personally find for some things, especially CSS, the IE 8 web developer toolbar is way better then firebug. But thats personal opinion.

    JQuery is also good, but I don't really recommend people with zero javascript experience go jumping into a framework. Learn the language first, then use the framework to make it easier. You'll hate yourself less later when you're trying to fix something or understand why something isn't working right.

    But no, sorry, IE 8 doesn't have those horrible quirky problems really anymore. I don't even do a conditional stylesheet for it in any design I make. In most cases where I see people still having issues its either a bad doctype or bad code.

    http://www.spoon.net/browsers/ - this site works in firefox, and is a GOD SEND for test, especially to see if something degrades gracefully in IE 6.

    ransim on
  • JasconiusJasconius sword criminal mad onlineRegistered User regular
    edited August 2010
    W3schools is intensely overrated.

    I like htmldog.com as the all purpose field manual for modern html4 and xhtml1.

    CSS The Missing Manual is also a great book. Maybe the best.

    SitePoint publishes a decent laymen friendly JavaScript book as well with an emphasis on interface development. Unfortunately their website is garbage.

    The best place to learn HTML and CSS is a good resource or two, and the best place to learn Javascript is from actual sites that you admire or of discernible quality.

    Javascript has been practices so poorly and by so wide a range of people in the web field that googling good tutorials is a crapshoot, and the language is so loose that an infinite range of styles exist.

    My only tangible directive is that you not waste your time with jQuery until you know what you are doing. jQuery is at its core, a crutch, and if you don't know how it works then it's not hard to construct a monster with it.

    Jasconius on
  • NightslyrNightslyr Registered User regular
    edited August 2010
    Jasconius wrote: »
    W3schools is intensely overrated.

    Javascript has been practices so poorly and by so wide a range of people in the web field that googling good tutorials is a crapshoot, and the language is so loose that an infinite range of styles exist.

    My only tangible directive is that you not waste your time with jQuery until you know what you are doing. jQuery is at its core, a crutch, and if you don't know how it works then it's not hard to construct a monster with it.

    This man knows what he's talking about.

    Nightslyr on
  • DisrupterDisrupter Registered User regular
    edited August 2010
    Right IE 8 is pretty good, but theres still a ton of folks out there on 7 and even 6. I never run into issues on 8, well not never, but rarely. Depending on where you get your numbers like 20-30 percent of the folks out there still use 7 or 6.

    Disrupter on
    616610-1.png
  • XaquinXaquin Right behind you!Registered User regular
    edited August 2010
    What is the easiest way to turn my windows XP (home) PC into a web server for testing? I have two PCs next to each other in my office, and I'd like to create a page on one comp and view it from the one next to it with various browsers to ensure it doesn't look terrible / actually works.

    I've read that IIS does not work on XP Home edition

    Xaquin on
  • JasconiusJasconius sword criminal mad onlineRegistered User regular
    edited August 2010
    Visual Studio comes with a micro version of IIS which you can access from other machines with minimal pain.

    But... it implies that you actually use .NET to build stuff usually.

    You might also investigate things like Aptana... or really any editor with a local test server.

    Jasconius on
  • DisrupterDisrupter Registered User regular
    edited August 2010
    Xampp will install apache and mysql, its great for a test enviroment.


    http://www.apachefriends.org/en/xampp.html

    Disrupter on
    616610-1.png
  • Smug DucklingSmug Duckling Registered User regular
    edited August 2010
    Xaquin wrote: »
    What is the easiest way to turn my windows XP (home) PC into a web server for testing? I have two PCs next to each other in my office, and I'd like to create a page on one comp and view it from the one next to it with various browsers to ensure it doesn't look terrible / actually works.

    I've read that IIS does not work on XP Home edition

    You don't need two computers. You just install Apache or whatever, and open a browser to localhost.

    Smug Duckling on
    smugduckling,pc,days.png
Sign In or Register to comment.