Coding as a Front-end Engineer: First Experience
I’ll tell you my story about myself becoming a front-end engineer (or developer). This story is based on my first experience as I’m never touched this “front-end technologies” before. I wrote this story because I’m feeling interested to share my thought about this experience. I learned some front-end tips in this story, and I hope you guys can understand it well. The first tip I’m going to tell you is don’t feel bored to learn new things. If you feel bored, even if it’s just a little, dont worry, just do it. And soon you’ll never regret what you learned before.
This is where it started..
This experience of mine I got because of my (and my friends’) mini-project about a product. This product I told you is a web-based tech, so it will absolutely necessary to get some web developer (back-end and front-end). The first thing my friends told me to do was to code the home page of that web (it means its front-end). So that’s where I started to code the HTML things.
First things first, I need to code the home page (or, the index page). This can be done by using only pure HTML, CSS and some JS mini-script. Not to mention, I put Bootstrap 4 as CSS library to help me design the page. This code (I mean, HTML and their friends) is not the same as the code I used to write before. I wrote scripts of Python, Bash and Java earlier, but this thing, HTML and CSS, isn’t look like them. This markup language doesn’t need any logic, but I think that it’s rather tricky. The “tricky” part I mentioned is when we need to “define” what the page will be shown. OK, that’s fine by me, basically I need to do that in order to finish the page. Besides, I want to know how to code those “front-end” things and I’m willing to learn that.
At the process of coding, I got several tips when finishing the page. Here are some of them:
First, I used “red border” to see what I’m doing
Yes, a red border. Basically I need to define them in my CSS selector so I can easily use them over and over again. This “red border” of mine will help me to see (or debug) what I’m actually doing right now. And after I feel like I’m done, I removed all of those borders and see a “clear” page I made.
Second, I need the page (and the other pages) to be responsive
Although Bootstrap’s support for responsive design, it only templates. You must add some code to match the template into your page. You want your page to fit into all screens, right? From smartphones, tablets, and laptops, right? So you must always think responsive. Think about how your page will be shown in those devices.
Next, responsive means it supports most devices (with different screen resolution)
The next step after thinking how your pages will be shown, now it’s time to act. Start with you code for the smallest device (smartphones), then tablets and laptops. If you done it right, you will get your visualization about your page across those devices. I recommend (as a newbie, of course) Google Chrome’s built-in Developer Tools to see what your page will be shown in different resolutions. You can see in Developer Tools many presets for different screen resolutions you can use. I think this tool is very useful when building (coding) a web page.
Last, save the assets (or give some placeholder first)
The “assets” I meant was the symbol, logo, fonts, or anything else that you might be using in your page. You can get this from your graphic designer (teammates) or you can just pick any free logo from some sources. One of those source I mean is Flaticon. You can get some free logo by giving credits to the author of the logo. It’s not a problem when you get some logo that slightly different from the page mockup, you just use them as a placeholder for the real one later.
To do next: learn some front-end framework
Next thing to do after picking up some pure HTML CSS JS codes is to learn some framework to work with later. Some interesting framework for me maybe like React or Vue.js. This might be a help for me to make more complex pages later.
I think maybe it’s enough from me for this little story. Again, this story was written based on my first experience and my thoughts. If you might like this story of mine, or anything you want to respond to this story like comments, suggestions or else, let me know in the comment box!
Oh, and thanks for reading this story! See ya in the next story!
