Last year, I had the experience of working again on front-end code that was meant to be supplied to back-end developers who uses PHP with the intention of integrating my front-end code into the view layer of the framework that they are using. Working on those projects, I knew that using React or Vue was not appropriate given the scope of the project. With that limitation, I had qualms because I was deeply immersed with modern Javascript development and I wasn’t ready to go back to plain old HTML/CSS/Javascript development. Thankfully, during that time, I was exploring Webpack. Knowing what Webpack can do, I saw it as an opportunity of applying what I learned about it and see if it’s a viable tool for creating a development and build tool for static websites development.
With that said, I would like to introduce my first tutorial series called Let’s Build: HTML5 development server & build tool with Webpack. On this series, I will be sharing how I used Webpack to create an HTML5 development and build tool. At the end of this series, you will learn:
- How to setup a web server to have to preview webpages in development
- Implementing CSS, PostCSS and TailwindCSS support
- Web fonts support
- Implementing files and images support
- How to create pages and use ES6
importsupport to import modern Javascript libraries - How to generate build files that resembles a good old HTML/CSS/JS directory
With all of these combined, you will now have a fully working development tool that allows you to build modern HTML5 websites and applications while leveraging modern Javascript syntax and modern CSS using PostCSS(with TailwindCSS).
This coming Friday, January 15, I’ll be publishing the first part of this series where I will be covering setting up the web server and I will also be showing how to create pages.
Have an awesome week ahead!