Beginners: Website Development
Guide to Website Development
Of course, there comes a time in your life when you’re a bit confused about your future. If you’re reading this, you’re obviously aiming to become a Website Developer, so we’ve scratched ‘Find a career for my future’ off the list. However, you may be heavily dependent on online resources and a lot of them will not tell you what your next step is or what technologies you need to learn for the path you want to follow. So I’ll help you out by giving you some tips that I’ve used myself to become the self-taught developer I am today.
Decide What Type of Web Dev You Want To Be
Ah, you thought you’re done with making decisions, but you’re not. Website Development is still a wide field as they’re many things that are required to do to completely design and deploy a website. Let’s look at a few.
Front-End Development
From the name itself, you can tell what this type of development entails. Front-End Developers are, of course, responsible for the design of the ‘front-end’ of the website. Everything you see and interact with on a website is built by a Front-End Developer. We owe front-end developers for the amazing and interactive websites they’ve built.
Front-end dev relies on the below languages:
- HTML — Hypertext Markup Language: You can consider this your ‘foundation’ language as the other languages relies on HTML. HTML is the skeletal system for the website for which the other language can ‘modify’.
- CSS — Cascading Stylesheet: When being introduced to CSS, they’ll describe it as the language responsible for the ‘presentation’ of the website. CSS is the second layer on the website that modifies the existing HTML code to look and feel much more appealing. Of course, plain ol’ HTML alone won’t be appealing at all. We’re not living in the 20th century.
- JS — JavaScript: We’re not done with our website by just adding HTML and CSS. JS is widely used also for the UX (User Experience) of the website. You’ve seen loading pages, pop-ups, fading dropdowns, you’ve seen the website respond to you clicking on a button or an input box. All of that happens because of JS. And there’s more! JavaScript has a wide range of frameworks that you can also get familiar with like ReactJS and AngularJS (another choice you’ll have to make soo *rolls eyes*)
With just the above languages, you can build a beautiful looking website. But is that all that is needed for a website to run?
You can become a Front-End Developer and not have to worry about backend processes, but I’d advise that you be familiar with it.
Back-End Development
Yes, it is what you’re thinking (if we’re both thinking the same thing); Back-end Development is the development of the back-end of the website. Allow me to go into details.
You’ve completed the front-end of the website and it looks amazing, but…where do I store data? How do I communicate with the webserver? What happens when I click “Enter” on a form? Without back-end processes, your website would pretty much just be…static. Imagine having a computer and not being able to click on anything; just moving your mouse around. That’s your website without a backend.
Here are some languages used in the backend:
- SQL — Structured Query Language: This language is widely used mainly for interaction with SQL databases. Remember I asked what happens when I click “Enter” on a form? Well, one of the things (yes, one of the things) that happens when you click “Enter” is that data is either sent to the database or taken from the database by doing SQL Queries, depending on whether the form is adding or searching for information (Search Bar).
- PHP — Hypertext Preprocessor: This language is also widely used in the website backend as it is the ‘server-side’ language that we use to interact with our web server. To send information from the website to the database, we can use PHP and ‘house’ the SQL queries within our codes as SQL cannot directly interact with the website without a server-side language.
- Python: Let’s not forget one of my favorite and clean back-end languages, my buddy Python. Most of everything I mentioned for Python, AND MORE, can be done using Python. It’s basically one of the most versatile programming languages there is that most developers prefer to use.
Full Stack Development
For you ‘Jack of All Trades’ out there, there is a field for you. If you’re pretty much interested in both Front-End and Back-End Development, you can become a Full Stack Developer that can do both of these development processes. You basically have all the fun of building an entire website by yourself using the technologies provided, but I would advise you to learn these languages in the same order I listed them.
Utilize Free Courses Online and Practice Practice Practice!
The beauty of the internet is that you can literally find anything you need. They’re tons of free courses online that you can use to help you learn about website development. I’ll tell you of a few and my experience with some of them.
- Sololearn.com: This is where I first learned about programming in general. I learned HTML, CSS, JS, and even Python. What I love about Sololearn is that after each lesson, you’re given quizzes to make sure that you’re following the course and not just quickly brushing through the material without understanding.
- edX.org: This site has a bunch of courses that you can ‘audit’. Most courses are free, but you would have to pay for the certificate. I’ve done the HarvardX CS50W Web Programming with Python and JavaScript and it is amazing! This course teaches all you need to know for Web Development, including how to use Git (more on this in my next story) and how to use and create APIs, website securities, ORMs, and more.
- YouTube.com: Yes, the old reliable YouTube. Most of the things I’ve learned to this day were taught to me from YouTube tutorials (which I will be starting soon). They’re tons of people on there that you can subscribe to and learn from. As long as you have a course outline, you know what to look for, what to study, and then find your content online and PRACTICE!
Find A Great Text Editor
When you’re now learning web development, tutorials would typically say that you can use ‘Notepad’ for coding. While you can, and it would do to help you get accustomed to writing the codes by yourself, using a text editor makes things much simpler to understand. Let’s look at a few.
Atom
When I was first introduced to Atom, I was in love. Everything about it, except its lack of extensions (you…may not need to know about this yet), was amazing. One of the features I love about Atom is the Teletype feature. Basically, you can share your session with someone else and collaborate in real-time. Besides that, Atom is a great text editor that you can use for your projects.
Visual Studio Code — VSCode
You may have heard of this text editor before, but if you haven’t…which rock do you live under? VS Code is one of the best editors there is out there that has everything you need for your Web Dev career. Hundreds of extensions, support for a wide range of languages, great themes and so much more. I always suggest this text editor because the app is constantly being updated so you’re never left with outdated features.
Notepad ++
Think of Notepad ++ as the upgraded version of your basic notepad. I see most schools and some universities using Notepad ++ to introduce their students to website development. It’s very simple and neat. Unlike Atom and VSCode, this editor does not have extensions. But it’s a great text editor for beginners.
Follow the above, and you’re on your way to becoming a web developer. I’ll be making more content surrounding Website Development, so look forward to that.
Thank you for reading!
Follow me on:
