DEV Community

Favour Amadi
Favour Amadi

Posted on

"I want to become a web developer, where do I start?" (Part 1 - Frontend)

As with every journey to becoming anything, you must start somewhere, it is not any different with Web Development. For some like myself, learning to develop websites/apps is to create a career path and for some others, it might be to build a project or just for fun. Whatever the case, the learning path remains the same.
If you're like me, you have most likely asked google too many times "where do I start?", the answers usually go like this "Start by learning HTML and CSS then Javascript". To some people, this is a good response, but to me, it wasn't, I needed more, I needed a roadmap, I needed to understand what these markup and script languages did to make up the website and how a website comes to be available on the web, I wanted to know what the web was.
With this post, I hope to answer the question "where do I start?" in the way I wanted it to be answered.
To begin developing websites or applications, you must understand how websites work. For every website you see online, there's what you see as you get on the site and there's the magic happening behind that you don't see. These two sides although different, work together to communicate and operate effectively as one unit for the website to function as it is meant to. These sides are called front-end and back-end respectively.

Why is this information important to me? I just want to build websites.

Before you start learning to develop a website, you need to know which aspect of the website interests you so you can follow the learning path for that area. Is it the putting together of pictures or videos to create a link of beautiful pages or is it to make sure that a beautifully created page works as it is intended? Some people choose to learn both, they're called 'Full-stack Developers'. Personally, I think they have some balls.

FRONT-END

When you click on a website's link, you are directed to the webpage or website that shows you a beautifully curated page made up of links, pictures, videos, texts, etc to give you the information you want. This is called a website's front-end or 'The user/client's side'. In this area, the user interacts with everything they see to experience the website.
When you think front-end, think of the most beautiful houses you've ever seen, how the colours complement each other and the design of the house is out of this world, that's the front-end of the house. It's the part you see, use and love.

Okay, I hear you, how do I learn to develop this side of a website?

When you have successfully learned to build the front-end of responsive user-friendly websites and applications (And I know you will!), you will be referred to as a 'Front-end developer', Cool title right?.
Well, to become a front-end developer, you need to learn these languages; HTML, CSS and JAVASCRIPT.

1.HTML

HTML stands for 'HyperText Markup Language'. It is a computer markup language used to structure a web page and its content. Using our previous illustration about houses, the HTML of a house is the foundation and structure of the house laid out using wood and blocks.

2.CSS

CSS stands for 'Cascading Style Sheet'. It is a computer styling language that sets the feel and looks of a webpage. CSS defines the colour, size and layout of the webpage's content. Again, using our house, the CSS of our house will be the colour the house is painted once finished, where the doors and windows are positioned, the interior of the house, the feel of the house when you walk in.

3.JAVASCRIPT

jAVASCRIPT is the scripting language that brings your website to live. You've structured and made your website and made it visually impressive? Great! Now you have to make users interact with the web pages in other to enhance their experience. Javascript is your guy for the job.
An example of javascript on a webpage Is the search box usually at the top right of most websites, this box helps you search for specific things on a website instead of taking days to find what you need.
Using our house, the javascript of our house will be how the doors open, the taps when turned on bring water or when you turn on the light switches, there's light.

This is a lot of information to process, where do I even begin?

Truth be told, it can be very overwhelming just knowing that one has to learn all of these, but it is worth it at the end. I started learning web development in 2018 and every time I gave up because it seemed like too much was going on until I decided to take my time and look for the right resources. I tell you there's a lot of resources out there, you need to first understand how you best learn things; is it by reading or watching a video? next, you find the resources that work for you.
Here's what has helped me start and stay on track so far and by so far, I mean that I started learning Javascript a few weeks ago.

This was the magic trick I needed, it helped me understand the concepts around web development and it gave me a learning roadmap. You don't get to pay any money for the extensive knowledge this site provides.

You would need to practice some lines of code and what better way than using freecodecamp. NOTE - When you finish a course and submit your project, you get a certificate, Yay!!! And it's absolutely free.

I swear by w3schools because it has extensive topics on the web development computer languages and great examples to guide you also. It is free to use.

My list will not be complete without this course. It's extensive, the lecturer is thoughtful and funny, she breaks every concept down like you're two years old. It's not a free course but there are times when there's a 90% discount off the price of the course and you get it for $11. It has a lengthy curriculum and personally, I have estimated that it'll take me 6 months to finish the course. This may be different for you, it is this way for me because I have a full-time job and other life commitments.

In the next part of this topic, I'll write about backend and other necessary information I have knowledge of that you might. Let me know in the comment section.

Until I write again, I leave you with the words of Ijeoma Umebinyuo;

Start now. Start where you are. Start with fear. Start with pain. Start with doubt. Start with hands shaking. Start with voice trembling but start. Start and donโ€™t stop. Start where you are, with what you have. Just... start.

Stay safe and Learn smart.

Nkwadochi

PS-If you're as excited as I am about the potentials of this blog, kindly share among your friends and together, we can build a community.

Top comments (9)

Collapse
 
gmlunesa profile image
Goldy Mariz Lunesa (@gmlunesa)

Such a helpful article. Thanks for sharing! ๐Ÿ˜Š

Collapse
 
favouramadi profile image
Favour Amadi

You're welcome. I'm happy you found my post enlightening.

Collapse
 
lexthefittechie profile image
IBHAWO OLUCHUKWU ALEXANDER

Great article, seems like you are speaking to me . Please I gave a question .

Collapse
 
favouramadi profile image
Favour Amadi

Hello Oluchukwu, thank you for your kind words. DM me on Twitter let's talk.

Collapse
 
lexthefittechie profile image
IBHAWO OLUCHUKWU ALEXANDER

Okay.

Collapse
 
cashbronyc_0 profile image
Malik Armstead

Awesome article....well saidโœ…
all the best to you on your journey๐Ÿ‘๐Ÿพ๐Ÿ‘๐Ÿพ๐Ÿ’ฏ

Collapse
 
ombax11 profile image
Ombax

When if i finish those 3 htm,css,js then i need to launch the web what i need to launch the web?

Collapse
 
favouramadi profile image
Favour Amadi

Hi Ombax, you'll need a lot of things ranging from domain name to host server. Send me a DM on Twitter and I'll share some links with you. I will cover this question as a blog post at another time.

Collapse
 
kirank108 profile image
kirank108

Wow, great beacon for directing new web developers. Thank you