Five HTML & CSS tricks to make your project flow smoother
Often disregarded or overlooked methods for an easier coding experience
As a web developer and designer, I often code with a team. Typically as a front-end developer, you end up with the start of the project before anyone else so it’s important to start with a good foundation for not only yourself but others as well.
I want to share a couple of starting points, that for me, usually make it into projects at the start.
- Structuring my files
In the beginning, I start with a simple structure. I like to template when I’m building so starting with a header, footer, and body for me is important. Having a public folder of my HTML with folders for CSS, SCSS, JS, and Assets follow into that public folder. I use simple PHP to include my header and footer into my body.
This might not work for all projects. But the more simplistic way to start a small site is my ground zero.
2. A simple reset
I like to add a simple reset to my projects in my styles. This helps me weed out any of those weird conflicts I might come across later in the project once I start styling. I apply 0 padding and margin to the document body so that when I’m adding styling to something like a slider I won’t need to adjust the margins with those elements.
3. Sass and compiling for easier coding
If you haven’t been using Sass you’re missing out severely. Using a CSS pre-processor and compiling your styles to a single CSS document can help you keep track of what styles are where and make it easier to work with.
Not to mention the benefits of nesting, variables, and mixins. I’ve begun finding it much more cumbersome to code CSS without using a pre-processor.
You’ll need to use something like Node.JS and their Sass-watch add-on to compile your Scss into CSS.
4. Smooth scrolling
Now, we’ve all seen websites that have a bit of jitter when scrolling using your mouse. Often enough we use a javascript library to help us achieve a nice smooth momentum when moving the content.
The problem here is, there are so many and could be hard to find if you’re not looking in the right places.
I’ve been using in recent projects a vanilla JS plugin called Luxy.js for its inertial scroll because it’s so smooth and pretty. It’s installed using node and is quite easy to do so, so follow the instructions on their site. Don’t skip out on this. It’s a great improvement for your users!
5. Simple responsive HTML using CSS Grid
Now, I can go a bit deeper with this, and I intend to in a future post. Until then there is a wealth of information available to be used.
Using CSS grid is somewhat new for me. I’ve been integrating it into my projects for a short time but I’ve completely become un-reliant on frameworks such as Tailwind, Bootstrap, or Foundation.
Wrapping elements in a div and applying a class with the following CSS can create a really simple grid with great flexibility and responsiveness. CSS grid has an extensive use, and there are so many variations it’s capable of that you would be missing out if you haven’t taken the opportunity to play with it.
Conclusion
As you can see there are plenty of methods in HTML and CSS that can make your coding life easier. These five simple inclusions can improve the outcomes of your project and make your life a whole lot easier in regards to simple front-end development.
If you’re looking for more examples, StackOverflow is jam-packed with fun and exciting new ways to improve your projects for you to learn.
Did you know if you hold the “clap” button a while, that more people have a chance of seeing this story? — I also have a mailing list if you’d like updates on newly published stories.
