Web development refers to the process of creating and maintaining websites and web applications that are accessible via the internet or a private network. It encompasses a range of activities, including front-end development, back-end development, and full-stack development.
Frontend development refers to web development that focuses on what the users see on their end. Using the related coding and design techniques, you as front-end developers build the elements of an application that are directly accessed by end-users with the goal of rendering the entire interface elegant, easy to use, fast, and secure, fostering user engagement and interaction.
Starting with frontend development can be an exciting journey! Here's a step-by-step guide to help you get started:
-
Learn HTML: Understand how to structure content.
-
Master CSS: Learn styling and layout techniques.
-
Practice Responsive Design: Ensure your sites work on all devices.
-
Study JavaScript: Add interactivity to your websites.
-
Explore Frameworks: Discover tools like React, Angular, or Vue.js.
-
Build Projects: Apply your skills by creating projects.
- HTML Course: https://youtu.be/pQN-pnXPaVg
- CSS Course: https://www.youtube.com/watch?v=OXGznpKZ_sA
- JS Course: https://www.youtube.com/watch?v=PkZNo7MFNFg
- GitHub Course: https://www.youtube.com/watch?v=RGOj5yH7evk
- Basic HTML & CSS: https://www.codecademy.com/catalog/language/html-css
- Basic JS: https://www.codecademy.com/learn/introduction-to-javascript
- More JS: http://eloquentjavascript.net/
- DOM manipulation: https://www.codecademy.com/courses/intro-to-the-dom/0/1
- Positioning Content: https://learn.shayhowe.com/html-css/positioning-content/, https://css-tricks.com/snippets/css/a-guide-to-flexbox, https://www.thoughtco.com/dont-use-tables-for-layout-3468941
- Responsive Web Design: https://learn.shayhowe.com/advanced-html-css/responsive-web-design/
- Colours and gradients: https://learn.shayhowe.com/html-css/setting-backgrounds-and-gradients/
- Forms: https://learn.shayhowe.com/html-css/building-forms/, https://www.javaworld.com/article/2077176/scripting-jvm-languages/using-javascript-and- forms.html
- Web Local Storage: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_St orage_API
- Javascript Requests: https://www.codecademy.com/courses/javascript-beginner-en-EID4t/0/1
At this stage, you can start working on basic front-end projects! Try some of these out —
- Build your own portfolio website! Try deploying it with GitHub pages
- A basic weather app
- Clone the Slack website (https://slack.com/intl/en-in)
- Rock Paper Scissors
- A website showcasing your favourite movies with information about each movie (try using an API for this!)
If you’re done with all of this, it’s time to move on to the next step - JavaScript frameworks! Follow the projects they teach along with the courses!
- React JS Course
Introduction: https://www.youtube.com/watch?v=N3AkSS5hXMA Course: https://www.udemy.com/course/react-the-complete-guide-incl-redux/
- Vue JS Course Introduction: https://www.youtube.com/watch?v=nhBVL41-_Cw Course: https://youtu.be/qZXt1Aom3Cs
-
Optimize Performance: Learn how to optimize your website's performance by optimizing images, minimizing HTTP requests, and using best practices for loading and rendering content.
-
Stay Updated: Frontend development is constantly evolving. Follow blogs, online tutorials, and attend web development conferences to stay updated on the latest trends and techniques.
-
Build a Portfolio: As you gain experience, create a portfolio showcasing your projects. This will be essential when you're looking for a job or freelance opportunities.
-
Collaborate and Contribute: Join open-source projects or collaborate with others on coding challenges. This will help you improve your skills and learn from experienced developers.
-
Continuous Learning: Web technologies are always changing. Dedicate time to continuously learn and improve your skills.
Whenever you load a website you might have noticed a request is sent to the server and then the data is returned. A backend server handles processing that request which can include but not limited to authentication (login), fetching data from the database.
To write backend servers, some popular backend frameworks are used like:
- Django - Python
- ExpressJs - NodeJs
- RubyOnRails - Ruby
- Laravel - php
- and many more...
In this guide we will be focusing only on Django which is written in the Python language.
Before you get started with Django you must grab the basics of Python, you should have a grasp on the syntax, object oriented programming, how a python program is structured and, what are python packages.
To start with basics of python you can go through the following videos:
Python Basics - Corey Schafer https://www.youtube.com/playlist?list=PL0xAa_1yXUG9Mf-cTKty1h0_7tbct5qgq
This will cover the following topics:
- Setting up Python
- Datatypes and Variables in Python
- Functions
- Conditions and Loops
- Modules and Packages in Python
- Working with lists, tuples and dictionaries
This playlist will cover the basics for you to get started with Object Oriented Programming in Python which you can start learning from here:
OOP - Corey Schafer https://www.youtube.com/playlist?list=PL-osiE80TeTsqhIuOqKhwlXsIBIdSeYtc
This will cover the following topics:
- What are classes?
- Implementing classes and methods
- Inheritance P.S.: This is not a complete coverage of all Object Oriented Programming Principles, but is enough to get started with building something!
Note: It is more important to cover the topics that have been suggested here. There are plenty of other resources available on youtube and elsewhere, feel free to give them a try!
Understanding how to use git is extremely important to manage collabrative code and working with large projects! This tutorial will cover everything you need.
Git and GitHub https://www.youtube.com/watch?v=apGV9Kg7ics
The best way to learn is to experiment and build! So, finally you can start building a Django app. This playlist covers the basics of django and hosting the django app. The advise is to follow along the tutorials, i.e. to build side by side with the tutorials.
Django - Corey Schafer https://www.youtube.com/playlist?list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p
This will cover the following topics:
- Setting up Django
- Setting up Routes
- Creating Views
- Database
- User Registration and Login
In addition to the above playlist, it is highly recommended to understand the request response lifecycle in Django and everything about the HTTP protocol:
HTTP Protocol - Traversy Media https://www.youtube.com/watch?v=iYM2zFP3Zn0
Django Request Response Lifecycle - The Very Academy https://www.youtube.com/watch?v=9X83BZ1cF7o
After you are done with the tutorials, you must try to build something now! You might need to revisit the tutorials for something or look for new information about something and that is part of the process. Learning this process is how you get good with any kind of development!
As a developer it is very important to learn how to read documentation and luckily Django comes with excellent documentation. If you are someone who is better at learning via reading be sure to explore the Django documentation below.
Django - Documentation https://docs.djangoproject.com/en/4.2/
Python - Documentation https://docs.python.org/3/ The Python documentation should not be needed for most of it, but feel free to explore
A lot of the times you are going to get stuck on a problem and have no idea what to do, it is easy to get in these situations and give up but always remember you have Google at your disposal, being able to use Google effectively to look for solutions to your problems and errors is one of the most important skills to develop throughout.