Learning in depth of webdsign to near professional level, need advice.

I've been running a small web hosting business for years, mostly as a hobby. When my full time work took hold of my life lets say about 3 years ago, I stopped any study I had on HTML, CSS.

So now with that being said, I still do know some of the raw basics, but with all the information out there I'm a little overwhelmed.

• So to start off I'm going to state my hardships, to give people and idea where I stand. Being a single father of 2 working full time has added a lot of stress in my life, which I think destroyed my creative thinking. So this weekend I decided to go out and buy some art supplies and practice drawing, relearning on how to visualize shapes and shades. This will be my hardest task, but I think it will help inspire creative thinking.
• I have very little knowledge on Photoshop or illustrator.
  
• Renewing my education on CSS/HTML won't be to hard, just apply the creative layout is my toughest challenge.

This is my understanding on how things should flow

• Photoshop used for mockups or creating simple graphics.
• Illustrator should be used for logos or graphics that require vector.
• HTML/CSS to finish

So here are my questions

1. What is your typical work flow on design a website.
2. What types of tools do you deploy and why to get the job done?
3. Do you have any additional advice or idea's that will get me going a little faster?

 

Build the skeleton first, then dress it up with art. One NEVER dresses a building with art UNTIL the building is FINISHED.

 

Utterly and totally back-assward. Why? Because

!) Websites are about delivering content to users
2) Websites are about MORE than what it looks like.

HTML exists not to say what things look like. It exists to say what things ARE or WOULD BE in a professionally written document. There are grammatical reasons headings exists, why they have levels, what consititutes a paragraph, even reasons why text MIGHT be bold, and how that bold could be something like a proper name in a legal document <b> or recieve "more emphasis" such as <strong>Do not steal this work!</strong>.

As such the correct approach should be one of content FIRST, then semantically marking up that content to say what things ARE or WOULD BE in a professionally written document, then and only then creating the layout with CSS, then layering more CSS atop it to give it the window dressing.

Starting out dicking around in a paint program worrying about appearance starts the process from the wrong end. That's why the artsy-fartsy types who lack the basic understanding of ACTUAL design who sit around spanking it on the graphics tablet in Photoshop and illustrator are NOT designers. They're just artists under the DELUSION they know what design is.

Design is engineering that incorporates art, where things like accessibility, usability, and so forth are AS important as your "gee ain't that purty" art. I'm not saying you can't tart it up all pretty, but you have to draw the line if it compromises accessibility at any level.

Which is why I've never seen a website that started life as a PSD or in a WYSIWYG editor that was worth a flying purple fish.

Progressive enhancement :

1) Start out with your content or a reasonable facsimile of future content in a flat text editor as if HTML and CSS don't even exist.

2) Mark it up semantically saying what things are, NOT what you want them to look like, if you choose ANY of your HTML tags based on the default appearance, you're choosing all the wrong tags for all the wrong reasons! As this is the semantic step, neutral / meaningless tags like DIV/SPAN don't go in yet.

3) Then using CSS create your first (of many) layouts for screen media. NOW you can add DIV, SPAN, classes, and ID's to hook for presentation, but do NOT use classes to say what things are going to look like as that too has ZERO damned business in the HTML. Say what things ARE or WHY it MIGHT receive a style. This is why frameworks like bootcrap are mentally enfeebled rubbish that make you work harder, not smarter!

I suggest starting with the desktop layout so that:

4) You can narrow the window, figure out where it breaks, and use media queries to re-arrange the layout.

5) Lather, rinse, repeat step 4 until satisfied you have all reasonable screen sizes supported.

6) Then AND ONLY THEN ENHANCE the already fully working page with JavaScript.

That way should any part of the equation -- JS, media queries, screen layout, even HTML itself -- be broken, blocked, or not apply to the end user, the page will "gracefully degrade".

That's the fastest way to build professional accessible websites. Anyone telling you to start out dicking around with appearance is talking out their arse.

-- edit --

Oh, as to tools, any flat text editor will do for the development side. I like Flo's Notepad 2, but notepad++, win32pad, editplus, MS Visual Code, Atom, Sublime -- there are hundreds of perfectly good free editors out there.

For testing, it's called BROWSERS. Most of them are free... download them, install them, test in them.

... and test as you go, not "oh I completed the whole thing in one browser" then hacking for the others. It's too easy to paint yourself into a corner wasting long hours of research and hacking that could have been avoided if you just used techniques that work in ALL browsers from the start. Hence alt-tab and F5 should be your new best buddies. You write a major section, you check it in ALL browsers, then move on to the next section. It might seem like more work during the process, but in reality it saves you time and headaches by the time all is said and done.

Server-side code you can usually get away with testing environments like WAMP/XAMPP (I prefer the latter) though installing a proper VM with a regular server installation on it can give you a better "real world" approximate of how things are going to work.

Case in point, I have a VirtualBox install of Debian that's a 1:1 of my primary hosting VPS' install. Both basically just being HowToForge's "Perfect install" of debian/apache/mariadb/ispConfig with some of the config variables tweaked to better leverage caching to match my traffic loads.

 

I'll go with @deathshadow about "notepad 2" for coding. One of the simplest and easiest tools out there to code up something without hassel.
It was one of his post where I came to know about this tool first. Never used anything else since then.

I'm not much of a image designing person, I mostly outsource that work, but I believe that the tools you have mentioned should be enough.

There is a lot new in HTML and CSS, and a lot more devices to optimize your website for, like laptops, iPads, phones, different browsers, different fontsizes and screensizes etc...

 

Quick tip: If you are looking to learn more HTML, CSS (and possibly JavaScript), a good place is https://www.freecodecamp.org/. As the name suggests, it doesn't cost anything, you can get certifications, and the user base seems really happy with what it offers.

 

nshep Thanks for the freecodecamp, I'll check that out. It looks like it has alot of refresher info and more.

So its my understanding, don't worry so much about Photoshop/illustrator, but focus more on the skeleton design. Then use basic CSS to move things where I want them, then add the beautification. So anotherwords, I need to thing of webdesign kinda like procedural programing, because that is how the user flows to content.

 

Yep, paint the house after it is built.