Beginner Guide
HTML, CSS & JavaScript
An article gives an introduction to beginners about frontend development.
Welcome to this article, I guess you might be not familiar to frontend developing, so you enter here. I will try my best to share everything I know to let you have a basic understanding of the elements of frontend developing and the relationship between all the elements.
What is front-end development?
Front-end development is the process of creating the client-side webpages and applications. For example, we open up facebook.com and the page we see on browser is one of the client-side webpages. Also, the client-side webpages are usually not able to store data. On the other hand, back-end development or so-called server development is the one creating and hosting storage (database) and interacting with users on requesting every time we clicked the refresh button.
What are the programming languages we need to learn for getting a job or starting up our front end journey?
Generally speaking, every language has its own framework on web developing, but most of them working on backend side development. For example, Python has Django and Flask for hosting server.
For beginners, it is nice to start with learning HTML, CSS, and JavaScript. They are the foundation of the web development field, by mastering those three elements, you are able to build a simple website. In the future, you can further develop your skill on ReactJs, AngularJs, Django and more on building a more complex and robust website. By the way, Facebook is a good example of a robust and fast website, imagine that Facebook needs to deal with billion of requests and actions all in a minute, and Facebook is built by ReactJs.
What are HTML, CSS, and JavaScript?
HTML
HTML, stands for HyperText Markup Language, is not a programming language, but it is used to build-up the body of the websites. It can be seen as the bond of webpages. The website which only contains HTML will look boring, but all the first generation of webpages looked like that.
HTML codes look like the below in a code editor. PS code editors are tools that allow us to have better coding experience, anyway, it is possible to write on notepad too…
To learn more on code editors, check this out :)
CSS
CSS, stands for Cascading Style Sheets, is used to descript how a website should look like. In other words, CSS allows us to design our webpages. If HTML is bone, then CSS would be the clothes and skin of webpages. A website with only HTML and CSS can be awesome and fascinating, but the only problem is that all the buttons are not functioning or a better way to descript is only HTML built-in function works while the buttons you added on will not function at all even though they are clickable.
As you can see, it looks perfect to show, but all the buttons are not functioning. The picture below is how CSS codes look like. Also, CSS is not a programming language too.
JavaScript
JavaScript is a programming language and it is used to connect all part of the website together and assign works for all elements. Thus, front-end developer is usually being called as a JavaScript developer too. Of course, JavaScript is harder to learn compared to the above two types of codes, but it is the one to make your dream website alive. HTML is bone, CSS is skin, and JavaScript is muscle. A piece of extra information that JavaScript has been installed in every browser, so it is not necessary to install one on your PC, but it is not able to execute codes outside the browsers. To overcome it, NodeJs team has released Node to deal with the problem. You might hear os NodeJs and DenoJs, they are the browser liked environment for JavaScript to run.
The picture below is the example codes for JavaScript.
What is the workflow for constructing a webpage?
HTML, CSS, then JavaScript. This isn’t fixed that in ReactJs, it allows programmers to write HTML in JavaScript files. However, it is always recommended beginners to start with HTML → CSS →JavaScript. This flow brings a clearer image of how you would like to create a website from scratch.
What’s next?
It might be tough to write JavaScript code at the beginning, but start with HTML and CSS to master the basic of building a webpage. Then go with simple JavaScript codes to connect buttons and call functions. Here is a link to the free JavaScript learning material. Also, freecodecamp and YouTube are nice sources of materials too.
If you want to track your coding journey and want to show your skills in interviews, then I guess you will be interested in GitHub too.
That is a series sharing how GitHub works and how to use a terminal to run Git commands to upload, download and branch your codes.
