My Web Development Process Part 2: Code

I'll be discussing how I develop web-based apps. I'll include how I do things, what software I use, and resources that helped me. I'm still a college student. So I expect that my web development process will greatly evolve once I enter the workplace and gain more experience.

In this post, I'll be discussing the code part of my process. If you missed the first one, feel free to read the Design Part of my process. 😊

For now, I'm following these steps:

1. Research and Ideation
2. Design
   • User Experience (UX) Design
     • Rough Sketches
     • Wireframe
   • User Interface (UI) Design
   • Database Design
3. Coding
   • Front End Development
   • Back End Development
4. Test and Deployment

---

Coding

Now that the designs are finalized, we can now start coding. My process consists of two parts:

• Front End Development - where I translate design to code.
• Back End Development - where I add some logic and database.

I do front end first, then the back end after.

I put breaks in between whenever I'm coding. This lets me ponder on the task I'm working on. I also realized that when I ran into a bug, breaks help. I'll set a time frame to work on that bug. When the time is up, I took a break whether I like it or not.

I let my mind wander while I do other stuff that isn't coding. This makes me think of the solution from a different perspective. Not only machines overheat when overused, so does your brain. If you want to deliver your best, then you should practice self-care.

Front End Development

Before I code, I gather the assets that I need such as:

• Fonts and Icons
• Pictures
• Others

I also think of these questions

• Am I gonna use templates or should I go with a custom one?
• Am I building this app with scale in mind?

These questions are often considered in the design and planning phase. So you may know the answers by now.

If you're using a template, then you can skip this part and go straight to Back End Development.

Else if you're going to create a custom one then go ahead.

The Grid

I first start with analyzing the layout of the design. I identify the squares in each screen.

Let's take this as an example:

Those elements are all contained within a box. Highlighting them, the result would be:

I took a top-down approach. Starting from the bigger components then down to the smaller ones.

This way I'll get a clear grasp on its grid layout. In here, the design has two major columns. The left is for the image with its caption, and the right is for the quote and some info. If the image on the left covered the whole left column, then I'll know that it's a background of a div. But since it isn't, I can tell that it is an img tag inside a div. Though, it depends. One can have many solutions for an answer. You just have to pick the most suitable for that situation.

Knowing how the layout is organized helps in knowing what kind of grid you're going to make. Then, I code the grid (CSS Grid, Bootstrap, etc.). I temporarily add background colors to visualize it.

You can see the CSS Grid using Developer Tools:

Though, you can also use it to see the grids you made using frameworks. Just use Developer Tools to your own advantage.

Iterate throughout the pages of the website

Then, I'll repeat these steps:

• Make a Grid (HTML & CSS)
• Add elements (HTML) - preferably use semantic tags
• Add styles (CSS)
• Add behavior (JS)
• Make it look good on different browsers (support IE, I dare lol. Just think of graceful degradation)
• Polish its responsiveness for mobiles, tablets, etc. (Media Queries)

When I code, I go through each section per page. Then each page per website.

Don't forget to polish your site for SEO and Accessibility.

When the front end is done, I test deploy the app. Then, ask a teammate to test and review it. After that, I work on the revisions or bug fixes.

Though, your process may evolve as you decide to use frameworks, libraries, preprocessors, task runners and such. What I've shown is the simple way (for me, I think haha) in doing the front end.

Back End Development

I've only done back end twice: during my OJT and now in my current school project. So, I got nothing much to say in this.

Anyways, my process kinda looks like this:

• Code the Database (Tables, views, and etc.)
• Populate the Database
• Work on Authentication (Login, Register, and etc.)
• Work on each module (Do them based on priority)
  • Add CRUD Operations
  • Add Tricky Operations
• Polish the Access Control
• Polish the Security/Validations

I prefer having mock data to work with that is why I start with the Database.

Code Editor (in case you're curious)

For my code editor, I use:

• Visual Studio Code (powerful editor that has built-in git and terminal)
• Sublime Text (simple editor that is quick and easy to use) then pairing it with Hyper (a beautiful interface)

I often switch around these two editors depending on my mood. Anyways, there are also other editors you can try out:

• Atoms
• Brackets
• Vim
• Others

I've installed both Firefox and Chrome. While Microsoft Edge is already installed. I mainly use Firefox for development then check the app using the other browsers.

---

Test and Deployment

Now that the coding/development phase is done, we can now start testing. By the way, you can do Test Driven Development in the previous phase. It is where you write tests first, then work on creating functional code that passes these tests.

After doing some front end, I test out my code if it works on all browsers. Then, I test out the functionalities one by one after adding some back end. When everything is all set, I test deploy the app and ask someone else to review and test it. Often times, they'll discover an issue.

In the beginning, I used these for deployment:

• 000webhost - it can host PHP+MySQL apps for free. (Yes, I use PHP for now... hehe)
• GitHub Pages - for static websites

I was intimidated with the Command Line Interface (CLI) at first. I even upload files to GitHub instead of using Git lol.

Now, I have seen the awesomeness and the glory of using the CLI. So I now use these for deployment:

• For Static Websites:
  • Netlify
  • Surge
  • GitHub Pages
  • GitLab Pages
• For Web Apps:
  • Heroku
  • and remotemysql - for testing only

You might want to check out this article regarding Deployment 👇

---

Wrapping Up

Seeing how requirements turn into designs which in turn be translated into code is awesome. You don't need to dive in deeper in other phases. Gaining some insights is enough. Understanding the fundamentals of other areas besides coding can help you grow as a developer.

For the coding part, all I can is that tests are important. Do it before or after you code the functionalities. Just don't forget about it. Also, getting feedback from your teammates is valuable. They may see something you might have overlooked.

Hope that sharing my web development process helped you in any way. Now I'm curious how you guys do yours. 😆

Thanks for reading and happy coding! ✨