Canvas vs SVG: Choosing the Right Tool for the Job
HTML & CSS
By Maria Antonietta Perna,
Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.
SitePoint HTML – Learn HTML, HTML5, Boilerplate & more
Recent
How to Add Scalable Vector Graphics (SVG) to Your Web Page
HTML & CSS
By Craig Buckler,
How should you add scalable vector graphics to a web page? Learn about six different methods, including inlining, image tags, iframes, and CSS backgrounds.
How to Draw Cubic Bézier Curves on HTML5 SVGs
HTML & CSS
By Craig Buckler,
The SVG path element offers a range of curve effects, and in this article, Craig Buckler demonstrates how to draw cubic bézier curves.
How to Translate from DOM to SVG Coordinates and Back Again
HTML & CSS
By Craig Buckler,
Mix DOM and vector interactions in SVG, translating from SVG to DOM coordinates and back, and translating to transformed SVG coordinates.
CSS with SVG: Real World Usage
HTML & CSS
By Craig Buckler,
Craig explains how to add CSS styles to SVGs when used as static images, inlined backgrounds and HTML, sprites, HTML content effects and portable files.
Scalable Vector Graphics: Drawing Basics
HTML & CSS
By Craig Buckler,
Craig Buckler introduces SVG drawing basics, explaining the SVG viewbox, document structure, and how to draw shapes such as lines, circles, and rectangles.
Five Ways to Lazy Load Images for Better Website Performance
HTML & CSS
By Maria Antonietta Perna,
Maria Antonietta Perna highlights the benefits of lazy loading images on websites and shows five approaches to implement lazy loading for your website.
HTML5 Template: A Basic Boilerplate for Any Project
HTML & CSS
By Louis Lazaris,
Start new websites faster by using this basic HTML5 template. Learn how to get started, understand important HTML5 elements, and use our free HTML template.
How to Apply CSS3 Transforms to Background Images
HTML & CSS
By Craig Buckler,
Craig Buckler demonstrates a neat trick for applying CSS3 transforms to background images. Rotating and skewing elements with stunning backgrounds will now be a breeze!
Code Challenge #2: 4 Tips for Higher Scores in CSSBattle.dev
HTML & CSS
By Alex Walker,
Our CSSBattle Code Challenge requires some 'outside the square' CSS thinking. Here are four tips to get you started on the right track.
UI Code Challenge #1 – Heartbeats
HTML & CSS
By Alex Walker,
The user interfaces we see in popular culture are often more fun than ones we build at work. Here's a code challenge to show us how you'd build your own.
A Beginner’s Guide to Pug
HTML & CSS
By James Hibbard,
Pug is an HTML preprocessor with lots of great features to speed up writing HTML. James Hibbard walks through basic syntax, some practical examples, and advanced features by building a simple Node/Express project.
7 of the Best Code Playgrounds
HTML & CSS
By Craig Buckler,
Craig Buckler lists 7 of the most popular code playgrounds tfor experimenting with your front-end code, such as CodePen and JSFiddle, along with suggestions for playing with back-end code, hosting your own code playground, and even installing an offline code playground in your own browser!
A Full-screen Bootstrap Carousel with Random Initial Image
HTML & CSS
By George Martsoukos,
George customizes Bootstrap's carousel component, converting it to a full-screen Bootstrap Carousel slideshow and randomizing the first slide on page load.
Bootstrap: Super Smart Features to Win You Over
HTML & CSS
By Maria Antonietta Perna,
Maria walks through some of the new features in Bootstrap 4, including its modular architecture, reusable components and easier scaling across screen sizes.
Front-end Frameworks: Custom vs Ready-to-use Solutions
HTML & CSS
By Ivaylo Gerchev,
Ivaylo Gerchev looks at the pros and cons of choosing between, prebuilt, front-end frameworks versus using a custom solution.