Skip to content

RishiChavda/webdevresources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

Welcome to the introduction tutorial for web development.

Completing this tutorial will give you basic knowledge of HTML, CSS and PHP, with some JavaScript and MySQL thrown in.

###Step 1 Have a poke around with the files. Literally open all of the files in all of the folders and see if you understand any of the code as-is. By the way, you MAY notice that this page is very similar to the homepage at http://rishichavda.com . Go figure.

###Step 2 Close everything you just opened. It's terribly messy and confusing. Now, it makes sense to start with the very basics of web development, which is in the folder names "html-css-js", which surprisingly has a HTML file and a folder with a CSS and a JavaScript file inside. Firstly open up the HTML and CSS in your favourite text editor (normally I'd recommend Sublime Text 2 but Brackets is a NICE text editor for web-dev and has some cool preview boxes for colours and images). Now you should see a bunch of start tags (like ) and end tags (like </html). If you hadn't got it already, the end tags are simply the start tags but with a forward slash before the name. This is the basic syntax/markup for HTML and is also why it is NOT a programming language, it's essentially just a way to document/produce a page's content using nested tags (tags within tags) and including/referencing files using the link tag (the link tag, amongst others, do not have/need end tags as they're included in the start tag i.e. you do not need to put anything in the 'body' of a link tag).

Anyway, notice how some of the tags have some more 'stuff' within the tag? These are called "attributes" and can actually be any extra information about that tag, they are commonly used for declaring class names and id names, as you can see. You may also notice that, in the CSS file (stylesheet file which contains all of the UI/appearance syntax... Not a programming language either, really), all of the id names match a id name in the CSS such as <div id="logo"> and #logo. This is how you can style unique elements (as id attributes must be unique) however classes/classnames can be used whenever and wherever you want (and actually there are some rules in CSS that do not use either). You can also just use selectors (there is a great tutorial on W3Schools, as it's a bit 'extra').

###Step 3 Great. So that's HTML/CSS. There is a short JavaScript file that handles a nice smoothscrolling function for the internal page links. But anyway, this is a general basic start to learning, please check out the following links for learning EVERYTHING (in web development, let's not get crazy).

###Step 4 (for PHP/MySQL) Have a poke around in the other folder names "php-mysql", it's got some commented code in there. Follow the instructions and you should be fine.

###Extra links HTML (Be sure to check out HTML5 stuff) http://www.w3schools.com/html/default.asp

CSS (Be sure to check out CSS3 stuff. Very cool.) http://www.w3schools.com/css/default.asp

PHP/MySQL (Beware. PHP5 has removed some functionality so some stuff may not work here and there.) http://www.w3schools.com/php/ http://www.tizag.com/phpT/

JavaScript (Check out jQuery (standard and UI) and Ajax if you're feeling brave) http://www.w3schools.com/js/default.asp http://learn.jquery.com/

About

Resources for Web Development courses

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published