Confusion about code maintenance

Hello community. I’ve done the HTML and CSS course in FCC and half of the JS curriculum. I’m constantly looking for information on coding and working on www.frontendmentor.io project to improve coding. I’m learning about the good practices on how to create a code from scratch to make it understandable for other developers and myself.

I’ve been using devtools to look at the html and css codes of different pages, and I notice they are very different from everything I’ve learned here in FCC. This is frustrating because in my mind I thought what’s i’ve learned so far was going to be sufficient to be able to maintain or edit a page already created.

I got an offer to update a page already created. My knowledge in backend development is very limited. I thought it would be as easy as looking for the html and css code and make some changes. I didn’t know where to start so I looked in devtools for the folder structure of the page it I didn’t understand it at all. I found an index.html page but it has a bunch of wordpress links and scripts along styles, bootstrap, etc, and a lot of divs all mixed up in the html page. This is confusing because I keep learning about the structure of these coding pages but on the real world they seem to be different.

Is there a guide that explain how does a front-end developer gives maintenance to a page already created for a client by someone else? I have a lot of questions on this topic and I can’t seem to find guide anywhere. How are these things usually maintained? Do I need the code from the client and I edit it using vscode? Do I need frameworks? Do I need wordpress? I’m really confused on all of this and kind of stuck as to where to go next. The page code almost seemed like it used wordpress themes and frainkenstained a lot of elements using bootstraps and other stuff and everything got dumped on the index.html. Any advice? Thanks!

Its worth mentioning that the end result you see from a browser devtools is almost never the actual code written by developers.

What you see in devtools is the end result, but how it got there could be from multiple different sources. From scripts that add their own code (like google analytics) on page load, to frameworks like React or Angular or Vue that take code you write, compile it into bundles and ship those out to the end page.

The main reason for this because the demands of writing software rarely match with what the demands of a website are.

For example, writing clean and readable code means expressive variable names, sensible indentation, and comments.

For browsers, all of that doesn’t matter whatsoever, and each character of code is more memory loaded that could be saved if things were optimized. This optimized version is usually what you see will in devtools.

Not all sites, or all elements of a site are built this way, but most today are.

Do you have access to the source code directly? This is probably where’d start. Hopefully its documented to a degree, or there are at least some references on where you can start.

The real world is inherently “confusing”, in that best practices aren’t laws. Its possible the original developers learned an alternate way, or didn’t care, or some mix of different reasons resulting in the end result that is the current codebase.

Every case is different, as every project is different, there is no rock solid guide

The main things you can lean on are libraries, and the language itself. No matter how bad the project is architected, or how little documentation is provided, JavaScript is JavaScript, and if external libraries are used, then you can look at those for documentation.

I would talk with the client to get more information on how and where the current production code is. It’s possible it’s actually maintained on wordpress, which would be the starting point of where you come in. Or maybe it isn’t wordpress at all and is just a huge mess.

Good luck, keep building, keep learning :+1:

1 Like

Thank you for your answer! I really needed an opinion on this. Will contact the client again and ask if they have that information from the original creator. I was going to the devtools and under sources I would look in the folder for an index.html and open it in VScode. I didn’t really know it might look different than the original so I lost my cool there. Thank you for clarifying! Much appreciated.

1 Like