I’m a designer with good experience of designing UI, how can I get started with developing my own designs into a functional website? Can someone show me the path to becoming a front-end developer from designer?
Much the same as Andrej's answer: learn HTML (what are the elements for? how should they be combined? how do they behave?) and CSS (styling the HTML). Jeremy Keith recommends some excellent resources at https://adactio.com/journal/11551
Then, I think the best advice I've seen in a long time... learn this one particular thing in JavaScript: css-tricks.com/video-screencasts/150-hey-designer… ...which is how to change a class when something is clicked. Attach all state to those classes.
If you know how to write valid, semantic HTML; and you know how to style it; and you know how to change the state of the DOM in response to the user... you can build most websites out there.
Tooling and abstractions will follow when you have done enough basic code to be getting annoyed with the repetition. Don't learn SCSS before you know CSS, for example. Don't get stuck trying to learn Gulp right off the bat, when you should be learning HTML (which requires nothing more than a text editor and a browser).
Note that web apps are more complex but you did say "sites" :)
It all starts with HTML and CSS. You should know both in very detail first, before moving on to javascript.
1st and 2nd week: use CodePen and create a new simple layout each day, just HTML CSS, no frameworks. You need to get the basics down, like display: block vs display: inline-block, you need to know the difference between static absolute relative and fixed position, etc.. There are a lot of great resources out there to help you.
3rd, 4th week, when HTML & CSS feels natural for you, choose a CSS framework like Bootstrap or Foundation. Go through the docs, build some more examples on CodePen. Try to extend the framework examples using custom HTML classes and custom CSS rules for those classes. Learn the grid. Pay attention to different screen resolutions.
5th + week, learn SCSS, Gulp and also Emmet. Learn how to create your own project with SCSS/Gulp and your favourite text editor (I still use Sublime). I must warn you that this is a bit opinionated advice, there are alternatives to Gulp and SCSS.
Then when this feels natural, start learning JavaScript. All the knowledge from steps before, will help you greatly on your path.
Ben Buchanan (200ok)
I make some bits of the web.
WP magic
Tom Livingston
CSS, HTML, Front-end
Learn the basics first. HTML, CSS. Like already mentioned, learn what these things do. Learn HTML elements. Learn CSS basics to get the look you need or at least close enough with these languages. Don't jump on frameworks like Bootstrap or Foundation until you know HTML/CSS and understand what's happening.