Building Web Apps. Things to do to get you started.
The internet is for everyone. It’s nice to remember that.
The degree of difficulty when getting started in web development is relative. Some people get into it easily, and some don’t. This is a curated list of things you should do or know when starting out as a frontend web developer. I wasn’t told some of these things years ago, but it would really help to know them before diving in.
Start with a webpage:
1. HTML
Don’t jump straight into trying to build full-fledged applications. Take it one step at a time.
If you are starting out as a frontend web developer, It’s important to build your HTML and CSS skills first. It’s inevitable. So start with a webpage, get busy with some basic HTML tags:
<!--divisions--> <div>This is a logical division</div> <span>This is a span element</span> <!--Headings--> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6><!--Headings stop at h6--> Â <!--Paragraphs--> <p>This is a paragraph</p> <!--Image--> <img src="https://link-to-my-image" alt="alternative text"/>
These are some simple tags to start with. Below is what the basic structure of an HTML page looks like (e.g learning.html)
<!DOCTYPE html> <html> <head> <title>Title of my HTML page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p>This is my first paragraph</p> </body> </html>
Its okay not to know what the meta tags mean, you’d learn that with time.
One more thing, it’s okay to remember some tags and not all of them. There are resources all over the internet to help if you forget 🙂. It is also very important that you learn about semantic code.
2. CSS
While HTML describes the structure of the webpage and is basically the building block of web pages, CSS helps with the styling. With CSS, you can adjust font sizes, colors, background images, image sizes etc. CSS also allows you to do some form of animation (Don’t get into that yet, no distractions. Eyes on the price. You’d get familiar with it in no time).
You can add a reference to your CSSÂ file (e.g style.css) in your HTML file head like this:
<!DOCTYPE html> <html> <head> <title>Title of my HTML page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet" /> </head> <body> <p>This is my first paragraph</p> </body> </html>
And with CSS, we can change the color of the paragraph to blue,
p{ color: blue; }
There are resources online that help with HTML and CSS.
Ask whenever you’re stuck:
Starting out, it’s absolutely normal to be stuck in some areas. Try to “ask” Google for answers. There’s a high chance someone has been through what you’re going through and found a solution. If that doesn’t work, visit documentation sources like W3Schools or MDN.
Take Courses:
This is VERY important. You learn faster and you learn the right way when you take web development courses. In these courses, you would have projects. There, you would build your first actual web application. You can take courses at Udacity, Pluralsight, Treehouse, Udemy or Lynda.
Learn JavaScript:
Javascript is one of the three core technologies of the world wide web. There are a lot of frameworks that are built on Javascript for the web, mobile and even desktop. My advice is, learn Javascript as a language FIRST before adopting any of these frameworks or libraries. I have created a repository on my GitHub, where I share code snippets for different javascript concepts from beginner to advanced level. There are also SO MANY resources online that could help you learn JavaScript as well.
Understand css BEFORE downloading bootstrap or materialize:
This is tempting. We all want to save time so we rely on these top CSS frameworks to help with things like responsiveness and basic fixes. The truth is, these frameworks can be really overwhelming if you jump right into it without actually knowing the basics. So, learn CSS first, create some stylesheets and do some styling on your own before you use this popular framework that you read off the internet or that your friend told you about.
Download Bootstrap and Javascript Frameworks:
I didn’t just confuse you. Frameworks are VERY good. They make our lives easier when building for the web. The only important thing is that we understand the fundamentals of these web technologies before using the frameworks.
Learn about Software Architectural Patterns:
It’s not as difficult as it sounds. Its just a framework that helps you write good, scalable and maintainable code. Trust me, if you learn and apply them to your projects, you would be a BOSS.
Use good text editors:
There are tons of text editors and tools out there and I would recommend a few. Microsofts VS Code, Atom. JetBrains Dev Tools, Brackets etc. Good Development tools provide Intellisense that help you in the coding process and prevent you from making tons of mistakes.
Make new friends that will help your growth:
This is also very important. We are as good as the people around us. Always think growth and be enthusiastic. Reach out to people that you know started like you and are better at it now. You’d learn new things and if you want to constantly improve, you’d get there.
nice one AN
Thank you 🙂
very informative blog and useful article thank you for sharing with us, keep posting.
Really helpful thanks