DEV Community: Favour Amadi

A practical step by step guide to learning Frontend Web Development.

Favour Amadi — Wed, 11 Nov 2020 12:12:53 +0000

If you're reading this and you're not sure where to start learning to develop websites and web apps, you might find this article helpful.
If you've decided that Frontend Web Development is where your heart is at and you have researched and decided on what learning resources work best for you, this post will help you outline a practical study plan that allows for knowledge retention and productivity.

Why do I need a study plan and what do you mean by Practical?

Many times, I see a lot of people say they will learn the basic frontend languages (Html, CSS, and Javascript) in one month. I am here to tell you that this is impossible. I am no web development expert or educationist if you but from the little I know; my experience, and interacting with experienced developers, I dare say that every day if you keep at it, you will learn something new. Everyday.
To learn effectively, you not only need a study plan, you need a practical one. A practical study plan puts everything into consideration, your job (part-time or full), your education, other commitments, etc. It doesn't exhaust you because you said you'd finish in a month but it's been 3 weeks, and you just got started on CSS. A practical study plan when followed aims at giving you the best learning experience and is effective.

What are your suggestions on Practical Study Plans?

1.Know or Have a Syllabus and follow it

A syllabus is a document that outlines everything that will be studied/covered in a class. All the learning resources I shared in my last post have syllabuses. To further explain why this is a great approach, I will be using the syllabus from MDN.
The MDN not only outlines a syllabus but gives an average finish time for each topic. This means that for every topic, you can decipher when you'll round up. This is very helpful and is a great way to plan your learning around your life. For a topic with a 10 hour finish time, you can decide that it'll take you 7 days because you work long hours or your school course work will take your time, etc, and then go ahead to divide 10 hours by 7 days. The answer will be 1 hour, 43 minutes. This will be your target when studying. Most times, you'll find that you surpass it or not reach it at all, they're all okay, no need to beat yourself up about it. Just readjust the time and divide again until you find the number of hours a day or week that you can freely study.

2.Practices are just as important as the learning resources

If you spend the next 4 months studying the basics of frontend web development but practice nothing, your knowledge is useless. You MUST practice, it is not negotiable.

But Why?

As you move along in the ladder that is the learning of frontend web development computer languages, you'll find that the codes become more difficult to retain in your brain, don't fight it, you're not a robot. You will not win. There's a joke that Software engineers are paid to sit in one place and google lines of code, it is true. You will find yourself googling which code fits into a line, copying and pasting it than actually writing an original code. But with practice, you will understand the basics of these languages and know when a line of code is necessary to get the website to look or behave the way you want it to. With Practice, you will have found more codes that do the same thing and wouldn't need to google again but only with practice. With practice, you will test your knowledge of the basics you learned, you will find your weakest links and improve on them, you will find that understanding a topic theoretically and applying the knowledge to practice are two different things. But with Practice, you will get better. Only with practice!!!

I will say this now, learning any new thing is not very easy, this is not any different, you'll need more than just sitting by a laptop with a book and pen. You'll need to be determined, be consistent and persevere.

Until I write again, I leave you with the words of Henry Hazlitt;

The only way we could remember would be by constant re-reading, for knowledge unused tends to drop out of mind. Knowledge used does not need to be remembered; practice forms habits and habits make memory unnecessary. The rule is nothing; the application is everything.

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.

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

Favour Amadi — Sat, 31 Oct 2020 05:19:22 +0000

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.

MDN DOCUMENTATION FOR WEB DEVELOPMENT

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.

FREE CODE CAMP

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.

W3SCCHOOLS

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.

The Complete 2020 Web Development Bootcamp by Dr Angela Yu

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.

Hello, World!

Favour Amadi — Mon, 19 Oct 2020 10:18:39 +0000

Hi friends, my name is Nkwadochi (pronounced ink-wah-doh-chi) and I am a web developer from Nigeria. Web development for me began as a hobby sometime in 2017 when I'd learned the basics of HTML and CSS in the University and would use the little knowledge I had to create awful looking sites from time to time - read as perhaps 3 times a year. I never thought much of it until July 2020. I began my journey to becoming a professional web developer on the 27th day of July 2020 and so far, it's been a beautiful, chaotic, and fulfilling journey. Before starting, I had spent the bulk of my time looking for websites and blogs that would help as a guide into this field in tech and while I found quite a lot that promised to hold my hand and guide me through, only a few were able to do this. The rest of them mostly repeated articles from a bunch of tech sites and played around with words, changing certain words to their synonyms and in general, it felt like even the writer didn't know what he/she was saying. Although I am nowhere near a professional, I have however improved in my knowledge of web development in the last two months and I am of the belief that no matter the stage of learning one finds themselves, there is always something valuable another person out there can learn from you and this has birthed this blog 'A beginner's guide to Web Development'. The goal of this blog is to answer most of the questions I had that made me spend months before deciding on where to begin learning and to document my journey so far, sharing whatever knowledge I gain along the way, code snippets, soft skills, navigating the industry, etc. I know that we can learn from each other and so I'll look forward to your inputs and feedbacks (constructive) and with time, perhaps host guest bloggers here also. I hope to share a post every Friday so look out for them. I'm open also to answering whatever questions you might have as long as I have some knowledge of the said question, else I may refer you to an article I found useful. Until next week Friday, stay safe, stay learning and improving yourself in every way that a person can. I leave you with the words of Denis Waitley.

"View life as a continuous learning experience."

Welcome, and thank you for joining me on this journey.

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.