The Front End Development Journey

The Front End Development JourneyAthena OzanichBlockedUnblockFollowFollowingMay 27From Mockup to CodeIn the first post of this series (The Full Web Development Journey), I talked about the phases of making a website.

I discussed the process of building a website, from design to development in short detail.

Then I followed up with a post (The Web Design Journey) covering the Design aspect in a little more detail.

Now it’s time to talk FEWD or Front End Web Development in a bit more detail.

Remember my goal here is to explain the various processes that go into making a website.

I want you to first understand the steps involved, then understand the specifics of each step.

Breaking this down into manageable easy to follow explanations.

Ok without further ado, let’s dive right in!Mockups and requirementsFor most Front End developers the journey starts with a set of requirements and a mockup passed to the dev team from the UI/UX team.

The developer(s) then need to take the image and create it using languages like HTML, CSS, and Javascript.

Each of these languages has its own function, I will briefly touch on that as we progress, and each more in-depth in future posts.

For the time being try to imagine it like this, HTML is kind like the FRAME of your bed, it creates a base that we can build on.

Using that frame we can add some style and flair to it with CSS which you can imagine as the box spring and mattress.

Then we can add a nice comforter set with a little Javascript which adds extra little features and flair that cannot be added with JUST HTML and CSS.

Touching on the codingGenerally, the HTML and CSS are largely written in unison and the javascript after the fact.

However, this is only true in most cases, there are plenty of cases where this deviates a bit.

Writing out the code is only one of many aspects of the Front End workflow, testing the code and checking for compatibility across more than one browser is another thing the developers must also do.

As the code is written the developers need to be sure that it functions as consistently well in multiple browsers AND various devices as well.

This sounds super technical and complicated but it’s really not, the bark is worse than the bite I promise!Once the HTML and CSS is in place the development of any needed javascript is usually put into motion at this point.

Unlike HTML and CSS which are largely static and non-interactive, javascript allows us to write code that helps users interact with the site in various ways.

If you have ever clicked an image on a site and saw a larger version pop up for you, that was likely done with Javascript.

Again unlike the previous two, Javascript is a very robust language with a huge amount of versatility to it, more on that later.

Soon the developers will have put together a set of files that together makes up the site that is being built!.From here it’s usually time to call on the Back End Development team(s) who will handle stuff like databases and login functionality and security.

This again was a very small overview, in my next post we will discuss an overview of the Backend Development process.

Thanks for joining me yet again, I hope you enjoyed this.

Please feel free to comment on the post and tell me what you think.

.

. More details

Leave a Reply