• Welcome to ZD Forums! You must create an account and log in to see and participate in the Shoutbox chat on this main index page.

Tech Help Learning Web Design

Joined
Aug 15, 2011
Location
somewhere beyond your screen
As the title states I want to learn web design but don't know where to start. I already looked at some web sites and checked out some books but still don't know where to start. Could someone please suggest what web language I should start with?
Also in case you know some free web designing programs too.
 

misskitten

Hello Sweetie!
Joined
Jun 18, 2011
Location
Norway
As the title states I want to learn web design but don't know where to start. I already looked at some web sites and checked out some books but still don't know where to start. Could someone please suggest what web language I should start with?
Also in case you know some free web designing programs too.

You should start with the basics - master basic html first, then move on to css styling sheets, a good way to start is by going through the step by step tutorial on this site (I know it looks childish and it's written for kids, but the content is dead useful and easy to understand):
Lissa Explains it All -- HTML Help and Tutorial for Kids

Once you have both those down you could try dabbling in php, which in my opinion is an easy to understanding web programming language.
 
Joined
Oct 20, 2008
Gender
Timecube
This is something I originally wrote for another forum, but it seems it's relevant in this thread.

The Basics

Here are resources for the basics of web development:

-=HTML=-
------------

HTML and CSS Tutorials, References, and Articles | HTML Dog
HTML Tutorial
30 HTML Best Practices for Beginners | Nettuts+
Tutorials - HTML5 Rocks
-=CSS=-
-------

CSS Tutorial
http://www.css3.info/
A List Apart: Topics: Code: CSS
CSS-Tricks (This site covers much more than just CSS though.)

Mozilla's Developer Network has a compilation of great CSS resources here, as well a general web resources here

-=.htaccess=-

The official docs Apache Tutorial: .htaccess files - Apache HTTP Server
Also some useful information here, Comprehensive guide to .htaccess- intro, but it is generally best to refer to the offical documentation.

-=JavaScript=-
https://developer.mozilla.org/en/JavaScript/Guide
JavaScript Tutorial

-=Web Standards et al=-
World Wide Web Consortium (W3C)
IEEE-SA - Developing Standards

Web Programming

-=PHP=-

PHP is one of the most common server-side scripting languages, and is a pretty powerful one.

/***** Getting Started ******/
PHP: Hypertext Preprocessor (Official site)
PHP: PHP Manual - Manual (Official documentation, something you should refer to now and then all the time.)
PHP Hypertext Preprocessor (PHP)
40+ Invaluable PHP Tutorials and Resources | Nettuts+ (A great round up of a variety of resources, it speaks for itself.)

/***** Security, best practices, etc. *****/

PHP hashing framework

PHP Freaks - PHP Help Tutorial: PHP Security (Basics of security in PHP, this is a topic you should spend a good deal of time on.)
Good and Bad PHP Code - SitePoint (Why you shouldn't do some things, etc.)
security - Do htmlspecialchars and mysql_real_escape_string keep my PHP code safe from injection? - Stack Overflow
XSS (Cross Site Scripting) Cheat Sheet
Passing Malicious PHP Through getimagesize() ha.ckers.org web application security lab
Chris Shiflett ▪ Cross-Site Request Forgeries
Chris Shiflett ▪ SQL Injection
PHP Security Consortium: PHP Security Guide
Seven habits for writing secure PHP applications


There is a lot that I'm not covering here, but that's the very basics.

/***** Object Oriented PHP *****/

PHP Tutorial - Class, Inheritance, Magic Methods, Polymorphism, Exception, Code Sample, Code Example | Geek Files
PHP Freaks - PHP Help Tutorial: OO PHP Part 1: OOP in Full Effect

/***** Exception Handling *****/

PHP Try Catch Guide
PHP Exception Handling

/***** PHP & MySQL Databases, Regex, etc. *****/

PHP for Beginners: Building Your First Simple CMS | CSS-Tricks
Regular Expressions PHP Tutorial


-=[My]SQL=-

MySQL Tutorial - Introduction
SQL Tutorial
MySQL :: MySQL Documentation: MySQL Reference Manuals

Furthermore, an article on the concept of Relational Databases:
Introduction to Relational Databases — DatabaseJournal.com

General Tools and Useful Code, Etc.

Vi Improved (ViM, VIM, Vim, whatever you prefer) Can't really recommend this enough, it's easily one of the best text editors ...it's better than Emacs...
The W3C Markup Validation Service Validates your XHTML, etc.

Here's a great development extension for both Firefox and Chrome:

Web Developer

For Firefox, there's FireBug

-=VIM=-

DotShare.it (Great site in general if you use Linux/*BSD etc.)
Vim - Navigating files in vertical splits
Vim hacks - Linux Tutorials, Guides and Tips - CODECALL
VIM an a PHP IDE - Thomas Koch


-=General Web Resources, etc.
Web Design Resources and Tools I Use
WebCheatSheet Tutorials
Dev.Opera

------------------

Frameworks and libraries

PHP based​

CodeIgniter
The Kohana PHP framework

JavaScript​
Raphaëljs Library
jQuery Library
Prototypejs

And many more here.


More Resources: Videos, Lectures, Et cetera

This is CS50 OpenCourseWare
Building Dynamic Websites / OpenCourseWare
(Also see the .net sites for these)

CodeIgniter From Scratch | Nettuts+
PHP Video Tutorials - KillerPHP.com
In the Woods – Diving into PHP: Video Series
BetterPHP :: Free PHP Tutorials
 

misskitten

Hello Sweetie!
Joined
Jun 18, 2011
Location
Norway
Wow, Kitsu, not sure your huge list of resources is relevant for beginners - which is the vibe this thread is giving me - but definitely nice to have for those who have the basics down and wants to expand their world of web-designing.

You're welcome, Vanessa.

I remember my own venture into web-design. I started off using one of those site-making programs that came with the free webhosting sites (homestead) so when they announced that they planned to stop offering free hosting - I was forced to make the choice between redesigning my whole site in another site-maker (geocities had one, but it was significantly different from homestead's) and learning to use html. I chose the latter and it became a step by step process for me learning how to properly code and design a site. I will admit it, it looked horrible for a good while - first because it lacked colors, then because it took me a while to get a proper grasp on designs. They started out simple and boring, then I had a more flashy phase - creating layouts that were either very colorful, took up most the screen or had extremely confusing navigation (or all of the above):
History of my layouts

And then finally I decided to go back to redesigning my site from scratch (this time properly from scratch - every bit of coding was of my own creation, not copied out of scripts I found online that I altered to suit my purpose) and my layouts went from big and flashy to more practical (plus rather than having a layout and then changing it, I decided to create a set of themes so that visitors themselves can choose for themselves how they want the site to look):
Dream Universe
 
Joined
Oct 20, 2008
Gender
Timecube
Wow, Kitsu, not sure your huge list of resources is relevant for beginners - which is the vibe this thread is giving me - but definitely nice to have for those who have the basics down and wants to expand their world of web-designing.

Yeah, most of it probably isn't. But I figured that the top resources (mainly (X)HTML and CSS links) would be relevant, and then if the OP, or anyone else, wanted to learn more, maybe some of the other links would be relevant or useful.

At any rate, if you (refering to the OP) don't have any experience, then it's best if just dive into HTML markup and CSS, as that's at the heart of every website, it's sort of the scaffolding or visual framework. Things like PHP, MySQL, etc. are the internals, the plumbing or the organs, or however you like to think of it. PHP, as aforementioned, is one of the most common and powerful (although once you get experience and are comfortable with web design, you can look into things like Ruby On Rails or Python frameworks, etc. but right now that'd just confuse you.) language. It's relatively easy to learn, as most of it is fairly straightforward.

If you do get into web development/programming, then one of the easiest ways to practice that is to install something like XAMPP or WAMP, or other similar local server. They are pretty easy to set up (on Windows it's mainly clicking through installers, unless you grab the .zip version and go from there, either way, easy. There's plenty of tutorials on YouTube and other places if you get confused.) and useful for testing stuff, espeically if you don't have hosting yet, or don't want it at the moment, or whatever.

When it comes to learning HTML, I think it's best to just look at it for what it is: a markup language. It basically tells the browser, "How should the page be structured?". There's a certain patternicity to it, actually. You almost always have <open> and </close> tags. Closing tags always have the forward-slash. CSS on the other hand, is basically "What should the page look like?" and relies on the structure (HTML) to determine what should look like what. In CSS you don't write structure or logic, but instead you declare rules. A rule might be something like:

body {
background:rgba(114, 115, 115, 0.5);
}

which tells the renderer to render the background (body) of the page in the defined color, at 0.5 alpha level (in other words, 50% opacity).

Both are very easy once you get the hang of it, and will usually start to come naturally after a while. The hardest part - for me at least, because I'm not a designer - is making the CSS look good. It's easy to write rules, but can be difficult to make it all coherent and fluid.
 
Joined
Oct 16, 2011
Location
Ohio
Of the sites stated I would (and did) start with w3schools.com It is great for html, css, and javascript (including the jqueary library). It tells you how to display things and you just ave to apply it. Just open up notepad (or other text/code editor like notepad++) and start experimenting.

hit ctrl s on notepad, ctrl r on your browser, look/test, edit text, repeat
 
Last edited:
Joined
Apr 11, 2012
Location
Seattle, WA
Definitely try and find a free web service or use notepad to test your creations! It's hard to see what your actual code will look like when you're in the middle of writing it, so it's important to guess and check. Plus, when you're done, you have something to show off. ;)

Practice is the only way to get good at anything. Don't get overwhelmed. Start with body tags, background, then content. You'll be surprised how simple a lot of web design can be.

Maybe pick a project to work toward, to help guide your learning process. A website teaching someone about one of your favorite hobbies, or a "Getting to Know You" page for your family, or something. A lot of my personal experience with web design has been learning as I go, rather than sitting down and cramming everything.
 
Joined
Oct 20, 2008
Gender
Timecube
I agree with a lot of what Beckira said, however, I think it is important to know what you're coding. There is nothing wrong with trial and error, of course. That is mostly how you learn (most of what I know has been learnt in that fashion). But I think when you're doing something like designing the layout for your site or something (and later on, coding the logic, but that's an ENTIRELY DIFFERENT discussion altogether, seeing as we're talking about design here.), it's good practice to think "how will this look when I refresh the page?" or "what *exactly* am I changing?". It is somewhat dependent on your thought process, too. I have a tendency to develop things in my head, rather than in a text editor, and then implement them.

But at any rate, what I'm saying is, try to understand why you should use a certain tag or property, what will it change, etc. I find that makes developing much easier most of the time.
 
Joined
Apr 11, 2012
Location
Seattle, WA
But at any rate, what I'm saying is, try to understand why you should use a certain tag or property, what will it change, etc. I find that makes developing much easier most of the time.

Oh, absolutely. Avoid those cheesy "copy-paste" CSS sites and CMSs (like Wordpress and Joomla) like the plague. You want to be able to know how your site functions so that when it breaks you know exactly where it went wrong and how to fix it.
 

gannondorf

Dark Lord Gannondorf
Joined
Aug 4, 2011
Location
hyrule
Book marking this thread for future evaluation.

I'm trying to create my own website from scratch so maybe this thread can be helpful for both of us. :)

I will master programming and I will become the Lord Voldemort/Dumbledore equivalent In math, computers and technology!

"Maria, watch me, I will fulfill your Wish!" -Shadow the Hedgehog
 

Users who are viewing this thread

Top Bottom