The Modern Web
A web design and development blog focussed on sharing the latest web techniques, tutorials and resources.
The latest in web design and development
Javascript, Tips, Tutorials, Web Development
Smooth scrolling to elements with JavaScript (no jQuery)
Here’s a quick snippet of JavaScript to scroll to elements on your webpage smoothly. This example is in vanilla JavaScript and does not require jQuery to work correctly. Let’s say you have a page with similar markup to the snippet below. <ul class=”nav”> <li><a href=”#about” class=”nav-link”>About</a></li> <li><a href=”#work” class=”nav-link”>Work</a></li> <li><a […]
Quick Fix, Terminal, Tips, Tutorials, Web Development
Quick Fix: node-gyp problems on OS X High Sierra (10.13)
If you’re getting `iconv` errors from yarn / npm when installing projects on OS X High Sierra (10.13), you might have hit the same issue as us. As best we can figure, node-gyp just loses track of the xcode tools it requires post-upgrade. Luckily the fix is trivial if you […]
3 CSS pseudo classes you may not be aware of
CSS pseudo classes are used to define particular states of an element. This could be the state of element when a user is hovering over it with their mouse (think :hover). Or it could be to indicate an anchor tag which has been visited before (:visited). Pseudo classes are very useful […]
Terminal, Tips, Tutorials, Web Development
11 basic terminal commands for beginners
Using the terminal in your web development workflow can seem alien to the uninitiated. The difficulty to learn how to use the terminal effectively is often made worse through the availability of applications which can do the heavy lifting and run terminal commands for you. Using these applications in your web development […]
Top 5 Technical SEO basics for Web Developers
Not taking the time to understand technical SEO for your website could earn you a penalty from Google. Building a site can be done relatively simply and you don’t need to be a search engine optimisation (SEO) expert to have a site that can rank well. But there are definitely […]
5-minute guide to Structured Data
What is structured data? If this is your first time learning about structured data, let us explain what it is. Actually, let’s get the guys over at Google to do that for us! “Structured data refers to kinds of data with a high level of organization, such as information in a […]
Tips for great email marketing campaigns
If you’re a digital marketer, agency, ecommerce business or blogger; the chances are you’re sending email marketing campaigns. Nobody is perfect, so whether you’re sending to 100 people or 100,000 people this post has something for you. Take a look at our tips and begin improving your email marketing campaigns today!
CSS, SCSS, Showcase, Web Development
SCSS Mixins | 5 awesome and creative examples
This post is for those of your that work with the sassiest CSS of all, SCSS! Today we’ve compiled 5 great SCSS mixins for you. From centring elements, generating animations or applying long, sexy shadows; we’re sure you can use some of these great SCSS mixins in your upcoming projects. So […]
Security, Tips, Tutorials, Web Development
HTTP to HTTPS Migration Tips
With the recent Google Chrome 56 update, migrating your HTTP site to HTTPS is more important than ever. There’s many things to consider and action when migrating your site over to HTTPS. Use the HTTPS migration tips below and ensure your site is up to scratch and migrated successfully. 1. […]
How to set up a local web development environment using MAMP PRO
When it comes to web development, setting up a local web development environment is an absolute must. It allows you to develop your website or application in a safe environment for testing before your code is ever near a live server. There are numerous ways to do this, but today […]