If you're an entrepreneur or a developer, chances are you'll work with a content management systems (CMS) at some point. And knowing how to analyze the many features of the CMS options out there is important when choosing the right one for your use case.

In this article, I'll explain why CMSs exist, the problems they help solve, and I'll also offer helpful guidance in choosing the right CMS for your needs.

What is a CMS?

You can think of a CMS as an extremely user-friendly database for your website’s content.

A CMS provides an intuitive interface that allows website owners and content creators to manage a website's content without requiring advanced technical skills.

As an example, think about it from the perspective of someone who wants to own a blog, but doesn’t know anything about web development. It would be very difficult, if not impossible, for this person to modify the source code of the web site in order to add a new article to the blog.

This is where a CMS comes in. The CMS is linked to the owner’s website, and the site has built in code that pulls data from the CMS and automatically publishes this data on the site. In this example, the data could be a new blog article and image.

Headless CMS vs Traditional CMS

You may have heard the term “headless CMS” floating around, and wondered what that was all about. Nowadays, CMSs come in two flavors; a traditional CMS, and a headless CMS. Let’s take a look at a few definitions to get a better grasp of each:

What is a Traditional CMS?

A traditional CMS is a complete website management system that not only stores your content in a user-friendly database, but also offers a front end, usually a WYSIWYG style editor to build out your actual web page.

The front-end UI designer and backend storage system are unified in one intuitive interface. Wordpress is a famous example of a traditional CMS.

What is a Headless CMS?

A headless CMS is similar to the traditional CMS, but without the front-end WYSIWYG editor to build your site. If you think of your actual webpage as the “head”, and your content as the “body”, then this starts to make sense.

A headless CMS is totally independent of your site’s design, and you can typically use any framework of choice and connect it to the headless CMS. The headless CMS acts similar to a backend database, but is tailor-made for handling typically used website content like images and rich text.

When Do I Need a CMS?

Before concerning yourself with choosing the right CMS for your needs, it is essential to understand whether you actually need one. CMSs are designed to streamline the process of creating, editing, and managing digital content, primarily for websites.

If you’re wondering whether you should consider a CMS, ask yourself the following questions:

1. Does the website require frequent content updates, such as articles or product listings?
2. Will there be multiple content authors collaborating on the website's content?
3. Does the website require flexible content structuring and organization to accommodate future changes?

If you answered yes to one of these questions, there’s a good chance that your project would benefit from the features offered by a good CMS.

CMS Integration and Compatibility

It’s important to consider ease of integration with your chosen system or framework. You may be considering adding some functionality to your site such as an e-commerce system or customer relationship management (CRM) software. Or you may just be starting a new project from scratch.

Either way, it is crucial to ensure that the CMS you select can seamlessly integrate with these systems.

Most frameworks, such as Next.js, Gatsby or Astro, will offer a list of official CMS plugins that streamline the process of integration. Of course, a CMS can be added to any project without an official plugin by utilizing the API from your CMS of choice, and coding everything manually.

But it’s usually wise to look for a CMS that is supported by your framework, as it takes much of the heavy lifting out of the equation and allows you to focus on other pressing concerns.

For example my blog has a list of the best CMS for Next.js to choose from. Most frameworks have a number of CMSs that are compatible and created by 3rd party developers.

When searching for a CMS with seamless integration and compatibility, look to your framework’s official docs for guidance, which should tell you what public libraries are available.

CMS Features to Consider

When evaluating CMS options, do some research and testing rather than going for the first option that pops up. While the specific requirements may vary depending on your project, here are some fundamental features to look for:

1. User-Friendliness: The CMS should have an intuitive and user-friendly interface, enabling non-technical users to manage and update content easily.
2. Content Organization: Effective content organization is crucial for a CMS. Look for features such as categorization, tagging, and metadata management to ensure your content is easily searchable and conveniently organized.
3. SEO Optimization: Ensure the CMS supports essential SEO features, such as image optimization, full-featured rich text editors, and friendly URLs.

Common CMS Pitfalls

There are a few potential pitfalls you should consider, because utilizing a CMS doesn’t always live up to expectations. Here are a few common challenges:

1. Overwhelming Complexity: This may seem oxymoronic, considering my earlier statement that CMSs are supposed to simplify things. But everyone is different, and one CMS may not suit your taste as much as the next person. It’s a good idea to create an account and take a look around, maybe even create some content, just to get a feel for whether the CMS is right for you.
2. Hidden Costs: Many CMSs claim they are free. But almost all of them begin charging when you reach a certain threshold of traffic or storage capacity. It’s important that you do your research, and ensure that you’re considering whether your project will venture into the realm of “paid service” sooner than you expected.
3. Limited Support and Documentation: When encountering issues or needing assistance, reliable support and comprehensive documentation is paramount. Ensure that the CMS you choose has an active community, official support channels, and extensive documentation or user guides. This support network can be invaluable in troubleshooting problems and learning how to make the most of the CMS's features.

Conclusion

Choosing the right CMS is an important decision that can impact your website's performance, scalability, and ease of management. By understanding the purpose of a CMS and evaluating your specific needs, you can make an informed decision that aligns with your goals.

Ultimately, a CMS should empower you to efficiently create, manage, and update content, allowing you to focus on delivering a compelling user experience. At the end of the day, meaningful content is the goal, and a CMS should be a helpful hand that guides you through the process.

Hope you enjoyed the post. If you want to learn more about CMSs and SEO in general checkout OhMyCrawl. If you want to follow along with one of my side projects, checkout my latest site Trust In Geeks to follow my journey.

In this article, I will provide you with a list of four free website builders you can choose from when creating your websites.

Here is the complete list. If you find an option you like, then click on the link and it will take you to that section of the article.

1. Wix
2. Weebly
3. SITE123
4. Carrd

Wix

Wix was founded in 2006, and it is a very popular free drag and drop website builder.

The free version comes with the following options:

• Up to 500 MB (megabytes) of storage and bandwidth
• Assigned URL: accountname.wixsite.com/siteaddress
• Wix ads appearing on every page

You can sign up using an email address and password or with Facebook, Google or Apple.

If you want to create a new website, you will be walked through a questionnaire to create the basic setup.

You have the option to design your website choosing from 100's of templates and drag and drop features. Or you can choose the [Wix Artificial Design Intelligence](https://support.wix.com/en/article/about-wix-adi#:~:text=Wix%20Artificial%20Design%20Intelligence%20(ADI,a%20stunning%20site%20for%20you!&text=From%20billions%20of%20combinations%20including,%2Da%2Dkind%20free%20site!) which will create a website for you.

If you choose the [Wix Artificial Design Intelligence](https://support.wix.com/en/article/about-wix-adi#:~:text=Wix%20Artificial%20Design%20Intelligence%20(ADI,a%20stunning%20site%20for%20you!&text=From%20billions%20of%20combinations%20including,%2Da%2Dkind%20free%20site!) option, then you will be asked a series of questions on what kinds of design themes and features you are interested in.

Once you choose your templates, then the Wix ADI will create your basic website where you can customize the pages.

You can also see what these sites would look like on mobile devices.

If you choose to use the template editor, you can browse through hundreds of free templates and customize them to your liking. You can also add your own media including videos and images.

When you are finished creating your site, click on Publish in the upper right hand corner of the page.

It is easy to get your website up and running using clean, professional designs and there is no coding knowledge necessary.

Weebly

Weebly was founded in 2006 and it is a free website builder that makes it easy to build blogs, online stores, and personal sites using customizable templates.

The free account will provide the following options:

• SSL security
• Access to the community forum
• Access to dozens of website templates
• Chat and Email support

You can create your own account using a username and password or you can login with Facebook, Google, or Square.

Once you are signed in, then you can choose between a business website or personal.

There are dozens of themes to choose from that you can customize to your liking.

In the Weebly editor, you can add media like videos, images, files and more. You can also add features like social icons, search boxes and forms.

Once you are done customizing your website, then you click on Publish located in the upper right hand corner.

SITE123

SITE123 was founded in 2015 and is a free website builder that gives you access to dozens of templates and layouts to choose from.

The free version comes with the following features:

• 250 MB Storage
• 250 MB Bandwidth
• 24/7 Live chat support

To get started, you can choose what kind of website you want to build.

You can choose your website name.

You can sign up with an email and password or with Facebook or Google. Once you are signed in then you can customize your website.

You can also preview what it would look like in desktop, tablet, or mobile view.

Once you are done editing your website, then you can publish it by clicking on the green publish button in the upper right hand corner.

If you are interested in adding a custom domain for your site, then you will need to pay for that.

Carrd

Carrd is a free website builder where you can browser through dozens of templates and create one-page websites.

You can create a free account by using your name, email, and password.

Once you are signed in, then you can choose from dozens of templates.

You can then modify the template by changing colors, fonts, and adding images.

When you are done editing your page, click on the publish option located in the upper right hand corner.

If you are interested in having custom domains, Google analytics, and custom forms, then you can sign up for the pro version.

I hope you enjoyed this article on free Website builders.

If you've never deployed a website before, it can be quite confusing figuring out how to get your website online. Things like getting a domain name, uploading the necessary files and choosing where to host your site can be overwhelming.

I remembered how difficult I found it to setup my website the first time and I wanted to help other people avoid the mistakes I made, so I sent out this tweet:

I got more responses than I expected, so I ended up scheduling 9 sessions of 2 hours each for every weekend in February.

The idea was, at the end of February, I should have completed my portfolio design since I assumed helping other people would ensure I stayed on track with my plan. That plan didn't work out, but I did learn a lot in the process.

At the end of February, I successfully helped 6 developers (ranging from entry to mid level, and a 1:2 female-to-male ratio from 3 different countries) set up their portfolio website in one form or the other. I'll be documenting the main lessons from each session here.

In this article, we'll cover everything you need to know about setting up your portfolio site – from buying a domain name to deploying the site online. So let's get started.

1) How to Get a Domain Name

A domain name is the location of your site online. It's like having a username for the world wide web which visitors type into the URL bar to go to your site.

A domain name consists of a name (like google) and an extension (like .com) and it points to a specific IP address for the site you're deploying.

Purchasing a domain name from a registry allows you determine what location that domain points to. There are multiple registries where you can purchase a domain from, so you should do your research and decide which one works for you.

Here are some domain registries I'd recommend based on their features:

1. NameCheap – This is one of the more popular platforms, so it comes with a lot of customer support and hassle-free setup. They also offer free domain privacy. I'd recommend using this if you want to purchase a domain quickly.
2. Bluehost – Bluehost offers great hosting choices and comes with an inbuilt WordPress platform. I've personally used Bluehost for some client sites in the past and I really like the clean interface and onboarding guide it provides. I'd recommend using Bluehost for hosting WordPress sites.
3. NameSilo – A major benefit of NameSilo is that they offer free add-ons such as WHOIS Privacy (keeping your registration details safe) and Email Forwarding (sending emails from me@mysite.com to your actual email address). I'd recommend using this if you need a lot of extra add-ons on your domain.
4. Netim – I'd recommend using Netim for purchasing geographical domains such as .eu or .me. A fun option is to purchase a domain that ends with the last characters in your name e.g. www.jemi.ma.

Watch out for hidden fees when purchasing a domain. Lots of registries tend to offer very cheap or even free domain names but there are usually extra charges in the renewal method. Look out for the add-ons which you might not need.

A couple of the developers in the pair programming sessions had paid for .com domain names but the majority didn't own a domain name and weren't interested in purchasing one, at least for the time being.

The benefits of having a custom domain name are:

• it improves your SEO rankings
• it looks more professional when you're sending a link to a prospective employer or client.

Domain providers charge for domain names annually, and a .com domain might cost you $10 to $30 dollars per year, depending on any extra additions.

If you aren't comfortable with paying for a domain name yet, you can opt for a free domain option. We'll explore free domain options in the next section.

2) How to Choose a Hosting Platform

When you build a website, you can access it on your machine by going to localhost or index.html. However, if you want other people to be able to access your website on the internet, you need to upload it to a hosting platform.

A hosting platform is the localhost of the internet – it's a server that can be accessed by everyone.

Most domain registries also offer hosting options but it's not necessary to have your domain and hosting from the same place, as most registries charge an extra fee for hosting. Once you've purchased a domain name, you can use any hosting platform you'd like.

There's a number of hosting platforms that offer free hosting and domain names (with the platform domain attached) and you can choose any platform depending on how you'd like to structure your portfolio.

Let's explore the following options.

How to host a portfolio site without writing code

Platform: webflow.com

Webflow is a drag-and-drop site that allows you create great looking websites by writing little to no code.

With Webflow, you can create amazing layouts and animations by using the HTML and CSS functions on their dashboard, and it comes with an inbuilt CMS so you don't have to worry about updating content or storing images.

Webflow offers a free domain option with a webflow.io extension, for example myportfolio.webflow.io. With this option, you can create a static site with 2 pages. They also have a showcase of projects you can clone from and an online forum where you can get most of your questions answered.

I'd recommend Webflow to designers and developers who have knowledge of CSS layouts and animations and want to quickly setup their site.

How to host a static portfolio built with HTML and CSS

Platform: GitHub Pages

GitHub Pages is a feature from the GitHub platform that allows you display the code from your repository on a github.io site – so the URL would look like my-portfolio.github.io

GitHub pages are best suited for static websites (that is, a site built with HTML and CSS with fixed content and no server interaction or build process needed). It's also very simple to set up and can take as little as 10 minutes to get your site up and running.

To create a GitHub Page, your repository should include an index.html file in the root folder. Then, go to the Settings page of your repository and select your master branch as the source in the Github Pages section.

This was the method most of the developers used during the pair programming sessions as it took the least amount of time and had little to no complications. I'd recommend Github Pages for beginner developers who want to deploy their static sites quickly.

How to host a site that uses a framework like React or Vue

Platform: Netlify

If you're building your website with a front-end framework which requires a build process, Netlify is your best bet. It's perfect for dynamic sites (that is, a site that generates content from a server or has functionality that requires scripting – like sending messages through a contact form) and it also works with static sites.

Netlify has great documentation that provides information on any questions you might have related to using the site. It also has key features for improving your site like Netlify Forms which allow you set up a contact form on your site with no server-side code needed.

I currently use Netlify for hosting my site and it's been my favorite platform so far. I'd recommend it for developers who want to get their site (static or dynamic) up and running without any hassle in setting up a build process.

How to host a site with a backend server

Platform: Heroku

If your portfolio site requires data from a backend server (like getting a list of your projects from a RESTful app), then you'll also need to deploy that server so the frontend can access it.

Heroku is a platform that lets you deploy backend apps from eight supported languages (including Node.js and Python). It also allows you deploy static and dynamic front end sites so you can create two projects – one for your frontend code and the other for the backend app.

You can visit the Heroku Dev Center for more information on getting started with Heroku.

I haven't personally used the Heroku platform for deploying backend apps before, but one of the programmers in the pair programming session did so I thought I'd include it as well. I'd recommend it for full-stack developers who want to display their frontend and backend skills on their portfolio.

3) How to Deploy Your Site

Deploying a site means placing the code you've written on the hosting platform. In older platforms, you'd have to upload the code and all resources to a cPanel (which is basically File Explorer for hosting platforms).

Source: What Is cPanel Used For And Why Do I Need It? - A2Hosting

Nowadays, websites have become a lot more complicated than just .html files so they require different deployment methods.

If you have a React app, for example, the project will need to be built (like how you run npm start on your laptop to view the app) every time it's deployed to the domain.

Depending on the hosting platform you've chosen, the method of deployment is different. You can set up continuous deployment from a Github repository on Netlify (documentation here) and Heroku (documentation here). This means every time you push a new change to your repository, the change is reflected in your site.

If you're choosing to use a custom domain name, you'll need to link that domain name to your site. For example, on Netlify, your app is created with a netlify.app extension by default so it looks like myportfolio.netlify.app, but you can set a custom domain name. You can also set a custom domain name on Heroku.

Linking a custom domain on these platforms means you'll need to update the DNS (Domain Name System) records from your domain provider. DNS is what allows users access your site with your domain name, for example portfolio.com instead of an IP address like 127.0.0.1. You can read more on DNS here.

Source: Add an A record - GoDaddy

4. How to Choose a Design for Your Site

Another topic we covered during the sessions was choosing a design. Some of the developers already had their sites built, but some had no idea what sort of layout to go for.

When it comes to choosing a portfolio design, I recommend viewing other developers' portfolios for inspiration and ideas on how to structure your site. This articles shows 15 Web Developer Portfolios or, if you need some more inspiration, try 63 Examples.

You can also read this article on 5 Projects To Include in Your Front End Portfolio for project ideas.

It's important to determine the purpose of your portfolio and make sure that purpose is evident in every part of your site.

For example, if you're trying to use your portfolio to get a job, make sure you highlight your skills and experience on the main page and include call-to-actions to allow people view your résumé or send you a message.

If your portfolio is meant to get you clients for freelance purposes, then focus on previous projects you've built and reviews from other clients.

Source: https://www.bmediagroup.com/news/employ-adam/

Conclusion

Let's summarise what we've covered in this article. To deploy your site online, you'll have to:

1. Purchase a domain from a domain provider.
2. Choose a hosting platform, depending on how you want to build your site.
3. Link your domain to your hosting platform by updating your DNS records on your domain provider.
4. Set up deployment of your site from your hosting platform according to their documentation.

I wrote this article and offered the pair programming sessions because I remember how complicated it was to deploy my first website. I also remember how I made a lot of mistakes I could have avoided (like paying 10 times the original fee on renewal of one of my domains thanks to a bunch of add-ons I didn't need) so I hope you found it helpful.

If you did, or you have any other questions, you can let me know on Twitter or send me a message on my website.

A website is made up of of various pieces of information that live in different sections and on different pages within the site itself.

You can also find information relating to that site on pages that are on different websites.

All these sections and pages are linked together in HTML using the href attribute.

In this article, we'll look at the term Hyperlink. Then we'll learn about the different ways you can create hyperlinks, what href does, and how to appropriately use the href attribute to link sections and pages.

What are Hyperlinks?

In HTML, there are various forms of links. In images, there is the src attribute to "link" the source of an image.

For stylesheets, there is the link tag with the href attribute to "link" the source of a stylesheet.

For anchor tags, there is the href attribute to "link" the referenced section or page. Anchor links are also called hyperlinks.

When a user follows a hyperlink, they are navigating to that page. Hyperlinks are elements that reference another document, such that when a user clicks on that element, they are directed to the new document.

When to Use Hyperlinks

As stated above, you may want to link various pages (within your website or externally) or sections on your website.

In this article, I'll highlight three ways of creating hyperlinks. These different ways are important to know because they determine the values of the href attribute.

Alright, let's look at those three different ways now.

1. When you want to link to sections of a page

You might use this method, for example, when you're creating a page with a table of contents.

In this case, you may not want your readers to have to scroll down to the last section. It would be nice if they could just click on it in the table of contents and the browser would take them there directly.

This type of linking occurs in the same document, and just takes the reader to different sections. We'll learn how to create a hyperlink for this use case when we learn about the href attribute.

2. When you want to link to another page within a website

On your site, you might have a home page, about page, services page, and other types of pages. This method helps users navigate from one page to another.

3. When you want to link to external pages

Sometimes, your website may not contain certain information and another website may have it. In such cases, you might want to reference the other website.

To do this, you would create an external hyperlink that navigates the user to the other website.

These are the three major ways of linking pages. Let's now see how the href attribute can help you enable them.

How to Use the href Attribute

The href is an attribute used to reference another document. You can find it on link tags and anchor tags.

The href attribute is used on anchor tags (a) to create hyperlinks in websites. The value of the attribute contains the URL which the hyperlink points to. You can use it like this:

<a href="URL">Hyperlink</a>

However, the URL values can be different depending on what you're pointing to. For the three ways we looked at earlier, let's see how you can use href.

1. How to use href to link sections within a document

In this case, the value will be the id of the element that starts the section. That means we will have something like this:

<a href="#second-section">Go to second section</a>
<!--
  Some stuffs here
 -->
<section id="second-section">
    <h2>Second section</h2>
</section>

When the "Go to second section" hyperlink is clicked, the browser scrolls down to the section with the associated id. Also the URL in the URL bar of the browser changes.

For example, if the previous URL was mywebsite.com, the new URL will be mywebsite.com#second-option.

2. How to use href to link pages within a website

To use href this way, you need to understand what Relative URLs and Absolute URLs are.

Relative URLs are short URLs that point to a document on the same website. It's more like, from where you are, how do you get to this other place on the same website?

This is in contrast to Absolute URLs. For these, you aren't concerned with where you currently are – you provide the full details to get to another place like you were starting from the beginning.

For navigations between pages that live on a website, you can use any of these URLs, but Relative URLs are commonly used.

Say you're on the home page, and you want to reference the about page. Here's how to use the href attribute to do that:

<a href='/about' >About page</a>

From the homepage (say mywebsite.com), the above link will navigate to mywebsite.com/about.

There's something worth noting about the slash (/) before the link. The / tells the browser to append the link to the root of the site (which is the domain). So the root is mywebsite.com and the link is appended like so: mywebsite.com/about.

If the slash was absent (<a href='about'>), the browser would replace the current path with /about.

For example, if we were currently on mywebsite.com/projects/generator, and we had the following links:

<a href='about'>About 1</a>
<a href='/about'>About 2</a>

"About 1" would navigate to mywebsite.com/projects/about (replacing the current path /generator) and "About 2" would navigate to mywebsite.com/about

3. How to use href to link to pages on another website

Since it's on a different website, there's no way we can use Relative URLs. For this, we need to specify the absolute source of the document we are referencing.

For example, say we're on mywebsite.com, and we want to reference google.com, this is how we'd do it with href:

<a href='https://google.com'>Google<a>

If we had only written google.com, the browser would treat it as a page within a website, thereby appending it to mywebsite.com.

Conclusion

In this article, we've seen how the href attribute allows us to create different types of links. These various links show the different ways that documents/pages can be referenced within a website.

When we design our websites, we progress from wireframing to prototyping to – finally – a full design.

I wanted to explore and expand on what Prototyping actually means by taking you through the full process.

Note that I created another course that covers the first step of designing a website: building a wireframe. You can read about wireframing and watch my 30 minute video course here.

In this tutorial, we'll cover:

1. What an Early Prototype is
2. Creating a Structure: Frame, Rows, Columns
3. Adding Content: Header, Slider, About
4. Designing Sections
5. Conclusion: What we've learned from the prototyping process

What is an Early Prototype?

A prototype is normally the secondary iteration of a design, as it is built on top of a wireframe.

A wireframe usually involves a simple drawn sketch via paper, pen, or online tool. Next we build the prototype, which is our more refined mockup for the website or app.

Let's take a look at the early wireframe we built in the previous article:

The wireframe we created in my previous wireframing course.

It has a number of pages, sections, and areas where text and images will be added later.

The goal, then, in the Prototype is to build this visually, but without adding color or images.

In this example, I will be using Figma to do the Prototype. You can view the whole Figma protype here.

How to Create a Website Prototype Structure: Frame, Rows, Columns

When we created the wireframe, we considered the grids – but they were hand drawn.

When doing an early prototype, we have to define them properly so that the whole design follows the grid structure.

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This will be useful later when we collapse the columns to rows for mobile responsiveness.

You can create your own grid structure in Figma. But be aware that you (or someone else) will later need to actually code these designs.

Whenever you're designing something, be sure to take the developer into consideration.

How to Add Content to a Website Prototype: Header, Slider, Sections

Unlike the Wireframe, we are no longer representing text with lines, and headers with blocks. Instead we need to fill out content for a mockup.

This doesn't mean adding colors or images. But it does mean we have to show real text.

At this stage, it's a great idea to make sure that the header and sections are shown with the actual content they will be intended to hold. This will allow better selection for colors and images in later stages of the design.

In this part of the example, I built out the slider with hero text, and a description underneath. There are a few things to look out for at this phase of the prototype process:

• Font sizing and positioning
• Content location and spacing
• Margins and padding between sections and content

How to Design Sections of the Website Prototype

For prototyping and the final mockup, it's important to start layering your groups and sections. Sections can include things like the header, the "about us" section, and the sponsors section.

You can create groups in your UI tool (Figma does this with Ctrl+G). Label your sections and set them with different background colors. This will make it easy to identify them, and will allow you to easily move them about.

Too many times I've been asked to move certain parts of a website up and down the grouping. By grouping all your components into sections, you will make it much easier on yourself during the prototype phase of the design work.

Conclusion: What We Have Learned from the Prototyping Process

As we build out the rest of the design, it's important to ensure that this early prototype does not become a full mockup for a website design.

It's easy to get carried away. But the goal of doing a prototype after a wireframe is to ensure that we can continue to plan the website's development.

It's much easier to identify problems and issues in the early planning stages and update them before diving into creating the full design. Such prototyping may only take you a few hours, but it can save days worth of effort later in the process.

Once you've prototyped multiple pages, you can move on to the full mockup design phase. This will involve figuring out color theory, typography, and images that work accordingly. We will take a look at this in the next article in this series next month.

Bonus: Adding an Interactive Prototype Run

We only created a single page for this example. This said, prototyping also allows you to create an emulated example of the site operating.

This emulation is very useful for conducting demos, testing how clients respond to seeing a real world example of an early mock-up, and revising how all of your links flow.

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

• Youtube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

A while ago I started an Apple collection. I've been following Apple hardware (and its aesthetics) since I was a teenager, but at that time I didn't the have money to own a Mac.

I got my first Mac when I was 19. It was an iBook 700 Mhz, acquired on an eBay-like website in Brazil. The money came from a Flash project.

After living in Canada for a few years now, I have some extra money to spend on a hobby. Most of the time I buy the devices from people on Craigslist.

After a few laptops and iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a Gist containing the model, serial number, how I got the device, the minimum/maximum OS, and so on.

The list kept getting bigger and bigger, and the content started looking messy. I thought showing this content on a website would be perfect, and I didn't need to hire a developer :D

At first, I decided I would organize my data in an SQL database, with the information distributed in different columns and tables. After that, I would create a graphQL API to provide me the data needed to populate my UI – probably written in React, compiled with Babel and packed with Webpack.

Reading the previous paragraph aloud, you can see that there are many technologies, and that I even ignored the backend language and UI details like SASS or styled-components. It all sounded a bit overwhelming when my ultimate goal was showing a list of items in a nice design.

That being said, I thought about how I can deliver this content without:

• An API or any backend work
• Any JS framework/library
• Any JS tooling (Webpack, Babel, etc.)
• Any CSS work

On top of these constraints, I had a few stretch goals:

• Create a website with good accessibility
• Create a website that works on old browsers, since I have computers running Mac OS 9.2 and iDevices running iOS 3

Challenge accepted. One index.html, a few vanilla JS files, and no custom CSS. I'd like to share the experience of building the site with you.

TL,DR:

• Final website
• Source code

Let's talk about the constraints, point by point:

No API or any backend work

A while ago I saw a SaaS product called Stein. You create your data inside a Google Sheets document and they give you an endpoint with your data. Their library works like Handlebars, and it looked perfect for my use case:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>

    {{content}}

    Read on <a href="{{link}}">Medium</a>
  </div>
</div>

No JS framework/library and tooling

I decided to avoid adding a framework or library in this project since the use case didn’t need one. All JS interactions on this page are quite simple (show/hide menus, open a modal screen, handle permalinks).

Since I was not using a framework/library, I could avoid adding Webpack and Babel. No need to dig into presets and loaders.

P.S. You can argue that I could have chosen create-react-app or Next.js and get all these problems solved, but no.

No CSS work

I love writing CSS, especially when I can use SASS, but I decided not to write any CSS here. I had a few good reasons to avoid doing it:

• I had no designs in mind, and despite the fact that I could do something decent-looking, I didn’t want to put time and energy into it
• I wanted to use Tailwind CSS

If you've never heard about Tailwind CSS, please don’t just think, “It's just an alternative to Bootstrap.” Here is a good, short explanation from their website:

Most CSS frameworks do too much.
…
Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

This is pretty much true. A quick search gives you many web apps “rebuilt” with Tailwind CSS:

• Whatsapp
• Telegram
• Facebook
• Reddit
• Youtube
• Slack
• Coinbase
• Github
• Trello
• Twitter
• Netlify

Create a website with good accessibility

Last month I started taking accessibility courses at Deque University. Their content is great and it reminded me that HTML is accessible by default. By using a semantic HTML structure and testing basic things like keyboard navigation and colour contrast you eliminate several barries that move people with disabilities away from your content.

I am not an accessibility expert, but here are a few accessibility-related things I’ve worked on for this website:

• Disable stylesheets: By disabling stylesheets you can ensure that your content follows a logical/structural way.
• VoiceOver: VoiceOver is included in macOS and iOS. It is very simple to use, and by experimenting with it you can have a better understanding of how people use this feature.
• Modals: Modals can be problematic. I decided to follow Ire Aderinokun’s approach.
• axe: The extension is an accessibility checker for WCAG 2 and Section 508 accessibility rules.

It is not perfect -- there are a few things that I didn’t work on for my site, like adding a skip link to the main content. If you are curious, here is the Pull Request with all the changes.

Create a website that works in old browsers

I couldn’t achieve this objective since I had no control over scripts and styles. However, it doesn’t seem to be impossible. A few things I noticed:

• Expedite (Stein client) uses fetch, which was only added in Safari 10. The request to their server could be probably replaced with an XMLHttpRequest.
• Tailwind uses Flexbox in many elements. Safari only started supporting Flexbox in iOS 7. Maybe I could write a few properties for their existing elements to achieve a decent look.
• SSL Certificates may be an issue for old browsers.

Conclusions

Making this website was super fun. Having this kind of pet project gave me a good reason to work with tech that I don't use in my job. Maybe in the future, Stein and/or TailwindCSS will be useful to prototype a feature or build a hackathon project.

The fact that I added “constraints” to my project made me think outside the box. Even though I didn't achive all my objectives, it helped me understand more and more about how all the pieces are connected.

I totally recommend doing something like this to give you a chance to play with different tech. It doesn't need to be an Apple collection -- you can create a site to list your favourite books or the best hikes you've done. In this case, the journey matters more than the goal.

Out of curiosity, I tracked my time using Clockify and between coding, creating the data, testing and writing this post I’ve worked 13 hours on this.

Also posted on my blog. Follow me on Twitter

If you are a web designer/developer who currently bills per hour, I hope I can persuade you to change your pricing method to value based pricing.

In this article, I discuss both of these methods in detail and without the fluff so you can just get the nuggets and practical understanding to make an informed decision from there.

On a serious note, if you apply what you will read about today, you can really earn more, work less and be a more fulfilled freelancer - and I don't just say this half-heartedly.

Enough fluff, let’s get straight to it:

Billing By The Hour

I’ll start with this pricing method first because it’s the most popular.

I am well aware that there are many web designers/developers out there who make a very good living by using the hourly billing method, but in my opinion, value based billing is far better than hourly billing.

To explain why, these are some common truths about hourly billing:

• There are times when you argue over invoices and timesheets which wastes time for both parties (yes, there are software programs to track this, but even that can be disputed by a client).
• Feeling like you have to be “micro-managed” by the hour. Clients would often want an estimate of the total hours before the project starts. They would then make a decision to go ahead with the project based on the estimate and not the final cost.
• There’s no incentive to stay up to date with the latest technologies, software or tools to make your job easier because if you do, you get paid less.
• The longer the project is, the better it is for you (more income) and the worse it is for the client (more expense).

Billing Hourly is Harmful for Your Working Relationship with the Client

To illustrate this point, let’s say you wanted to build an additional room on to your house.

The builder tells you it will cost $75k based on his best estimates and you go ahead with the agreement.

The builder completes 80% of the project and then says it’s going to cost another $15k to finish the remainder.

How would you feel? Would you work with them again? Would you refer them to friends?

Probably not. And it’s the same thing with web design/development projects.

If the project is not planned correctly, things can really turn bad if you now realize you are losing money and then tell the client it’s going to cost 30% more because of “xyz”.

Hourly Billing Discourages Efficiency and Innovation

Let’s say that the same web design project comes to you and 9 other web designers. You each have different hourly rates that you decided would be fair for your expertise.

“John” charges $45 per hour and others charge $75 per hour and then there’s this one guy (who I’ll name Bob) who charges $150 per hour.

Bob, with his experience in finding better ways to complete projects, codes the website in 3 hours = total fee of $450.

John, with his lack of experience, knowledge and efficiency, codes the website in 16 hours = total fee of $720.

Hourly billing encourages you to not work smart and to drag the hours so you get paid more.

Look, some websites can be done in less than a day – even a few hours if you have all the info ready and you know exactly what needs to be done.

If you are charging by the hour, why would you rush to get this website done as soon as possible when you could delay it by a few days and get paid more for it?

Maybe there’s a snippet of code you can buy for $100 that can save you 3 days of coding time, but you are hesitant to do this because that means you lose out on getting paid more and you have bills to pay.

In other words, the client is paying you for 3 days extra (which would be more than $1,000) because you don't want to use a $100 code snippet as this means you lose out on $1,000.

Can you see why this is harmful to you and your client?

Here’s another practical example:

If you are working on 3 client projects (retainer or once-off) at the same time and it takes you up to 2 hours per week to track your hours, prepare invoices, process payments, organise the accounting/tax side, etc. that can take almost a full working day each week just to handle this boring administrative task.

This is beyond crazy. You are not hired as an administrator or debtors clerk or whatever else – don’t fall into this pit.

On top of that, you’ll deal with one or two clients who always question everything and this takes even more of your time. This leads to a lack of trust down the line and nobody wants to work like that.

I know these are very simple examples, but it still holds true in more complex projects as well.

Your clients need to know this. Use the same analogy above or something that makes sense to you, but this is very important in moving forward.

Your Income is Capped

There are only so many hours you can work in a year. Let’s say you are earning $60k per year.

If we work on roughly 250 working days, this is $240 per day and $30 per hour (8 working hours each day).

Firstly, not many web developers/designers are booked every hour for the whole year, but let’s say this is the case. What if you wanted to earn $100k next year?

That would mean you need to increase your hourly billing to $50.

Although it’s only $20 extra per hour, that’s $160 extra per day, $800 per week and over $3k per month extra for a client to consider. It can often be a deal breaker in keeping retainer clients or signing up new clients for weekly/monthly projects.

Unless your existing clients really value your services, they will not understand why you now all of a sudden value your services at almost twice the price for the same amount of work.

It’s very likely that they will start looking for other freelancers with a lower hourly rate.

New clients or prospective clients may not sign up with your premium service as you are almost double the “going rate” for other freelancers with similar expertise.

Bottom line: increasing your income is not easy. Although you want a higher income, the clients you work with really don’t care about your income desires and they don’t want a higher expense.

Bottom line of the bottom line: Guess who really makes the final decision at the end? (it’s not you)

The solution is not some fancy tool or time-tracking software.

Yes, these can help, but this is more like a temporary fix and it doesn’t deal with the main issues mentioned above.

Remember: It’s in the client’s best interests that you don’t bill by the hour. You just need to educate them on this.

Value Based Pricing

To avoid any misconceptions about this pricing method, it’s not a fixed amount that is calculated by your cost + your desired profit.

Here are some common truths about value based pricing:

• You don’t sell hours (like everyone else does) – you sell results (or the potential results).
• There’s an incentive to stay up to date with the latest technologies, software or tools to make your job easier and to become more efficient.
• It allows you to really create something amazing and not to worry about going over the client’s desired budget.
• There are no hidden financial surprises to clients. You take all the risk in delivering the project within the total cost you’ve informed the client about.
• You can work with less clients and provide a better service because you are often earning significantly more.

You are essentially providing a fixed amount based on the projected return or outcome of the project.

You must probably be thinking that this sounds all fancy, but how can it be applied?

Here’s a short summary:

Find out the potential value of the project to the client over a year. In other words, find out the potential increase in sales that the business could be making after you create the website.

Then base your price off of this potential return.

Example #1 – The Existing Business Website:

A business sells agricultural drones via their website. They ask you to create a website focused around getting more sales.

After you ask the basic questions (refer to the Prospective Clients Checklist), your 2 main questions should be:

• 1. How many sales do you currently get each month?
• 2. What is the average sales value of a drone?

They answer with:

• 10 sales per month
• $8,500 each

You then do simple math to figure out how much they make each month ($8,500 x 10 = $85,000).

You look at their current site and see where they are losing sales and you work on a low estimate of what you expect sales could increase by after you make a conversion-centred website.

In this scenario, let’s say you are confident it would at least be 2 sales extra per month.

This would mean the business would make an additional $16,000 per month and almost $200,000 after one year.

After informing the client of this in the proposal and why you feel this is a low and realistic estimate, you then give your website cost based on the potential annual return.

For this example, your price could be $10,000 - $15,000.

Would you, ‘as the business owner’ be willing to pay around 5% of what you could potentially make after one year?

Of course.

Example #2 – The New Business Website:

A business sells agricultural drones and they want a new website.

They ask you to create a website focused around getting sales.

After you ask the basics questions (refer to the Prospective Clients Checklist), your main question should be:

• What is the average sales value of a drone?

They answer with:

• $8,500 each

After doing further research about the market and their marketing plan, you are confident that you can create a conversion-centred website that can convert into at least 4 sales each month (or one sale per week).

This equals $34,000 per month and over $400,000 in a year.

Your price could easily be $10,000 - $15,000 and it would make sense to the prospective client after you have explained the value of the potential return.

Remember: your responsibility is to make the business see this as a necessary investment and not a cost. You need to explain why you are the right person for the project.

By breaking it down like this and being practical about it, you instantly stand out from the crowd of other freelancers who say things like, “I estimate that this project will take about 120 hours X my hourly rate of $45 = $5.4k”.

The bottom line is that it's a win for you and a win for the client.

By thinking about OUTCOMES, it shows you understand the project as the business does. You are not thinking about HOURS like everyone else does.

Now of course this is a very simplified summary. You would have to deal with the objections clients or potential clients may have like:

• 100% payment upfront

• Questions about pricing

• Doubts of the client

As far as I know, this method works in any product or service industry – even lawyers and accountants. The issue is not whether it works, but rather who is actually doing it effectively.

The truth is that this model is simple in theory, but in practice you might stuff up in a few areas.

That’s OK… don’t have a narrow mindset. You are running a marathon and not a sprint.

It takes a lot of trial and error and ultimately you will learn by experience about what, how and when to say the right things that will get you higher paying clients.

Learn from your mistakes, see where you can improve and each year you will become better in how you handle objections, how you communicate and more.

I hope this has helped you to rethink this topic.

If you’d like to learn more and improve your skillset and become a happier freelancer that earns more, make sure to check out my course.

Until next time,

Kyle

Becoming a web developer can be as challenging as working out every day.

It’s important to know what it will take to succeed as a web developer.

Here are 6 things to consider for aspiring web developers:

1 – The Right Attitude and Belief

The first hurdle to get through is yourself.

Let me explain:

Why is it that some people in difficult situations manage to succeed and those who have ‘perfect’ upbringings sometimes end up in positions that don’t make sense at all?

You don't want to become a web developer.

You want to become a successful web developer.

(sounds cheesy, but it's true).

The next step after aligning your attitude to becoming a web developer is BELIEVING that you are one.

You may be thinking, “but I don’t know enough to be called a web developer” or “but how can I be a web developer if I haven’t even started yet?”

These are valid questions… and I’m not saying you should lie about being a web developer or that you should take on work far beyond what you are able to do at this moment.

What I am saying is that you need to “trick” your brain and boost your confidence in BELIEVING that you are a web developer rather than second guessing it. Try it and I can assure you that this method is far better than doubting the fact.

If someone asks you, “so what do you do?” tell them without any doubts, “I’m a web developer/freelancer.”

This may lead nowhere, but you’d be surprised how many people will be very interested in the fact that you are a web developer/freelancer. Almost as if you pulled some Star Wars Jedi mind trick on them.

Whether you’d like to become a web developer or freelancer, your mind-set and attitude is crucial to your success.

2 – Determination and Discipline

Failure and doubt are inevitable. The question is how you will deal with it when it happens.

You need to be determined, motivated and driven to really be successful at web development. There are many aspiring web developers out there. Not all of them will be determined and driven and motivated.

Not all of them will be disciplined in learning web development. That might not sound right, but it is true. We are all busy with other things and you may even have a full-time job while you learn web development (that’s in fact how I started).

The hard part is not starting… it’s whether you keep going. You need to be disciplined in learning.

Set a schedule and stick to it.

I used to work from 8am-6pm, come home to my wife and be exhausted, eat, relax for a bit, and then start learning to code from 8pm to 1am/2am for a few months. That was very challenging for me, but I needed to be highly focused and it worked out well because of that discipline.

Maybe you have children or other important priorities, but don’t make excuses. If it’s important to you, you will make a plan to learn and you will force yourself to be disciplined.

3 – Stubbornness/Persistence

You may be thinking, “why stubbornness?”

It’s good to be stubborn or persistent as you learn.

What I mean by that is if you have an error in your code or if it is not coming out how you’d planned and thought (which happens more often than you might think,) don’t just move on if you can’t find the solution and don’t cut any corners. Be stubborn and figure it out.

Although it may take you longer to figure out, what you learn by being stubborn in this regard is that your knowledge will remain with you and you will be more efficient and effective in your future projects because of this.

4 – Prioritising

If you want to do something great, it comes with sacrifice. This is challenging to accept for most people.

If you want to be a great programmer or freelancer and you are complaining that you don’t have time, then just look at your daily/weekly/monthly routine to see what you can remove to free up more time so that you can learn more, develop your skills and apply what you know.

One of the biggest distractions I’ve eliminated in my life is watching TV. It was hard to do at first, but even if I got given a free TV the size of my wall, with free unlimited movies and series, I wouldn’t even be interested now.

I’m not the only strange one out there who does this. Seth Godin, one of the greatest marketers and thought leaders of our time is also a big advocate for not wasting time watching TV.

Whether you are a student, a full time employee, a husband/wife/father/mother, you need to know how to prioritise.

Every single day there is around 140,000 websites added to the internet. Imagine… that’s almost 2 websites EVERY SECOND!

So if you are interested in creating a website for your own business, it will be good to start asap!

Do what you need to do, don’t neglect your family, cut out the TV, cut out distractions and learn how to code – after all, that is your goal so be serious about it and work towards it.

5 - The Skills

You can’t become an accountant without understanding accountancy. The same principle applies for web development.

In order to be a web developer, you need to know what web development is, how it works, the programming languages and their importance, what to learn, communication skills, problem solving, innovation and more.

It’s important that you know how to learn effectively. To read more into this, I’ve broken down the programming languages in my free eBook.

6 – Your Goals

You need to define your goals.

WHY do you want to be a web developer/freelancer?

Would you like to learn web development and apply for work and be an employee?

Would you like to be a freelance web developer and work for yourself?

When you create a website, what is your deadline?

Once you have your goals, make sure you are driven by it and focus on working towards achieving them. Don’t be like most people and set goals that fade away after a few months…

How to set your goals in 5 simple steps:

Be S.M.A.R.T (Specific, Measurable, Attainable, Realistic, Time-Bound)

Specific: To become a freelance web developer
Time Bound: 12 months
Measurable: I will measure my progress every month and set defined goals to reach my specific goal.
Attainable: Challenging, but yes.
Realistic: Definitely.

Once your main goal has been set, break down the 12 months into medium-term goals, in this case it would be:

*Don’t worry if these terms are a bit technical for you, I explain more in my eBook.

In 3 months, I want to know Frontend Web Development
In 6 months, I want to know Backend Web Development
In 9 months, I want to start working on my portfolio website, build my brand, improve on my business knowledge and perfect my web development skills.
By 12 months, I want a portfolio of 5 websites, I want to be a full-stack web developer and I want to know the fundamentals of freelancing and gaining clients.

Once I have my medium-term goals, I break it up into my monthly goals:

Frontend Web Development
Month 1 – Learn HTML & CSS
Month 2 – Learn JavaScript
Month 3 – Create website using HTML, CSS & JavaScript

Backend Web Development
Month 4 – Learn PHP
Month 5 – Learn more advanced PHP
Month 6 – Make a functional, dynamic website with HTML, CSS, JavaScript & PHP

Portfolio, Personal Brand, Business Knowledge, Web Development Knowledge
Month 7 – Create a personal portfolio website, social media profiles and build a personal brand
Month 8 – Reach out to businesses & organisations to create websites for them
Month 9 – Improve portfolio, web development skills and personal brand

Portfolio of 5 Websites, Full-Stack Web Developer, Freelance Fundamentals, Clients
Month 10 – Must have a minimum of 5 websites on portfolio
Month 11 – Learn freelance fundamentals and business essentials
Month 12 – Reach out to prospective clients, promote your work and get clients

Now that you have your monthly goals, break it down into daily goals:

You don’t need to study full-time to make this goal a reality – this would help for sure, but if you are working and you can only study part-time that is also fine. If you can dedicate 3-4 hours every night to this schedule, I fully believe that you can accomplish this goal if you are dedicated, disciplined and motivated enough.

This is just a very short example and a simplified guideline, and it is not intended to be a comprehensive goal-breakdown, I just want to illustrate how it could be done. The programming languages mentioned above are just examples too.

Write out your goals, print it out and stick to it.

One of THE MOST important aspects of achieving your goal is:

ACCOUNTABILITY

If you are accountable to someone and you have weekly/monthly calls to discuss the progress and he/she holds you accountable and motivates you when you feel like giving up or have any doubts, it will push you through and help you stay focused. The more honest and ‘hard-core’ your accountability partner is; the better!

I had an accountability partner when I started freelancing, and it was crucial in playing a major part in my freelancing success today.

Last, but not least… TAKE ACTION, adapt and stop making excuses.

Until next time,

Kyle

Using CSS position to layout elements on your website can be hard to figure out. What’s the difference between absolute, relative, fixed, and sticky? It can get confusing pretty quickly.

To help, this tutorial will guide you through all the CSS position properties. And you’ll be able to get your website layouts pixel perfect!

What does CSS position do?

Using CSS, you can layout all your elements on your webpage visually. For example, you can position an element at the very top of your page, or 50px below the element before it.

To control just how an element will appear in the layout, you need to use the CSS position property. In addition, you can utilize some other position-related properties: top, right, bottom, left, and z-index. (We’ll get more into those later on.)

The position property can take five different values: static, relative, absolute, fixed, and sticky.

It sounds like a lot, but don’t worry!

Here’s how each value for CSS position works:

1. Static

Position: static is the default value that an element will have. This means if you don’t declare position for an element in CSS, it will automatically be set to static.

It’s important to note that having a static position is the same as not setting the position property at all. (This will come into play a bit later on with absolute positioning.)

Elements that are statically positioned will appear on the page in what we call the normal flow. For example, if you have multiple <div> elements one after the other, they will appear on the page directly below one another.

Here’s a quick demo to illustrate static position. We are using the following HTML markup:

<div class="parent purple"></div>

<div class="another green"></div>

And here’s the CSS we’re using:

.first { 
   // No position set, so it's static 
} 
.another { 
   // No position set, so it's static 
   top: 50px; 
}

The second element has a top property set to 50px. You would think that this would move it down 50px, right?

However, here is how it will look on a webpage:

_View original code in [Codepen](https://codepen.io/thecodercoder/pen/XQKLdR" rel="noopener" target="blank" title=")

Since both elements have a static position, none of the layout CSS properties will do anything. This makes that top property have no effect on how the second element is displayed.

So that second element ends up being directly below the first element, with no space between.

How can we fix this? Let’s move on to the next position:

2. Relative

Position: relative is similar to static in that relatively positioned elements will follow the normal flow of the webpage. But the main difference is that using relative will now unlock the other CSS layout properties.

Think about it this way: you are setting the element to be positioned relative to other elements on the page.

Let’s see what this looks like, and adjust our CSS like this:

.first { 
   position: static; 
} 
.another { 
   position: relative; 
   top: 50px; 
}

All the CSS is exactly the same, except that we changed the second element to use position: relative. Doing this makes that top: 50px work!

_View original code on [Codepen](https://codepen.io/thecodercoder/pen/bJePJe" rel="noopener" target="blank" title=")

You can see that the second element is now 50px below the first one, adding that space between them.

Relatively positioned parent and child elements

Let’s try another example, using a parent element with a child element nested inside it. Both have position: relative set.

Here’s the HTML for that:

<div class="parent purple"> 
   <div class="child magenta"></div> 
</div>

And our CSS styles:

.parent { 
   position: relative; 
} 
.child { 
   position: relative; 
   top: 0px; 
   left: 0px; 
}

And here’s what that code will look like in real life:

_View original code on [Codepen](https://codepen.io/thecodercoder/pen/oOLKBK" rel="noopener" target="blank" title=")

You can see that the pink child element is nicely nested inside the purple parent element. The child is also positioned as close to the top and left inside the parent as is possible. (It will go as far up as the parent text)

Position relative is relatively straight-forward, right? Well, hold on to your hats, because things are about to get crazy with position absolute.

3. Absolute

Position: absolute will cause an element to be taken out of that normal flow of the webpage.

Wait, what does that mean?

So before, using static or relative positioning, elements would be nicely displayed one below the other, depending on their order in the HTML markup. But with absolute positioning, the element is completely taken out of that entire flow.

To help explain, let’s do a comparison to illustrate the difference between relative and absolute positioning.

In the previous example, we had a parent element with a child element, both positioned relatively. And the child was nested inside the parent element.

Let’s change that child to be positioned absolutely in the parent!

Our CSS will now look like this:

.parent { 
   position: relative; 
} 
.child { 
   position: absolute; 
   top: 0px; 
   left: 0px;
}

_View original code on [Codepen](https://codepen.io/thecodercoder/pen/RORXWN" rel="noopener" target="blank" title=")

The pink child element now looks very different from our last example.

While it is still within the confines of the parent element, it is positioned at the very top and very left of the parent. It’s even covering up the parent text content!

This is due to the top: 0px and left: 0px styles of the child, combined with the child being absolutely positioned. In the normal flow of things, elements wouldn’t be on top of (and covering up) other elements.

But since the child is absolute, it’s essentially on a different layer than the normal elements. So it can be positioned on top of what else is on the webpage.

But it will stay within the boundaries of the parent element– as long as the parent has its position set. Which leads us to our next point.

There is one other tricky aspect to child elements with absolute positioning…

An absolutely positioned element needs to position itself in relation to a positioned ancestor.

When you take an element out of the normal flow by using position: absolute, it will look for an ancestor element that has its own position set. This is so the child knows what element it should position itself in relation to.

So what happens if a child element is absolutely positioned, but the parent element doesn’t have a position set?

Here’s our CSS for this illustration:

.parent { 
   // No position set, so it's static 
} 
.child { 
   position: absolute; 
   top: 0px; 
   left: 0px; 
}

And here’s what the resulting webpage would look like:

_View original code on [Codepen](https://codepen.io/thecodercoder/pen/EJgxYm" rel="noopener" target="blank" title=")

The child has now escaped the confines of the parent element, since the parent has no position set. And the child has gone up to the next (grand)parent element, in this case the <body> element, which is as far as it can go.

(A somewhat sad metaphor would be that this “orphaned” child is looking up the ancestry tree for someone that will be its “parent.”)

This is a huge cause of unexpected behavior in CSS for many developers.

If you can remember to always set the parent element of a child element to have position set to relative or absolute (in most cases), you will avoid having your child elements flying up the page to who knows where ?

So, to summarize relative and absolute positioning:

The main difference between relative and absolute positioning is that position: absolute will take a child element completely out of the normal flow of the document. And that child will be positioned in relation to the first parent element that has its own position set.

The last two position values, fixed and sticky, are similar in some ways to position: absolute. But they also are related to your scroll position on the page.

Let’s take a look:

4. Fixed

Position: fixed will take the element out of the normal flow, and also position it in the same place in the viewport (what’s visible on screen). This means that scrolling will not affect its position at all.

Let’s see what this looks like in the code. Here’s our HTML:

<div class="first purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div> 
<div class="another green"></div>

And in our CSS, we’ve set the second element to be position: fixed:

.first { 
   position: relative; 
} 
.another { 
   position: fixed; 
   top: 0px; 
   left: 0px; 
}

And this is what that will look like:

_See original code on [Codepen](https://codepen.io/thecodercoder/pen/rbMNVj" rel="noopener" target="blank" title=")

The green fixed element will stay positioned to the top and left corner of the viewport. And if you scroll, the purple element will scroll up normally, but the green element will remain stuck to where we positioned it.

Tip: A fixed element must have a top or bottom position set. If it doesn’t, it will simply not exist on the page at all.

Position: fixed is commonly used to make navigation bars that are always affixed to the top. It’s a super helpful property!

Next, we’ll take a look at sticky positioning, which is like fixed positioning but with a little extra.

5. Sticky

Position: sticky elements will initially behave like position: relative elements, but if you keep scrolling, they will get taken out of the normal flow and behave like position: fixed wherever you have positioned them.

This can be really useful if you want to stick an element that’s initially farther down the page to the top of the screen.

In this code example, we have our green sticky element between two purple elements containing a lot of text. (All the better for scrolling!)

<div class="first purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div> 
<div class="another green"></div> 
<div class="purple"> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.... 
</div>

And the CSS for our sticky element:

.first { 
   position: relative; 
} 
.another { 
   position: sticky; 
   top: 0px; 
}

And here’s what it looks like on the webpage!

_See original code on [Codepen](https://codepen.io/thecodercoder/pen/oOzBYd" rel="noopener" target="blank" title=")

As you scroll down the page, when you see the green element come into the viewport, it seems like a normal, relatively positioned element. But as you keep scrolling, instead of scrolling off the page, it will become fixed and stick to the top of the viewport.

Just like fixed elements, a sticky element must have top or bottom set in the CSS. If it doesn’t have it, the element will continue to behave as if it was relatively positioned, and will never become sticky.

A note on browser support:

Currently, position: sticky doesn’t have complete support across the board. Newer browser versions do support it, but no versions of IE do. This may be important if you’re working on a client project where IE 11 support is necessary. You can check out the current support on CanIUse.com

In closing

I hope that you’ve found this tutorial and code examples on CSS positioning helpful! If you have any questions or feedback, feel free to leave a comment below ?

Other resources:

• Mozilla Developer Network: CSS Position
• CSS Tricks: position

Want more?

I'm creating a course in responsive design! Sign up here to get emailed when it's published.

I write web development tutorials on my blog coder-coder.com, post mini-tips on Instagram and coding tutorials on YouTube.