This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
My Favorite Webtools and Websites for HTML/CSS Development
Here’s a little collection of very helpful sites for front end development
Some online tools for web development I use nearly every day. Maybe one of them is helpful for you too.
Very Cool Sites for CSS Stuff
One of my absolute favorites is caniuse.com. If you’re looking for information on whether a particular browser can display your CSS code, you can find it there.
Some generators to create box shadow, flex code or triangles with CSS only:
- https://www.cssmatic.com/box-shadow
- https://the-echoplex.net/flexyboxes/
- http://apps.eky.hk/css-triangle-generator/
These tools often save me a lot of time. You can play around with the code and then copy/paste it into your project.
CSS for email clients
If you’ve ever had to code templates for HTML mail, this is a very good collection of what kind of CSS does or doesn’t work:
https://www.campaignmonitor.com/css/
Spoiler: Next I’ll write a series about my experiences coding HTML mail, so you can look forward to that.
Resources for Beginners and Advanced Developers
An overview, tutorials and more in-depth information about HTML, CSS, Javascript and much more can be found here: https://www.w3schools.com/.
Here you can find very interesting long-term browser statistics:
https://www.w3schools.com/browsers/
Keep in mind, however, that these numbers don’t necessarily apply to your website or web application. The users and the devices/browsers they use depend on your content.
A similar site with a long history back to the year 2000 is:
I really loved it as a beginner, but it’s only in German.
Screen Size of Various Mobile Devices
Today’s websites need to be responsive for almost all mobile devices. But what are their screen sizes?
You can find the answer here: https://www.mydevice.io/
At the top of the page you’ll find a lot of information about your own device and browser. If you scroll down, you’ll see a very detailed overview of all kinds of smartphones, tablets, and even Google Glass (click on other devices).
Here you can find the physical dimensions and CSS dimensions that are important for development, but remember that these values represent the entire screen of the device.
Browser apps always have a top bar and a bottom bar, and the mobile OS also has a small bar at the top, so the CSS height is always lower than specified on mydevice.io. Not to be misunderstood: mydevice.io is correct, for the whole screen!
Base64 Tools
If you want to use “data/image” instead of “<img scr=”myImage.png”>”, it’s common to convert the image to a base64 code and use this as the “src” for the image:
<img src="data:image/png base64,iVBORw0KGgoAAAANSUhEUgAAAC..." />
The same for CSS background-image:
background-image: url('data:image/png base64,iVBORw0KGgoAAAANSUhEUgAAAC...');Here’s the tool that does it perfectly: https://www.base64-image.de/. Just drag and drop your image and then you can copy/paste the code, for <IMG> tag or CSS background image.
Sometimes I program the front end for applications that don’t have a real web root directory. If only a logo is needed, it’s an easy way to embed it, and the back end developers are happy not to have to set up a route to an image directory on the server in the back end.
Decode Encode Base64
Sometimes I to deal with the raw source code of emails, unfortunately the HTML part is often a disaster, mail clients or servers make some weird code out of the original so it can’t be processed further. But the Base64 part is OK, here you can decode it: https://www.base64decode.org/
Two More Interesting Tools
Looking for a cool loading animation? You’ll find it here: https://loading.io/.
I found it years ago when there was only a small collection of fixed shapes and only color options. But now there’s a huge selection of spinner shapes with generator to change shape, colors and much more to meet your needs.
There’s a free plan with limited access and a monthly or yearly plan.
If you’re dealing with JSON code, this might be helpful: https://jsoneditoronline.org/ .
Just paste in your JSON and check if the code is correct, or edit it to correct it.
Last Words
I found all these tools, generators and tutorials during my long time as a web developer on the internet. Nobody pays me to publish them here. I just want to share these help pages with others. I hope they can save you as much time developing as they did me.
Happy coding!
My Favorite Webtools and Websites for HTML/CSS Developement was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by The Tech Maker
The Tech Maker | Sciencx (2021-09-20T15:29:10+00:00) My Favorite Webtools and Websites for HTML/CSS Developement. Retrieved from https://www.scien.cx/2021/09/20/my-favorite-webtools-and-websites-for-html-css-developement/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.