Beginner’s guide to front-end development

Do beautiful websites fascinate you? Have you ever aspired to create your own? Well, let me act as your virtual guide and help you out!

Developing a beautiful website is a skill on its own. Your website gives your customers insight into who you are and also is responsible for a good first impression.

STEP 1 :

The very first step is deciding which editor to use. I personally prefer Visual Studio Code, but it just depends on your preference. Some of the other good editors in the market are Atom, Bracket, Notepad++ etc. Notepad can also be used, but I don’t prefer it.

Link: https://code.visualstudio.com/download

STEP 2 : (HTML)

Well, you might have probably come across this one already, but yeah learning HTML is the first step. It’s a really simple language and you can 99% of the time never go wrong. It is used to give structure to a web page.

Formal Definition: The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

STEP 3 : (CSS)

We aren’t in the 90s anymore hence no one including yourself would appreciate a website without any CSS. It’s used to add styles to your webpage and make it look more appealing.

Formal Definition: Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Well, what is CSS?

To put it in simple words. It makes your website look appealing.

STEP 4: (JavaScript)

What’s the use of a website which is beautiful but can’t get anything done? We use JavaScript for making our website interactive. JavaScript gives web pages interactive elements that engage a user. It can be used for styling too. Do you want to include some fun confetti on your page? JavaScript has your back! And just for your knowledge JAVA and JavaScript are just not the same.

Formal Definition: JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object orientation, and first-class functions.

STEP 5:

After you have a brief knowledge about HTML, CSS just start working on some really simple projects. The only way you can become a good developer is by just starting to develop websites even pretty basic ones. CSS is a wide ocean that you can’t learn in one sitting alone. As you develop websites you’ll slowly but definitely, get a hang of it.

Here’s a fun little gif to help you understand much better:

Listed below are a few resources which will help you in your learning journey:

1) HTML

• https://www.w3schools.com/html/
• https://www.tutorialspoint.com/html/index.htm
• https://youtu.be/qz0aGYrrlhU

2) CSS

• https://www.w3schools.com/w3css/defaulT.asp
• https://www.tutorialspoint.com/css/index.htm
• https://www.codecademy.com/learn/learn-css

3) JavaScript

• https://www.codecademy.com/learn/introduction-to-javascript
• https://youtu.be/W6NZfCO5SIk
• https://www.w3schools.com/js/

Learning HTML, CSS and JavaScript is more than enough if you’re a beginner. You can develop beautiful websites just by using them.

The excitement of developing your first own website just can't be expressed in words. Every single detail you add, the reason behind it and you putting your heart and mind to work on it will definitely be a memory cherished forever. You’ll keep improving and one day when you look back you’ll become a critic of your website which you were once proud of. But that just means that you have improved!

Ah! It’s such a beautiful journey, so cherish each moment and don’t forget to have fun while developing. You might get stuck then and now but, it’ll just make you a better developer. So, You got this!

Hopefully, this article has helped you out at least a little bit! Now it's your turn to go ahead and create beautiful websites!