Grow your CSS skills. Land your dream job.

The trouble with beginning is beginning. Where do I start?

  • # December 2, 2012 at 2:42 am

    Hi there!

    I’m very new to web development/design. I was exposed to HTML a very long time ago, and I BRIEFLY learned how to design a webpage through Photoshop (slicing and all that). But over the years I mostly have been working with Photoshop to design for print publications.

    Now, I’m very keen to learn how to develop and design a website (emphasis on the design). My ultimate goal is to learn build an interactive website. AND/OR, for example, in http://www.thelincolnmovie.com/ the way each category turns a different color and moves a little to the right when the mouse hovers over it, the way a new picture appears from the bottom/top when a category is selected. Basically, the little things that make up the look of the page.

    I’ve been through a variety of sites such as Treehouse. But having a little difficulty getting myself to invest for full access to tutorials/resources. I like this site a lot, but I’m not sure exactly where to start. What videos or articles should I start off with; or how should I approach my end goal?

    I should probably start with HTML & CSS, right?
    -What programs should I use? Adobe Dreamweaver?
    -Do any web developers use photoshop first to design and develop their webpage?
    Should I start there since I am familiar with Photoshop?

    OR should I invest in WordPress.org and learn from manipulating the templates (I kind of hate that I can’t redesign, add plugins, etc. with my wordpress.com account, because I’d like to actually see my design come to life before I host it live.) And what tutorials are good to help guide me through WordPress terrain?

    The hardest part about all this is getting the ball rolling, but I’m ready to learn and any suggestions would be fantastic!

    # December 2, 2012 at 3:16 am

    Hey layouteditor, I understand your trouble very well! And though I’m far from being a good frontend developer myself I found starting learning HTML/ CSS with codecademy.com very cool. It is free and teaches in a playful manner with achievements and all.

    You can stick to PS for all designing purposes, because you should have a clear picture of what the sites going to look like before actually setting it up in real code.

    For the editor choose what you like. DW should be fine as ist supports Syntax highlighting and indentation. You will need that. I personally prefer Espresso. But that one is only for Mac. There are some great editors out there (Coda, sublimetext, codekit, DW, codewrangler…)

    If you want to develop your site live but not public you should take a look on local development with mamp or xampp. They let you set up a database and everything you need to Run a wordpress installation on your machine. No need to do it online.

    Hope that helps you a bit…

    # December 2, 2012 at 9:13 am

    I would learn a base of HTML/CSS first before getting into content management systems.

    You need to understand the core of front end development before grabbing a framework, otherwise you’ll only ever understand the framework or CMS rather than the basics.

    Regarding an editor, don’t even bother with Dreamweaver, go straight into Sublime Text – free as nagware but well worth purchasing. Here you’ll be forced to learn how to code from scratch and can easily just have Chrome/a web browser in another window to test your code.

    Also you mentioned about slicing up photoshop designs etc. I would recommend avoiding doing that. Try to learn how to code the graphics. By that I mean, don’t make images for everything.

    Use font-faces, code buttons and gradients from scratch, use box-shadows in code etc. That way your sites will be super light weight.

    On our sites the only things that are images, are images – as in graphic logos and pictures, or ones that absolutely can’t be coded.

    # December 2, 2012 at 9:18 am

    hi…

    think u r already gud n photoshop….come on ya…u can easily go through d html and css….

    learn d basics of html nd css nd stick wit semantics

    imagin a layout nd start coding n html nd css….den it ll b simpl as ever

    strong urself n tags nd attributes den go 4 learning server side language

    # December 2, 2012 at 11:37 am

    @yoyo, please knock off the l33t speak on your posts and try to form coherent sentences.

    __
    # December 2, 2012 at 2:25 pm

    @layouteditor – many people benefit from paid sites like treehouse et al., but I would recommend trying on your own first – it is certainly possible to learn web dev – and well – *without* purchasing anything like that. My first recommendation is always google’s [from the ground up](http://code.google.com/edu/submissions/html-css-javascript/).

    As for code editors, I definitely have an opinion: **do not** use DreamWeaver or any “WYSIWYG” editor (FrontPage, etc.). They build bad sites and worse habits. As andy says, you should learn how to code by hand first.

    I’ve never used sublime text, but I can recommend other Fantastic (and *free*) code editors. [Komodo Edit](http://activestate.com/komodo-edit) is my personal choice. It has tons of useful features and works cross-platform (Win/Mac/Linux).

    > nd stick wit semantics

    * * lol * *

    # December 2, 2012 at 2:51 pm

    @andy_unleash What do you mean by Sublime Text is free as nagware?

    With an editor program I was thinking of using dreamweaver, because I found a YouTube channel that offers, what looks like, comprehensive tutorials; and the person uses dreamweaver, so I thought it would be easier to follow if I was using the same program.

    This is the channel I have been scoping out [Create the Net - Web Design Tutorials](http://www.youtube.com/user/createthenet/videos?view=0 “Createthenet – Web Design Tutorials “)

    Has anyone come across this? I would like to know what you’d think about it. OR if you can direct me to something like this but with another program?

    Thanks for all the responses! It’s helping make this endeavor less daunting.

    # December 2, 2012 at 3:10 pm

    @layouteditor – It’s free insofar as it asks you to buy every so often when saving a document (I.E – it nags you to buy it from time to time). Definitely worth the cash though, it’s an awesome piece of software.

    __
    # December 2, 2012 at 3:15 pm

    > Has anyone come across this? I would like to know what you’d think about it. OR if you can direct me to something like this but with another program?

    See my post above re: *From The Ground Up*.

    Other possibilities:

    [web platform](http://webplatform.org/)

    [Opera](http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc)

    [Sitepoint](http://reference.sitepoint.com/)

    and of course, [the W3C](http://www.w3.org/wiki/HTML/Training) itself.

    To reiterate, I highly recommend **against** using Dreamweaver to learn web development/design. Likewise, I highly recommend against learning web dev from anyone who uses it as a teaching tool.

    # December 2, 2012 at 4:12 pm

    Old fashioned pen and paper and free notepad++. Start drawing on the paper what would you like your page be like and what different objects or elements it will have. Make a list of all css elements and learn all their attributes what makes those elements style. And most of all, practice, practice, practice. Beat it to death till you get full understanding of all things concerned. CSS, specially is not difficult to learn as it seems from the beginning, but as you go alone you’ll soon find out that it is incredibly hard to master it and be good at. The most important thing you’ll learn as you go alone is this. “The simplest approach or solution to web dev is always the hardest to find”. I learned that very early on while back during FE and BE DB development. The AHA moment will hopefully come, and when it comes, there’s nothing more rewarding than that. Good luck.

    # December 2, 2012 at 4:25 pm

    @andy_unleash Oh, haha! Okay, I will definitely scope it out among the other suggested editors. I’ll steer away from Dreamweaver since that seems to be a general consensus here and other forums I’ve visited.

    @traq Thanks for those resources!
    @jurotek Thanks for the advice!

    # December 2, 2012 at 8:57 pm

    Coming from a relatively new “web designer”, HTML and CSS is the way to go to start learning. Now as far as the resources, I personally learned from W3 schools.. aside from its horrendously old design.. it was a good source for information. I didn’t find out about codeacademy till i was well versed in HTML. which i strongly recommend. Codeschool, the paid alternative, is also very well made, and has a leg up on codeacademy when it comes to how _well_ they explain what you are doing. Really my best advice to you is, once you learn something new, use it, and manipulate it. That is the fastest, and easiest way to learn/understand what you are doing. Best of luck! These forums are also a tremendous wealth of knowledge which you should be afraid to use.
    Now for text editors, my personal favorite is sublime text 2. it is free to download and asks you about every 2-3 hours if you want to upgrade. I am still learning it, but i am finding it tremendously useful and more intuitive as compared to Textwrangler(BBEdit) or vim.

    __
    # December 2, 2012 at 9:31 pm

    I’d also [recommend against](http://w3fools.com) w3schools… : )

    # December 2, 2012 at 10:44 pm

    @andy_unleash

    hi,i’m new to this forums

    sorry it’s happened every time because of the text messaging habit.ok i will change myself :)

    # December 3, 2012 at 2:04 am

    @traq Why do you recommend against w3schools? It looks descent. lol

    HTML vs. HTML5? Are these just different version of the same thing? So should I use the HTML5 template when I start my new project/create my file or should I just use HTML?

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".