Teaching myself coding.

by 18 replies
22
So, I've decided to teach myself coding as it's a skill I found myself lacking in.

I found codeacademy 3 days ago - and already finished the html/css curriculum.

Pretty interesting - I must say, and quite fun!

My question is - do any of you know resources where I can start testing skills to practice?

I mean, the site was great to learn - but it didn't really give much application - it just said: "Okay, now do this exact thing we're telling you to do" and didn't allow for independent thought.

I don't think I'm there to start creating a full-on website, yet - which would OBVIOUSLY be a practical application - but I would like just a stepping-stone.

Like a 'test' resource.

Anyone know of a place?
#website design #coding #teaching
  • The best way to learn would be to mimic a web page. For example this warrior forum page, or pick any page out there, and try to make it exactly the same as it is. For this you don't need anything just a simple editor.
    • [ 1 ] Thanks
  • I did edit a web page and that got me knowledge of HTML but what about CSS?
    • [1] reply
    • Right, you can start from
      W3Schools Online Web Tutorials

      What ever you need to know from the basic, this can be your first step and this is actually


      I do use their validation tools and many other features to test and audit an website.

      Hope this will be a bit help for you.

      Kind regards,
      Swrajit
  • w3schools.com = w3fools.com

    However... learning by doing!

    Sites like Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style are great to learn CSS. Tons of good sites (except w3schools.com) out there.

    Do it, don't ask!

    Learn the box model, document flow, CSS grids/frameworks, HTML specs, ...
    • [ 2 ] Thanks
    • [1] reply
    • Neither HTML nor CSS require a server to practice with. So, you can create a local web page on your hardrive and preview the changes in the browser. This will allow you to fiddle and learn, but also, when you are done, if you so later choose, upload your work to a real web server.

      To do this:
      1. Create a folder somewhere with a convenient path. Say, e.g., "C:/website/". You can use windows explorer to navigate to C: and create a new folder or use mkdir from a terminal.
      2. Create a new file in a text editor and save it in the C:/website/ directory you just created. Call it "index.html". I've included some sample starter code, below. Note that I use both SublimeText2, which has a free trial, which never expires, but does occasionally ask you to upgrade and WebStorm, which is an amazing commercial editor. NotePad++, which is freeware and the choice of many great web developers will work, as well. Any one will work. In fact, notepad.exe will work, as well. Brackets looks cool, too.
      3. Double-click on the index.html file you've created at C:/website/ and it should open in your default browser. You may wish to right click the file and choose "open with..." and open it with another browser if you so chose. I use Chrome to browse, but sometimes use Firefox to develop because of the great console and firebug. On the other hand, you may wish to test in IE to see what differences there may be between browsers.
      4. After the site is open, simply make changes in your text editor, type Cntrl-S to save, and then refresh the browser. You'll see the result of your changes reflected in the display of the browser.
      5. Continue to make changes, experiment, and play. Repeat Step #4, repeatedly.

      Note that you can put CSS between <style> tags in the <head> of your html file. I'm assuming that codecademy went through that processs. You can also create a separate file or files and link them via style tags. You can even use a style="" attribute on individual elements. Probably, if this is just a web project, the separate file is a better practice, but for learning, just sticking to one page where you can test easily may be ideal.

      Here's an example of a starter snippit to play with, which shows where you'd stick your CSS experiments.

      Code:
      <html>
<head>
<style>
 
/* Put your CSS here....
    e.g. */

#pplay { color: white; background-color: red; }

</style>
</head>
<body>
<h1 id="h1play">This is a test header</h1>
<p id="pplay">This is a test paragraph</h1>
<img id="imgplay" src="#" />
<p>Lorem Ipsum, etc....</p>

</body>
</html>
      Finally, let me just say that JS Bin - Collaborative JavaScript Debugging and jsfiddle.net and others allow you to play and experiment online in a similar fashion without the local browser setup, I described above. But, most of us learned using the local browser setup and it'll work even if the internet doesn't.

      Eventually, you'll want to buy hosting and use that or setup a local apache server with a database system. I use uniserver because it's portable and easy. This will become necessary when you graduate from html/css to start including some database stuff. Javascript is client-side, for the most part, but sometimes may need a web server to preview/debug properly, as well. But, all of that is in the future. For now, you can just get to know a text editor and a browser, which are the fundamental tools of the trade. Don't be bashful about experimenting with the browser's debugging tools, either.

      Finally, I agree, in part, with what Michael71 said, above, about "learning by doing." In my experience, if I don't implement knowledge I've gained from books, courses, or excellent resources like codecademy at least a few times in solving problems, then it is quickly forgotten. HTML/CSS should kind of be like playing the piano; you need a good part of the code into your hands... almost like muscle memory. The stuff you'd use less regularly you can look up later. I'll also note that there's sort of a critical mass of understanding that's related to your ability to apply the knowledge. For that reason, I recommend people learn HTML/CSS in about six weeks and javascript in another six weeks. If more time is taken and the knowledge isn't used during the interval, most people forget the basics they need to build upon and end up frustrated with a surprisingly large amount of tidbits of information about HTML/CSS in their head, but enough holes in their knowledge web to leave them incapable of using the languages to build with confidence on the web.

      As an aside, let me just explain that when I said I agree "in part" with what Michael71 said, I was thinking of my disagreement with his "w3fools.com" comment and his urging you to immediately explore CSS Grids / Frameworks. W3schools.com is still a good resource. While critics are correct that, particularly in regards to javascript, there are techniques showcased that are no longer best practices, those techniques still work. I'd be surprised if anything on the site didn't work, but some of it may not be completely standards compliant or what consensus thought would tell you to do today. But, come on, if you inspect the source on Google.com, you'll find that Google is still using presentational <center> tags, which is, arguably, more offensive to the standards fascists than much of what troubles some about w3schools. What I'm trying to say is that if w3schools is a useful reference for you, at this time in your development, I'd continue to use it until you reach a level of sophistication where, after having derived much value from it, you can then tell people that it is for "fools" and worthless. Also, you can check the w3fools.com website to see the largely technical reasons why some people disagree with suggestions found on the site. Finally, and I'm not sure Michael71 was urging you otherwise, but I'd try to hold off on using grids/frameworks for as long as possible during your learning process. Will it make it much easier to accomplish things you are proud of on the web? Absolutely. Do I use grids/frameworks? Yes, most of the time for web projects, although, I don't on my HTML5 app development. But, the web is filled with people who don't understand how to fix things when those frameworks don't behave as expected or when new obstacles and trends change things. There creativity is limited by engaging at the higher level of abstraction offered by the framework. A strong foundation in HTML/CSS will give you freedom from dependency on particular grids/frameworks... and then you'll use the frameworks with confidence and power and curse me for ever having suggested you wait before trying them out.

      Best of luck! Please feel free to keep in touch and let me know how your enjoying the process, the progress you've made, and, in the end, what you are building with the knowledge you've gained.
      • [ 1 ] Thanks
  • w3schools is the worst thing to happen to the internet.

    As for learning coding. Just do it! Think of something interesting and make it. Build a simple php/mysql application to keep track of your bills/expenses. Or anything really. I have learnt way more by trial and error then by reading books.
    • [ 1 ] Thanks
    • [1] reply
    • Practice, practice, practice is the best way to learn, you can copy other sites to see how they are put together or start making sites based on layouts that you create yourself. Make a test site on your own computer and try to mimic the techniques and practices you can see on other websites.
  • These are awesome suggestions, actually.

    I've actually already learned something new just in this thread - I didn't know you could embed CSS in the HTML within <style> I always thought you needed a whole new file to link them up - neat trick!

    I think I'll start trying to mimic existing websites as I can at least see their code already - however, I've never been impressed with w3schools.com

    I'll also look at those other resources.

    Keep them coming! Thanks for everything!

    -Auction Debt Eliminator-
    • [1] reply
    • No. Your method is right, create a separate style.css file and then link to it. Of course both will work, but its good to keep your html and css in different files to avoid all the "gibberish" in one file, and also helps you to be organized, which would help you a long way when you will make big sites.
      • [ 1 ] Thanks
  • [DELETED]
  • Using an external stylesheet also prevents FOUC (Flash Of Unstyled Content).
  • I like to recommend free courses at Udemy.com, they have a lot of paid classes but some quality free ones.

    Also would suggest looking into MMOC like coursera and udacity. Some of these have college level programming classes for free.
  • With no programming knowledge I suggest the following steps.

    Step 1: Visit W3Schools Online Web Tutorials
    Step 2: Complete the HTML Tutorial
    Step 3: Complete the CSS Tutorial
    Step 4: When confident enough, make your very first web page IN NOTEPAD, HARD CODING EVERY CHARACTER
    Step 5: Now learn HTML5 + CSS3 and the NEW features they bring us
    Step 6: Implement HTML5 + CSS3 features into your first web page + look at websites you like and see how they code it, and try and rebuild it(NOT copy/paste!)
    Step 7: Repeat step 6

    By the time you have repeated this more times then you can recall. You will be a confident, up to standard, self-taught web designer!

    That's how I did it! (although I had previous programming knowledge, so it WILL take you a matter of time)

    Hope I helped!
    • [1] reply
  • I would just go and try to make something, a nav bar, a footer, or anything.
    Just start making stuff, and Google for answers if you don't know how to make something.
    • [1] reply
    • Have you thought of volunteering your new skills to family, friends or JVs? Is it a project you are looking for? Or more training?

      You could also sign up for a free account at codepen.io, browse other people's code and even tweak it or create your own there.
  • lynda.com is pretty good to start with
  • To be honest with you, you can't actually learn programming just by using online tutorials alone, although they help a lot, you need to also put yourself out there to learn the nitty gritty of programming.
    I would recommend this applications;

    1. Dreamweaver
    2. Eclipse
    3. Xamarin

    Cheers and Goodluck
Join the discussion

Next Topics on Trending Feed