How I've built my frameworkless portfolio website

Hello, folks!

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?

Still about me, but regarding my programming studies, I had started learning web development at the start of the chaotic year of 2020. After 6-7 months of studying HTML/CSS and coding mainly JavaScript I've realized how important is to learn deeply these fundamentals technologies. I recently had this feeling again given that I've just concluded an intensive two-week Bootcamp around HTML and CSS. And due to this bootcamp, I was able to launch my portfolio website and I'm really amazed by the result!

That being said, my main goal with this post 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 post, we're going to cover these topics:

1. What is frameworkless exactly?
2. Why we're choosing the frameworkless stack?
3. Advantages and disadvantages of going frameworkless
4. Conclusion and "What's Next?"

1. What is frameworkless exactly?

So, that is a natural and necessary question. How we can define the term frameworkless? In my opinion, frameworkless in front-end development is developing web interfaces using just vanilla HTML, CSS, and JavaScript. No frameworks and libraries. Simple as that. Well, not exactly!

For example, if I build a web app using HTML, JavaScript, and a CSS framework like Bootstrap, Tailwind CSS or Bulma would still be frameworkless? That case is unclear for me, and actually, I don't have enough expertise to answer that. But my shot is that it should be frameworkless which is kind of contradictory. The reason is that CSS frameworks don't deliver a whole new way of front-end development, unlike front-end JavaScript frameworks.

Speaking of which, one thing that is very clear to me is that using React, Vue or Angular would be the opposite of frameworkless. These front-end frameworks/libraries change drastically the way you think and develop, for good or for bad. You're meant to write JavaScript code all the time and that is completely different than developing with pure HTML, CSS, and JS.

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.

2. Why we're choosing the frameworkless stack?

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 Pigford

@shpigford

Hiring a frontend engineer who's really great at HTML + CSS is surprisingly difficult.

20:39 PM - 17 Jun 2021

As you can see, HTML/CSS (and I'll extend to JavaScript too) are required skills for web developers, and knowing them makes a total difference to your career especially in front-end development. If you miss studying and practicing with these technologies, you're taking the wrong way IMO.

3. Advantages and disadvantages of going frameworkless

Advantages:

• Practicing a valuable front-end skill. Get your hands dirty with HTML, CSS, and JavaScript is very important, anytime in your career and mainly at the beginning. For instance, there are people learning React but don't know the JavaScript core concepts. I think this is definitely the wrong choice. You should focus on the web fundamentals knowledge first. Then put them into practice by doing some projects. If you don't know what to study exactly, just do the FreeCodeCamp courses or follow Web Skills knowledge paths.
• 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 package.json, tsconfig.json (if you choose TypeScript) and eslintrc is 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!
• Better SEO. As you possibly know, SPAs (Single Page Applications) are really bad for SEO (Search Engine Optimization). The fact that the webpage is loaded at the client-side makes search engines and crawlers "hate" your page. Frameworkless stack doesn't have this issue, as you're delivering plain HTML, CSS, and JavaScript directly from the server. I know that there are other frameworks like Next.js that solve this SEO problem, but it just makes the learning curve steeper as you're supposed to learn Next.js after React.

Disadvantages:

• 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.

4. Conclusion and "What's Next?"

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).

Feel free to follow me on GitHub, Linkedin, and/or Instagram. I hope this post was helpful to you! See ya! 👋

Cover image found here.

Comments

[Nirbhay Parmar]

You said the right thing, because when some developer start to learning any framework before understanding core javascript and if she/he got stuck somewhere then it will be quite difficult for her/him to get it resolved.

[Guilherme Tavares]

That's it! In my opinion, you should only learn a front-end framework after feeling comfortable with JS.
But I see developers skipping the JavaScript part and moving directly to studying a framework. I definitely disagree with that. As you said, they will face many difficulties if they choose this way.

[Nirbhay Parmar]

Waiting for the next part...

[Guilherme Tavares]

Great! I've already started writing part 2. I'm planning to publish it next month!