Have you ever wondered after learning all of the languages for website building how to start a complex project? You will find out in this article the steps to start a complex project. There are two things to do before even writing a piece of code. There are also 3 things after writing the code. Also of course the back and front code so let talk about it and jump into the world of a complex project.
DesignThe first thing you need to do to make a complex project is the design of the website. The design is to make a picture of the pages. You can write stuff in the shapes like if you want a textbox and a checkbox you could make two rectangles and name them textbox and checkbox we will go more deep in why when we get to the front end code. There are so many websites that have so many complex stuff and if you do not design you will not have a starting point to follow. A good tool to design the website pages is google slide. You can have one slide for each page and if you have a collapsible or a pop up you could make another slide and show that and design the panel for it as a collapsible, popup etc.
DocumentationThe second thing you need to do to make a complex project is the documentation of the website. The documentation is more info about each slide so when you write the code you know what to do. The documentation can also have the purpose of the website. In addition it can have a class diagram as well. More complex your projects get you will have more and more documentation.
Backend And FrontendThe third thing is the backend and the frontend pieces of code. Part 1 will be about the frontend. Part 2 will be about the backend. In part 1 it will be talking about how to start the frontend and with some examples. Part 2 will be talking about how to start the backend code and how you should plan which piece of code you should do first.
Part 1The first thing you need to start a complex project is html. If you have in your design a textbox and checkbox. You would need a div and put a textbox with a checkbox. If you want them separate you would need to add css. After you got all of the html and css then it is them for javascript. Now this is where your documentation will come in. You can use that and make the code. For an example if your documation said this button will have the textbox value and put it in an array. You simply just need an empty array above the function and get the value of the textbox and push it into the array in the function of the button. I would recommend making the html,css,javascript files and slowly working through it.
The last thing you need is a backend. You should do this when you feel like it is the time to connect the two sides. I would recommend writing on a model, then the url and writing the view for the model. For an example a model named textbox and you want to save it you would need a url. An example of a url is “api/textbox/” in a path function then writing all of the view code for that model. Then register the model to the database. Basically to code in steps that would make it easier to not have many things at once like two unfinished models and then starting another one.
OrganizationHow should you organize your code once it is so complex and you can not keep track of some things. You would need classes. A class is a way to group functions together. You should think about what functions are similar like cat, dog,lizard,lion,horse. You can have a class for them named animals. Organizing your code will help you if you want to add more stuff to the website. For any language you can have comments even. So for html and css you could have a comment of what this div contains and what this css class to if there is pseudo classes like hover and focus or what the classes make like if it is border-radius of 50px you can have a comment that say makes a circle. In javascript you could have a comment of the function. For example this function will save the textbox value to the database. For a class you could say that this class will have all of the code for saving the data to the database and with one function call somewhere else you will already have the code. In python it is the same, but different code so let see some examples. One example is this class will have all of the functions for saving the animals data. Second example is this model is for the dog animal. Last example is this function is processing the data from the database into an array that will be sent out to the front end and on the javascript side of it you could say then going to pick a random word in the array and display it in a div that has an id of show.
Taking outTaking out part is where you go through all of the code and take out parts that you do not even need or make a function for repeating parts. It will make the code even neater even though you have classes you might have some code that you do not need in that class. This also connects to the organization part of it.
FinalInconclusion you may want to publish the website. You can publish what you have so far with the functionality completed and then you can add more to it and publish it again. Will not be going in detailed but you need your own website url.
OtherIn this example of others we will be using a module that is named tkinter that is in python. Other things you may want to know if you are using a module in python that is tkinter for an example some things still apply. You always should documate and design your project if it has a display like the tkinter window or website screen. You should always try to organize your code and go in steps that would make sense like for tkinter make the layout of the screen and add the buttons and all of the other widgets and then add the functionality.