Front end Web development – where to start & what i wish someone told me when i started web development

Where do i start?

There are many routes you can take when it comes to web development, Sometimes it can even be a bit confusing due to the giant variety of technologies you can learn, and in many ways you end up not knowing what to learn or invest your time in. And therefore end up being an advanced beginner because you learn a little bit of everything but you are not really an expert in anything. here i’m going to talk about some core components, tips & tricks in web development. i will also provide resources for further learning.

 

Basic Front-end

JavaScripti’m going to start off with a misconception about JavaScript, JavaScript is NOT Java. They are two completely separate languages. When you load up a page, the html and CSS gets downloaded. But without JavaScript, you have little to no interactivity to your page. When you’re on a webpage, and click a click a button, use an image slider. All of that interactivity is brought to you by JavaScript. definitely a necessity for ever web developers toolkit. Once you’ve got a good grasp of the concepts of JavaScript i urge you to learn jQuery, read more about it at their website.

 

HTML: HTML Stands for Hyper Text Markup Language. your HTML is where all the content goes and where you link to your Style Sheets and scripts. You apply CSS to your html page to provide style, and JavaScript to provide interactivity. HTML provides the skeleton for your webpage. HTML is easy, it consists of many elements/ AKA Tags that provide different functionality. everything you do revolves around your html files And it is an absolute necessity to learn it.

 

CSS: CSS stands for Cascading Style Sheets. This language controls everything regarding the placement of elements, color, padding, margin And so on. CSS lets you personalize your page and add character to your page. CSS consists of key and value pairs you use to customize elements. for example. Body { background-color: black }. You don’t have to become a CSS ninja, but you should be comfortable with the language.

 

 

No Matter which route you take

Basic terminal usage: it doesn’t matter which operating system you are on. some basic knowledge of how to use and navigate the terminal of your OS is a valuable skill. 

Github: Github is a repository hosting service on the web, it offers all the SCM (Source Control management) utilities of git , but also adds its own handy features. While Git is strictly a command line tool, github provides a nice user Interface in the comfort of your browser. I would also recommend that you learn the basics of git to get a better understanding of the basic Source Control Management concepts. GitHub is wonderful community of sharing and collaboration and i  encourage you to leap into it.

Webservices: A webservice is essentially a way for two individual electronic devices to communicate over a network. An example of this is JSON (JavaScript Object Notation ). It is a format that uses text that we humans can read to communicate data composed of key – value pairs or also known as attribute – value pairs. You can recognize this format in CSS. There are many Webservices, JSON is just one of them.

 

Basic concepts of the web: If we break the web into 3 fundamental parts. There is the client side also known as the front end. and then there is the backend/Server. and also the database. The backend/Server serves information from the database to the client side. The client side is Chrome, Firefox, Iphone, Android Device or whatever device or browser that has access to the internet. It is the part that the user sees and interacts with. For example. When you enter YouTube.com in the browser. the server redirects you to the page, And fetches the recommended videos for your account from the database.

 

After the basics

Learn a MVC Javascript Framework: There are many MVC frameworks out there but the most popular and best to invest your time in learning is AngularJS, it is maintained by google and is a great framework. It helps you keep things organized and structured. There are lots of them out there. Do some research and find the one you like most. But i would personally recommend angular.

CSS Tools: This falls under 3 sub categories: precompilers, responsive design and CSS Frameworks. A precompiler is what you want when your styles sheet is getting longer and more complex. It will save you space and make it maintainable. It lets you take advantage of things that don’t exist in css, like variables and nesting. A prime example of a CSS precompiler is SASS. If you go on for example youtube, and you try to resize the page. you can see that the page changes according to the size of the browser window. This is what we call Responsive Web Design. It’s a valuable tool to be able to build responsive webpages, but there are great CSS frameworks that can help you with this. Bootstrap is the first one that comes to mind that i would recommend.

Front End Build Tools: Now what do i mean by Front End Build Tools? A Front End Build tool is something like Grunt. Grunt is what you call a JavaScript task runner. If i had to describe grunt in 1 word it would be automation. it takes care of repetitive tasks like minification. it is the process in which a program removes all the comments and shortens the variable names of file as well as removing all white spaces. it makes the file smaller and therefore saves bandwith and makes the site load faster. another useful framwork is bower, here is a quote from their website: “Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.”.

Where to go from here?

Thank you very much for reading and i hope this has been of help you, i will finish by listing some great resources:

 Mozilla Developer Network Is a great and vibrant community, this provides all the help you need for not only javascript but for html and css too!

W3Schools is the place if you want to learn anything about html , they cover loads of other things like AngularJS, jQuery, etc aswell.

Lynda.com Provides you with great video courses about anything you can imagine within web design and technology.

Tools:

Atom is an open source text editor with loads of features. it’s based on chromium and is hosted on github.

Webstorm is a very intelligent and heavy duty IDE. i recommend this if you are coming from something like eclipse and like the richly-featured development suite. Due to it’s

Plunkr is a handy tool for web developers, it let’s you make and share plunks. you can add libraries with just the click of a button. i use this when i have learned something new and i wanna try it out without starting up a whole new project

Books:

These Books are by far the best books you can by if you are starting out learning front end web development.

if you want to learn angular this book is for you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s