Hi all. First time posting on DEV so I hope I'm posting in the right place for this sort of question.
A little background about myself: I'm a junior dev, currently with 1 year of industry experience. In terms of frontend experience, I have worked with React, Vue.js, Bootstrap, Material-UI and CSS flexbox (not Grid yet).
I'm looking for a new job currently and have decided to make myself a portfolio website.
I'm building my website in React, because I don't get to use it at work and want to brush up on my skills (I did a lot of React at bootcamp but we use Vue.js where I work).
In terms of styling my website, I decided to use Material UI. I came to this decision for two reasons:
- I already use Bootstrap a tonne at work and wanted to work on a different skill.
- MUI is a bit more flashy than Bootstrap, which serves well for what is essentially a promotional website.
However, I'm not sure about my choice of CSS framework. I'm starting to worry that MUI will be too restrictive; that my site will look like a generic product website.
Ultimately, I want to build a website that:
- looks good, with a personal touch
- shows off some technical skills
- won't take too long to build
Does anybody have any advice on what route I should go down?
Should I carry on with MUI so I can show employers that I know more than just Bootstrap?
Should I try using pure CSS to show that I understand CSS and help my site look more personal?
Maybe I should stick with Bootstrap for speed, with the addition that it's very 'plain' and it's styles can be overwritten easily?
Or should I do something completely different?
Thanks. And apologies if this was a bit long-winded!
Top comments (16)
Hi Dan, short answer is dont use any CSS framework!
When I wanted to build my portfolio website, I went through many iterations, I've used Bootstrap,the later changed it to UI KIT.
Then i decided to go no framework, which is the best option in my opinion, as a junior looking for your next job you need somehow to proove your skills,and no framework would be the best way to do it. Also make sure you dont forget that It doesn't need to be perfect
Thanks for the advice, sounds like a good plan! It will definitely challenge me to not rely on a framework and it'll be interesting to see what I can make from scratch. Looking forward to giving it a go. 😁
Absolutely great advice. Learning the fundamentals is far more valuable than specializing in a framework. By doing so you will gain a deeper understanding of a framework's mechanics and your knowledge will allow you to manipulate it further.
I was building a friend's portfolio and he asked for this very bare bones layout that there was no clearer way about it than to use HTML/CSS and nothing quite like it that I could copy and paste.... Ended up being far more of a learning experience than I could have predicted. Glad to see that's a valid way to prove one's skills. Is there anything else I'm not taking away from what you were getting at?
If you're looking for some convenience but don't want your sites to all look the same, Tailwind is fantastic.
If you want to do your own styling without a framework, I highly recommend using a CSS reset like Normalize to avoid super-annoying browser inconsistencies.
Someone recommended Tailwind to me not long ago, it sounds really cool. Just took a quick look at their website and I like the philosophy behind it, i.e. utility-first, not opinionated style-wise. Thanks for the tip.
Also I've used CSS Baseline which I believe does essentially the same thing as Normalize, though interested to see how they compare. Thanks again.
+1 for Tailwind as a utility. Still gives you freedom to use custom css without having to use !important tags everywhere to override. The theme config is also awesome
I use Bulma it's great
Currently, I use Bulma a lot, but it is not complete -- no spacing helper, so I created spacing.scss
I also want to recommend no framework, but heavy use of CSS preprocessors, such as SCSS;also with Flexbox.
Hey Dan,
I have an advice for you whenever you go for CSS frameworks like bootstrap and MUI they have thier limits if you want to polish your skills go ahead and write your own css from scratch try to make it responsive it will take time but it'll be worth it.
Why not none and code it all from scratch - to show you know how? :)
I use Yogurt to craft my beautiful portfolio website.
I am a user of pure CSS myself, and created my portfolio with Gatsby
A custom Milligram css in sass/scss. Just @import what you need. Super lightweight.
Hi, If you are using the React.js, how about the styled-components ?