A Practical Guide To Web Design and Development ( part 1 - Front End )

in #webdesign7 years ago (edited)

Ok so this article is for anybody that wants to become a web developer in 2017 whether you're just starting out and you know absolutely nothing about coding or you're a front-end developer and you're not sure where to go next.

Even if you are one of the lucky people that know everything and you want to just get a sense of what technologies are currently available.So we're going to take a look step by step at which technologies you should focus on and at what point you should move on and start to learn something else.

When you're a web developer you can never get too comfortable if you stay at the same level of just building HTML CSS and basic JavaScript sites your entire business is going to be eaten up by something like Wix.
There are now programs that can do your entire job and can do it better than many of the web designers out there all right so you need to stay ahead of the machines.

Where do you start?

HTML and CSS

This is actually probably the easiest question of all .Aanyone that tells you to learn anything other than HTML and CSS first is not a web developer and the reason that you learn these first is because HTML and CSS are the building blocks of the web, of all websites, all web applications even if you have the most advanced web application running on a server powered by node.js or PHP with all types of functionality and databases. Another really important reason to learn HTML and CSS is because there's no alternatives, these are always used and there's no way to be a web developer without knowing them.

When it comes to server-side languages you have a choice between PHP, SQL, Ruby on Rails,Java and tons of different technologies but as far as the front-end you need to know HTML and CSS.Yes you have HTML5 and XHTML and so on but they all stem from the same tag syntax and once you know one the other is really easy to learn.
When it comes to html5 versus HTML 4 or XHTML it's your preference but I would always suggest using HTML 5.It's less strict, it has more features and it's it's by far more popular now you can get by in the world of server-side programming by knowing let's say 50% of PHP however when it comes to HTML and CSS you really should know them inside.Okay, you should be able to position anything anywhere on the page and know exactly what tags to wrap those elements in.This should really shouldn't be a big deal because both of these things are really easy to learn they're not programming languages with tough logic to grasp it's simple markup and style sheets all right it's very declarative and they're just really simple to learn relative to other programming technologies.

Tools and software

Text editor

Now let's take a look at some of the basic tools that you're going to need to create your websites.So, first of all, you're going to need a text editor and there's a ton out there. It's all about preference and everyone's different. Some people can just use Windows notepad and if you want to step it up a notch you could go to notepad 2 which gives you some extra features. I would suggest using something like sublime text or Atom.io which are basically advanced text editors, they have really nice code highlighting they have plugins and there's just a lot of different features that are really helpful if you want you could get some kind of IDE.You ould use Dreamweaver or NetBeans or maybe some kind of premium software but I wouldn't suggest that.

Image editor

Don't let image editing overwhelm you.I know you know Photoshop and illustrator are really complicated powerful programs and very popular.You just need to know the basics like basic image slicing, cropping. If you don't want to spend the money for Photoshop and Adobe products you could use something like GIMP or something else. I personally use Photoshop that's all I've ever really used so I don't know too many options but just do a quick google search and you'll find a bunch of a bunch of different great options.

You also want an FTP client I would suggest FileZilla and then an SSH tool which it gives you a way to access your server your remote.Server putty is a good one for Windows.SSH isn't something that you need to know at this point but you do need to know at least FTP so you can get your files onto the server.

Web Browser

Okay you also want a good browser you can either use chrome Chrome or Chrome. I'm just kidding if you like Firefox or even Internet Explorer god bless you that's fine. I would suggest Chrome it's it's really fast it has a great JavaScript engine and the dev tools are great. I wouldn't use anything else , Firefox is up there too.But yeah you need a good browser .

Cloud Storage

Obviously cloud storage this is something that's optional with something that I don't do without I use Dropbox just so I have access to my files from anywhere from any machine.l use Dropbox and of course I also use git and github but we'll get to that later .
bt.png

Java Script

Basic JavaScript is what you need to learn once you know HTML and CSS. I'm not talking about nodejs or any reactive frameworks or anything like that, at this point I'm talking about basic JavaScript.So you want to learn things like data types, strings, numbers, arrays, object and objects and so on functions, conditionals loops, operators these are all these are all things that you'll need to know in any programming language so it's really helpful for you to learn this now. If you learn how to work with functions and conditionals that will also help you later on if you wanted to learn something like Java or C sharp or some high-level language.So you want to you want to grasp the basic programming principles.Event handling is another one so when you click a button you want to fire off an event you want something to happen dynamically on the page.

I'd also suggest learning JSON which is JavaScript object notation.Most of the API's that we deal with now are in JSON format and it's really easy to learn, you could spend a day and you could learn it and master.
At this point jQuery is a great library for a DOM manipulation it makes a lot of things in JavaScript much easier but I would only suggest learning it if you want to feel comfortable with JavaScript. Alright so learn your functions and loops and all that and then move on to jQuery and you'll see how much easier some things are to do when it comes to selecting things in the DOM ;events and things like that.

js.png

How to Deploy A Website

So once you learn HTML CSS and basic JavaScript you want to know how to deploy a website.Alright, I say a website because you're not building web applications at this point.An example would be a site for some a business or something like that all right so you want to get a shared hosting account. Hostgator is really good. I know a lot of you probably disagree when it comes to hosting everyone has different preferences but I've personally found Hostgator to be the best price over performance.

Next thing you want to be able to do is to upload a project via FTP so grab FileZilla and it's all drag-and-drop so you can take your local version of your website, your HTML site and just drag it and upload it to your server.
Alright once you do that you'll need to register a domain name and link that to your hosting account so that you can access your website on the web and that's pretty much it as far as deploying a basic website. It's a lot easier than deploying something like an js application.

ws.png

So once you've mastered the stuff we've talked about so far you can call yourself a web designer.Notice that designer is emphasized I wouldn't suggest calling yourself a web developer yet. Not having any knowledge of programming logical programming aside from basic JavaScript doesn't really doesn't make you a developer .

I will pick this up in the 2nd part where I'll talk about frameworking tools, server side programming, CMS's and more.
I hope I didn't bore anyone to death and that you find this information usefull.

Thank you for your time !

Sort:  

Very nicely done. I'm a graphic designer myself, and I wish I had your patience to write such an article. Keep it up!

Coin Marketplace

STEEM 0.20
TRX 0.12
JST 0.029
BTC 61143.97
ETH 3363.47
USDT 1.00
SBD 2.51