From Mockup to Code

it's an event to talk FEWD or Front End Web Development in a bit more extra detail. Remember, my aim here is to describe the different processes that go into building a website. I want you beginning to understand the actions involved, then understand the specifics of all levels. Cutting this down into manageable, simple to follow explanations. Ok, without more ado, let's jump right in!

Requirements and Mockups

For most Front End developers, the course starts with a set of conditions, and a mockup moved to the dev team from the UX/UI team. The developer(s) then want to take the image and design it using languages like  CSS, HTML, and Javascript. All of these languages have their purpose. I will shortly touch on that as we improve, and any more in-depth in later posts.

For the time being, try to visualize it like this, HTML is a type like the FRAME of your bed; it builds a base that we can rely on. Utilizing that frame, we can attach some style and aptitude to it with CSS, which you can visualize as the box mattress and spring. Then we can assign a beautiful bedspread set with a little Javascript, which adds extra small features and flair that cannot be combined with JUST HTML and CSS.

Touching on the coding

Generally, the HTML and CSS are written mainly in cooperation and the javascript after the event. Still, this is only true in most of the cases; there are lots of situations where this deviates a little. Writing the code is only one of the significant aspects of the Front End workflow; testing the system and checking for adaptability across more than an individual browser is the extra thing the developers must perform. As the code is written, the developers want to be sure that it functions as consistently well in multiple browsers AND various devices as well. It sounds super technical and complicated, but it's not; the bark is worse than the bite, I promise!

Once the HTML and CSS are in place, the development of any needed javascript is usually put into motion at this point. Unlike HTML and CSS, which are mostly static and non-interactive, javascript provides us with a written code that helps users interact with the site in many ways. If you have ever snapped an image on a website and saw a more massive version pop up for you, that was likely done with Javascript. Again unlike the past two, Javascript is a powerful language with a tremendous amount of versatility to it, more on that later. Soon the developers will commonly put a set of files that often makes up the site that is being made! From here, it usually's time to call on the Back End Development team(s) who will handle stuff like databases and login security and functionality.