Before we dive into the main topic, let me quickly introduce myself as it is my very first post! 🎉
I'm a 22 years old undergraduate computer scientist from Brazil and I'm looking for a job opportunity as a front-end developer. Very quick, huh?
That being said, my main goal with this post series is to prove that anyone can also build a portfolio page using just HTML/CS/JS, or, in other words, the front-end frameworkless stack.
In this introductory post, we're going to cover these topics:
- What is frameworkless exactly?
- Why we're choosing the frameworkless stack?
- Advantages and disadvantages of going frameworkless
- Conclusion and "What's Next?"
Note: there is a book, a post, and even a movement out there related to the frameworkless concept and they'll most certainly explain it better.
In this topic, I want to show you why we're picking HTML/CSS/JS over front-end frameworks to build the portfolio page.
First of all, we need to think about the scope of our project. A portfolio page isn't a web application. It's normally supposed to be a static informational webpage. The main plan of the portfolio page is to spread information about the owner's skills and work. And that's it. We don't need backend stuff like a web API and authentication and authorization rules unless you want to. Just a simple website containing the most important person's info will do the work.
At this point, hopefully, you realize why we're taking the frameworkless side and agree with me on that. But I have one more reason: the importance to go deep in learning HTML/CSS/JS. Understanding that is the first step to become a qualified front-end developer. Just check out the following tweet from @Shpigford:
Josh PigfordHiring a frontend engineer who's really great at HTML + CSS is surprisingly difficult.20:39 PM - 17 Jun 2021
- A soft learning curve. Getting good with HTML, CSS, and JS is not a hard job. Mastering them is. But, you don't have to be an expert on HTML/CSS/JS to make cool websites. If you learn and practice the modern features of each of these languages for a while, I'd say that you're ready to make your own websites and that you're in a great spot as a front-end developer.
Less or zero configuration steps. Front-end frameworks like React require a configuration setup before coding in fact. Configure files like
tsconfig.json(if you choose TypeScript) and
eslintrcis a boring task and it might be a lot of information especially if you're a beginner. On the other side, HTML/CSS/JS requires almost no project configuration at all. Maybe you just want to add a code formatter like Prettier and/or an editorconfig and you're ready to focus on the code!
- Productivity. I'm sure that experienced front-end developers will prefer to code with React than just HTML, CSS, and JS. And that's because they are extremely more productive using a front-end framework and it makes code deliveries faster and less painful. That's why frameworks exist, to accelerate development and consequently make developer's life easier.
- Not the best option for complex web applications. Pure HTML, CSS, and JS aren't the solution to all problems or difficulties. If you intend to make a rich, delightful, and really interactive web app, you probably should choose a framework instead.
That's it! Hopefully, I've didn't forgot to say something neither said something wrong. If so, tell me in the discussion below, I'd appreciate to hear you.
To sum up,
- Learning the front-end frameworkless stack (HTML, CSS, and JS) is the first and fundamental step to evolve as a web/front-end developer;
- Practicing HTML/CSS/JS is another really important task, and you shouldn't move to a framework like React before that;
- You shouldn't choose HTML/CSS/JS for everything. You need to pick a technology stack based on criteria like the project's scope (for example, if it's a simple or complex web interface).
In the next part, we'll make a revision of the contents of HTML, CSS, and JS in order to finally build the so-awaited portfolio page!