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!
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…
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.
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
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 * *
@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.
> 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*.
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.
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.
@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.
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".