The warm-up
It is no fluke there is a plethora of front-end developers in the tech space, and there are many more who aspire to walk down that part. It is just HTML and CSS, isn’t it? This is the mindset people would use to approach the space. Now, in the space, they discover all the issues that come with frontend development, and they come to the realization of it, then, the hassle starts.
What is frontend development?
I can define this by posting what research has said, and what some other article has said about the subject, but my job is to bake cakes on the internet, so why don’t I give you a slice of what I have baked 😉.
It is necessary to understand what exactly you are doing. Take this instance. You go up to order a meal from your popular meal vendor, and no one comes to answer you, instead, you go to the kitchen, and would have to locate all the ingredients to make the food, and then, you start to prepare. There is no sort of interaction which has kept the meal for you, and you waste time trying to get your meal as you have to prepare it.
Or, imagine you have to get an item from the store, and they are all in boxes. Then you have to search through each box to get what you need. All the hassle and time wasted getting you what you need.
This is where front-end developers come in. They are the waiters who come to take your order, and the store-men who place your items on the rack and tag their prices, so you can access your products easily, and save all your time and energy trying to understand and comprehend how to locate your stuff.
Front-end development as a practice.
It is common nowadays to see a large flux of developers move from frontend development to another practice because of the “complexities” which follow the craft once they see it is not all about HTML and CSS. Even in these two, massive complexities are faced trying to master them. The usual issues usually arise when you have an alignment issue from your design, and you try to rectify them, and you create more issues than the one you have supposedly solved! Terrifying right 🥶🤧. Yes, and this causes a lot of issues when it comes to CSS. Another fundamental example is when you fail to describe the accurate class name or id for your HTML element, and you are done with your CSS styling which is supposed to reflect, and nothing happens. You start to debug, even to the extent of deleting the entire file. Yes, it is very draining. But this is my field.
Nowadays, frontend development has taken a wide innovation spectrum, from clickable buttons to interactive 3D game-like modes, which enable users to be able to interact with the website. There is now a plethora of frameworks which are available for use to create and generate intuitive web pages. This is where the entire hassle comes in, mastering these frameworks, and being able to use them for your fundamental development patterns.
Now, there is an adage that goes
Jack of all trades, but a master of none.
This may or may not be true, considering the entire need for the use of these frameworks. The main thing is moderation. You need to know what you need to use to achieve what you want to achieve; this means that you should be able to understand whichever method you are using and understand how to make maximum use of it to bring interactivity to the users.
The current state of front-end development.
Now, there are a lot of ways frontend developers bring interactivity to the web, and how they incorporate it. It may include subtle but captivating animations, which enthral users, the effects that happen when you are on a particular item, or the arrangement of colours and placement of items on the screen. Fonts and typefaces also play a huge part in what affects users and how they use their websites. They are used to display a particular feel, and they play a huge part in how users would view a particular website, and what it entails.
Front-end development remains what it always has been, providing an easy and understandable means for users to be able to understand and interact with whatever you have placed in store for them. For advanced cases, frontend development also entails the methods used to hold users captivated on their website, so they can generate more traction, and amass those digital footprints. Some others, a minute other have decided that frontend development is a place to express their artistry to the maximum limits! They would use any methods, complex and others like it to ensure they are able to express themselves artistically in their works, and it elucidates their creative passions and what exactly they define as frontend development. This has made them stand out in their fields. Independent creatives like Aristide Benoist, whose work I admire is one of those whose finesse is always portrayed in whatever he does.
Frameworks and libraries for front-end development
Initially, I intended this piece to just be my view on front-end development, and why it should be embraced as more than just something to jump into. But, to give more guidance to individuals who would need it, I will explain and give some resources to what I use in front-end development, that I find useful (you will not see ChatGPT).
Now, to add a dynamic effect to webpages, you use JavaScript. Hence, all the frameworks and libraries I will be mentioning dwell on JavaScript. They have been developed over the years by developers who have seen the increasing demand for web interactivity and have provided means to work on this.
Now, to start with some UI libraries I find intuitive for development, we have;
Framer: Now, Framer is not just a library, as it has evolved into a framework for building low-code/no-code interactive web pages. The part used by developers to incorporate interactivity in webpages is framer-motion. It is a very intuitive and easy-to-learn interface.
UIverse: this is a library where you can copy and incorporate any form of UI element animations into your website. The code is there and just requires you to copy and paste. It ranges from Form elements to social media buttons.
Clippy: For those who love to draw shapes. You can use this to generate shapes using the clip-path tool CSS provides, to be able to draw shapes. It is a very intuitive tool.
Animate.css: This is an intuitive library which allows you to add animations to your HTML elements without the need to write those long and boring CSS keyframes rules to animate your element. It is attached to the class of your HTML element, and it works like magic.
Neumorphism.io: it is an intuitive design tool, which helps to provide the perfect box shadow element you need to create a neumorphic event for your webpage.
Favicon Generator: If you have been searching for ways to be able to generate favicons for your project, this is a resourceful tool which would help you to convert those images to favicons for your use.
Font Joy: have you been looking for the perfect font combinations for your website, this tool is very intuitive, as it generates font matches with the click of a button
Coolors.co: This website offers intuitive combinations of colours you could use for your next project. It is highly customizable and helps save time in looking for the perfect colour combinations for your project.
I could go on listing all that I have in my arsenal which aids me in developing intuitive web pages, but, It would be a whole hassle. You can reach me if you need any guidance. Ever happy to help.
Frameworks used in frontend development are vast, and each are good with its individual qualities. Some examples are; Remix.run, Svelte, Angular, Next.js, Vue.js. these are intuitive frameworks which can be used for frontend development and have heavy SEO optimization support.
You can choose to learn one, two or all of them. What matters most is what you can use it to achieve. Cheers to your learning experience.
Conclusion
To cap it up, frontend development is more than just aligning divs, and rendering the appropriate colour, or translating a figma design to interactive code. There is a lot that goes into fundamentally creating a website which would be able to portray yourself as a front-end developer, including accessibility for screen readers and those with aids to be able to navigate your application with ease. These are the fundamental parts that need to be embraced in front-end development.
So, when next your friend wants to venture into front-end development, as they assume it is easy, quietly make them known to these facts and plausibility that surround the concept of frontend development and ensure they understand the nitty-gritty before getting their hands wet.
You can send me mails to understand more, and I am active on Twitter and LinkedIn.
Check out my website too.
Ciao🍻
Top comments (0)