SitePoint HTML – Learn HTML, HTML5, Boilerplate & more
Featured
Advertise with usRecent
HTML5 Template: A Basic Boilerplate for Any Project
HTML & CSS
By Louis Lazaris,
Tired of building HTML5 templates from scratch? Learn the key elements of an HTML5 document, and grab our free, ready-to-use boilerplate.
How to Use ngrok: Easily Share Your Local Server [Step-by-Step]
Web
By Craig Buckler,
ngrok is a free service that helps you share a website running on your local machine with the world. This tutorial shows you how it works and how to use it.
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.
How to Add Scalable Vector Graphics 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 Draw Quadratic Bézier Curves on HTML5 SVGs
Programming
By Craig Buckler,
The SVG path element offers a range of curve effects. In his first tutorial, Craig demonstrates how to draw quadratic 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.
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!
How to Edit Source Files Directly in Chrome
JavaScript
By Craig Buckler,
Learn how to edit source files within Chrome and save the result to a local file. Changes can also be applied immediately without refreshing the browser.
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!
Build a Simple Tumblr Theme with Bootstrap
Blogs
By Ashraff Hathibelagal,
Ashraff Hathibelagal explains how to use Bootstrap and Tumblr’s special operators to create a Tumblr theme you can use for your Tumblr blog.
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.
Understanding Bootstrap Modals
HTML & CSS
By Syed Fazle Rahman,
In his dive into the popular CSS framework Bootstrap, Syed Fazle Rahman shows you how you can quickly make Bootstrap modals work in your project.
Why I Love Bootstrap, and Why You Should Too
Blogs
By Syed Fazle Rahman,
Syed Fazle Rahman introduces Bootstrap, the popular front-end UI library, and offers his reasons why he loves building projects with it.
How to Create Beautiful HTML & CSS Presentations with WebSlides
HTML & CSS
By Ivaylo Gerchev,
Ivaylo Gerchev guides you step by step as you create a beautiful HTML and CSS web presentation using WebSlides, a fantastic framework for this kind of task.
Frame by Frame Animation Tutorial with CSS and JavaScript
HTML & CSS
By Michael Romanov,
Michael Romanov explains how you can build a frame by frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers
Replaced Elements in HTML: Myths and Realities
HTML & CSS
By Adrian Sandu,
Adrian Sandu shares some myths and facts about HTML replaced elements and how browsers treat them according to the specifications.
6 Clever SVG Pattern Generators for Your Next Design
Design & UX
By Alex Walker,
Though SVG Patterns aren't super widely understood, they offer a lot of really interesting design options – once you get your head around them.
Building Mega Menus with Flexbox
HTML & CSS
By Kalpesh Singh,
Kalpesh Singh uses Flexbox features to build a mega drop-down navigation menu, a well known design feature that many incorporate into large websites.
How I Built a Pure CSS Crossword Puzzle
HTML & CSS
By Adrian Roworth,
Adrian Roworth recently built a pure CSS crossword puzzle using form elements and new Grid Layout features. In this tutorial, he explains the key concepts.
Results of the Ultimate CSS Survey 2017
HTML & CSS
By Louis Lazaris,
Louis Lazaris breaks down the results of the Ultimate CSS Survey, shedding light on developer practices in CSS tooling, technologies, and knowledge.
20+ Docs and Guides for Front-end Developers (No. 12)
HTML & CSS
By Louis Lazaris,
Louis Lazaris has collected together another 20+ learning resources, tools, and other guides to help developers brush up on various front-end features.