Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
I said you can use a framework or CSS Flex or Grid clearly, it's not my job to decide what he must use, only answering to the OP, by the other hand... When you use a framework, do you import it all, so you assumed that use it for a portfolio could be inefficient?
Using a framework and importing just what you need is as efficient as could be if you type it all from scratch. I imported (from my own framework) only the components i need (containers, grid system, accordions, modals, typography and colors) and i'm getting a 100/100 on pagespeed, because there isn't unused css or js on it, and the size is pretty lightweight, even i didn't optimized the images or cache policy yet.
If you want or need a full workaround i'll set the points here, ordered:
1- Draw what you want to reach on a paper, a simple wireframe (mobile and desktop).
2- Generate a Git project, clone it and set parcel.js (or rollup, or webpack) on it.
3- Start coding your structure in a file called index.html, with html5 (you can use pug or something similar if you like). - Only a single block of content.
4- Style this content block as you want, - Flex recommended, but you can use Grid too. If you are not familiar with those two features, or want to get it done faster, you can simply use a framework like Mustard UI, bootstrap or whatever you know or want to learn. Simply make sure you import only what you use. -
5- Repeat steps 3 and 4 till you have the entire layout done, from header to footer.
6- Optimize assets (scss and js will be compiled and optimized by the bundler if used correctly, i highly recommend you to optimize images by your own with your preferred software as bundlers mess it up a bit or makes a poor job that leads yo to loose too image quality).
7- push your project's new version to Git.
8- Build for production.
9- Deploy.
Obviously there could be tones of correct workarounds to reach same result.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I said you can use a framework or CSS Flex or Grid clearly, it's not my job to decide what he must use, only answering to the OP, by the other hand... When you use a framework, do you import it all, so you assumed that use it for a portfolio could be inefficient?
Using a framework and importing just what you need is as efficient as could be if you type it all from scratch. I imported (from my own framework) only the components i need (containers, grid system, accordions, modals, typography and colors) and i'm getting a 100/100 on pagespeed, because there isn't unused css or js on it, and the size is pretty lightweight, even i didn't optimized the images or cache policy yet.
Check it out:
developers.google.com/speed/pagesp...
If you want or need a full workaround i'll set the points here, ordered:
1- Draw what you want to reach on a paper, a simple wireframe (mobile and desktop).
2- Generate a Git project, clone it and set parcel.js (or rollup, or webpack) on it.
3- Start coding your structure in a file called index.html, with html5 (you can use pug or something similar if you like). - Only a single block of content.
4- Style this content block as you want, - Flex recommended, but you can use Grid too. If you are not familiar with those two features, or want to get it done faster, you can simply use a framework like Mustard UI, bootstrap or whatever you know or want to learn. Simply make sure you import only what you use. -
5- Repeat steps 3 and 4 till you have the entire layout done, from header to footer.
6- Optimize assets (scss and js will be compiled and optimized by the bundler if used correctly, i highly recommend you to optimize images by your own with your preferred software as bundlers mess it up a bit or makes a poor job that leads yo to loose too image quality).
7- push your project's new version to Git.
8- Build for production.
9- Deploy.
Obviously there could be tones of correct workarounds to reach same result.