{"id":200422,"date":"2023-01-03T12:00:00","date_gmt":"2023-01-03T12:00:00","guid":{"rendered":"https:\/\/www.markup.io\/?p=200422"},"modified":"2024-02-06T11:05:46","modified_gmt":"2024-02-06T11:05:46","slug":"website-timeline","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/website-timeline\/","title":{"rendered":"What&#8217;s a website timeline? How to build one (w\/ free template)"},"content":{"rendered":"\n<p>You\u2019ve just signed a big website-development project with a huge budget.<\/p>\n\n\n\n<p>The only issue is time: the client wants the website done yesterday.<\/p>\n\n\n\n<p>After delegating some vague tasks on Asana \u2013 after all, you tell yourself, there isn\u2019t enough time to properly plan \u2013 your team does the best they can with the limited info they\u2019ve received.&nbsp;<\/p>\n\n\n\n<p>&nbsp;Finally, with only a few delays, the project is delivered on time for the client to review.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-timeline-sweating.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/giphy.com\/gifs\/hot-heat-overheating-5xtDarIN81U0KvlnzKo\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The client review does not go as expected. They\u2019re not happy with the user experience and website content.<\/p>\n\n\n\n<p>Next time, they\u2019ll go with another digital agency, and you\u2019ll know why.<\/p>\n\n\n\n<p>It\u2019s because you didn\u2019t take the time to plan this right.<\/p>\n\n\n\n<p>Instead of blaming yourself, you decided to make sure you never make that mistake again. That\u2019s what brought you here, right?<\/p>\n\n\n\n<p>We\u2019ve got a quick fix for you\u2014a website-timeline template to help you deliver high-quality work on time.<\/p>\n\n\n\n<p>Use it for sites, web applications, and any other web project.<\/p>\n\n\n\n<p>But before getting to the template, let\u2019s cover the basics of building a website timeline! \ud83d\ude00<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Table of contents<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#what\">What\u2019s a website timeline?<\/a><\/li>\n\n\n\n<li><a href=\"#why\">Why is having a website timeline important?<\/a><\/li>\n\n\n\n<li><a href=\"#steps\">7 steps to creating a website design timeline<\/a><\/li>\n\n\n\n<li><a href=\"#template\">Download our free website timeline template<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what\">What\u2019s a website timeline?<\/h2>\n\n\n\n<p>A website timeline is a project-management element that provides a <strong>visual representation of the milestones and tasks \u2013 laid out in chronological order \u2013 that must be completed <\/strong>to complete a web development project successfully.<\/p>\n\n\n\n<p>Think of it as an infographic that helps you and your team visualize the project plan. It offers an overview of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tasks and their dependencies<\/li>\n\n\n\n<li>Project milestones<\/li>\n\n\n\n<li>Estimated duration of tasks<\/li>\n\n\n\n<li>Resources needed to complete each task (workforce, technology, and other supplies)<\/li>\n\n\n\n<li>Due dates<\/li>\n<\/ul>\n\n\n\n<p>Visually seeing all this information helps every team member involved in the website\u2019s creations know their roles, what\u2019s expected of them, and how their work impacts completing tasks.<\/p>\n\n\n\n<p>That\u2019s why providing your team with a website timeline is important before taking on a new <a href=\"https:\/\/www.markup.io\/blog\/web-design-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design project<\/a>.&nbsp;<\/p>\n\n\n\n<p>It\u2019s a useful document for content writers, content reviewers, web designers, developers, QA engineers, and anyone else participating in the web development and design process.<\/p>\n\n\n\n<p>But why and how is a timeline useful for a website development project?&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why\">Why is having a website timeline important?&nbsp;<\/h2>\n\n\n\n<p>How often have you and your team had to pull an all-nighter to deliver a website project on time? Fortunately, those late nights can be avoided \u2013 it all starts with having a defined plan from the get-go.<\/p>\n\n\n\n<p>A properly executed website timeline offers you all the data you need, displayed visually, so you can make decisions quickly.<\/p>\n\n\n\n<p>Plus, a website timeline also:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Helps you avoid <\/strong><a href=\"http:\/\/www.markup.io\/blog\/what-is-scope-creep\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>scope creep<\/strong><\/a>: You can accurately estimate if your team can fulfill new client requirements.<\/li>\n\n\n\n<li><strong>Boosts productivity and accountability<\/strong>: Employees clearly understand how a delay in their work can affect dependent tasks. After all, nobody wants to be the bottleneck!<\/li>\n\n\n\n<li><strong>Improves time management<\/strong>: Workers are more likely to deliver on time when clear and realistic due dates are set.<\/li>\n\n\n\n<li><strong>Helps you avoid going over budget<\/strong>: The project requirements, budget, deadlines, and client expectations are clear, and you know exactly what resources and time you need to complete the project without overspending.<\/li>\n<\/ul>\n\n\n\n<p>In short, creating a website timeline before starting to work on any web development project helps you manage resources more efficiently.<\/p>\n\n\n\n<p>If you\u2019re sold on website timelines and eager to get to work, here\u2019s a seven-step process you can follow to create the last website timeline your team will ever need.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"steps\">7 steps to creating a website design timeline<\/h2>\n\n\n\n<p>Now comes the hands-on fun part!<\/p>\n\n\n\n<p>We\u2019ve created a step-by-step tutorial on how to create a timeline for your new website project so that you\u2019ll avoid last-minute stress when the client reviews your work.<\/p>\n\n\n<div class=\"wp-block-image .add-remove-bottom-space\">\n<figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"396\" height=\"1024\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps-396x1024.jpg\" alt=\"Create a website timeline in 7 steps.\" class=\"wp-image-200421\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps-396x1024.jpg 396w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps-116x300.jpg 116w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps-768x1987.jpg 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps-594x1536.jpg 594w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps-791x2048.jpg 791w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-steps.jpg 880w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Step #1: Meet with stakeholders<\/h3>\n\n\n\n<p>Creating a website timeline is part of the project-planning process.&nbsp;<\/p>\n\n\n\n<p>So, naturally, the first thing to do when drafting a project timeline is to <strong>meet with the stakeholders. <\/strong>This important conversation will allow you to<strong> establish their expectations<\/strong>, your team\u2019s capacity, and how you can combine the two to complete the project.<\/p>\n\n\n\n<p>No pressure, but this meeting is a decisive step for your team\u2019s success.&nbsp;<\/p>\n\n\n\n<p>The amount of time it will take to complete the project depends on what questions you ask the client and the amount of detail they provide.<\/p>\n\n\n\n<p>So, don\u2019t hesitate to ask for clarifications where necessary and <em>annoy<\/em> your clients with follow-up questions. \ud83d\ude08<\/p>\n\n\n\n<p>Nail down the specifics in topics like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Budget<\/strong>: How much is the client willing to spend on the new site?<\/li>\n\n\n\n<li><strong>Goal<\/strong>: What\u2019s the main objective of the project?<\/li>\n\n\n\n<li><strong>Expected deliverables<\/strong>: While the overall deliverable you\u2019re creating is the website, you should establish the site\u2019s structure early on (i.e., a portfolio website with a home page, an \u201cAbout us\u201d page, and a blog).&nbsp;<\/li>\n\n\n\n<li><strong>Deadline<\/strong>: When does the client want to launch the website?<\/li>\n<\/ul>\n\n\n\n<p>In addition to these questions, you should <strong>ask the client to share their brand guidelines and style guides<\/strong> with your team.&nbsp;<\/p>\n\n\n\n<p>You need these documents to have <a href=\"https:\/\/www.markup.io\/blog\/document-review-and-approval-process\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>shorter and faster reviews<\/strong><\/a>. This means your project will not be delayed due to revision requests because of using the wrong fonts, tone of voice, and other brand-identity elements.<\/p>\n\n\n\n<p>Write everything down and collect all the shared files; you\u2019ll need this information for the next step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #2: Draft a creative brief<\/h3>\n\n\n\n<p>Now condense your meeting notes into a one-page document that highlights all the essential data your team needs to ensure smooth production and sign-off.<\/p>\n\n\n\n<p>This one-pager is called a creative brief\u2014a blueprint for creative professionals. It helps teams add transparency to their workflow, be more productive, and <a href=\"https:\/\/www.markup.io\/blog\/project-approval-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">get projects approved faster<\/a>.<\/p>\n\n\n\n<p>To draft a comprehensive creative brief, you need to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highlight the project\u2019s objectives<\/li>\n\n\n\n<li>Write a project summary<\/li>\n\n\n\n<li>Include information about the client\u2019s company and its background<\/li>\n\n\n\n<li>Define the target audience<\/li>\n\n\n\n<li>Identify the client\u2019s competitors<\/li>\n\n\n\n<li>Expand on expected deliverables<\/li>\n\n\n\n<li>Document the deadline and budget<\/li>\n<\/ul>\n\n\n\n<p><strong><em>Pro Tip<\/em><\/strong><em>: Go to <\/em><a href=\"https:\/\/www.markup.io\/blog\/what-is-a-creative-brief\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>our blog post on creative briefs<\/em><\/a><em> to get tips and actionable strategies on how to create an effective creative brief.<\/em><\/p>\n\n\n\n<p>This document will help your team understand the client\u2019s requirements and expectations, making it easier for you to organize your notes for the next step.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #3: Break the processes down into tasks<\/h3>\n\n\n\n<p>Once the irrelevant info in your notes is stripped away and a clear overview of what&#8217;s expected from you is provided by the creative brief, you will be able to move forward with creating the tasks and subtasks that are needed for the project\u2019s completion.<\/p>\n\n\n\n<p>That&#8217;s a fancy way of saying you should figure out which steps go into the project.&nbsp;<\/p>\n\n\n\n<p>To make this easier, slowly zoom in on the process step by step and increase the level of detail with each zoom-in. \ud83d\udd0e<\/p>\n\n\n\n<p>For example, in the first stage, zoom in on the project\u2019s major stages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design<\/strong><\/li>\n\n\n\n<li><strong>Content creation<\/strong><\/li>\n\n\n\n<li><strong>Development<\/strong><\/li>\n\n\n\n<li><strong>QA, debugging, and beta testing<\/strong><\/li>\n\n\n\n<li><strong>Internal review<\/strong><\/li>\n\n\n\n<li><strong>Client review<\/strong><\/li>\n\n\n\n<li><strong>Launch<\/strong><\/li>\n<\/ul>\n\n\n\n<p>In the second phase, you\u2019d create tasks for each project stage:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Design: <\/strong>Page layouts for the homepage, about us page, portfolio, landing page, and blog.\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.markup.io\/blog\/how-to-mock-up-a-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wireframing and mockups<\/a><\/li>\n\n\n\n<li>Internal review<\/li>\n\n\n\n<li>Prototyping and page animations<\/li>\n\n\n\n<li>Internal review<\/li>\n\n\n\n<li>Client review<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Content creation: <\/strong>Text for the homepage, about us, social media channels, new content, and on-page search engine optimization (SEO) for three blog posts.\n<ul class=\"wp-block-list\">\n<li>First draft<\/li>\n\n\n\n<li>Internal review<\/li>\n\n\n\n<li>Second draft<\/li>\n\n\n\n<li>Internal review<\/li>\n\n\n\n<li>Editing and proofreading<\/li>\n\n\n\n<li>Client review<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Development: <\/strong>Transferring the design prototypes for all internal pages into the content management system (CMS) and developing the required functionality.\n<ul class=\"wp-block-list\">\n<li>Purchase a domain name<\/li>\n\n\n\n<li>Choose a <a href=\"https:\/\/www.markup.io\/blog\/how-to-use-webflow\/\" target=\"_blank\" rel=\"noreferrer noopener\">hosting service and CMS<\/a> (i.e., WordPress, Webflow, Squarespace, etc.) to meet the client\u2019s needs&nbsp;<\/li>\n\n\n\n<li>Structure the site architecture and create a sitemap<\/li>\n\n\n\n<li>Client review<\/li>\n\n\n\n<li>Build the website and make it responsive to all screen sizes<\/li>\n\n\n\n<li>Install plugins<\/li>\n\n\n\n<li>Add technical SEO elements<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>And so on\u2014you get the gist of it. Your tasks should go into as much detail as possible to ensure you\u2019ll avoid underestimating the time and effort it takes to complete each one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #4: Establish deadlines and identify necessary resources<\/h3>\n\n\n\n<p>With each step of the process clearly outlined, you can now set realistic and reasonable deadlines for all the tasks and subtasks.<\/p>\n\n\n\n<p>If you\u2019re a frequent visitor to our blog, you already know about the planning fallacy and how it\u2019s among <a href=\"https:\/\/www.markup.io\/blog\/why-do-projects-fail\/\" target=\"_blank\" rel=\"noreferrer noopener\">the main reasons why projects fail<\/a>.&nbsp;<\/p>\n\n\n\n<p>For those visiting our blog for the first time, you should know that people tend to underestimate the time it takes to complete a task\u2014that\u2019s what the planning fallacy is.<\/p>\n\n\n\n<p>So, keep this in mind when setting deadlines and <em>overestimate<\/em> the time necessary for each task to be executed.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #5: Assign tasks to team members<\/h3>\n\n\n\n<p>After you estimate the hours your team needs to work on the new website creation, find the most efficient way to balance the client\u2019s budget, project timeframe, deadlines, and your team\u2019s available resources.<\/p>\n\n\n\n<p>For example, if the only constraint is time and the budget is generous enough, you can assign three devs instead of one to finish the development phase faster.&nbsp;<\/p>\n\n\n\n<p>If budget is a constraint but time is not, you will have to employ fewer resources and team members to finish the project.<\/p>\n\n\n\n<p>In addition to these limitations, you must account for your team\u2019s availability when assigning tasks.&nbsp;<\/p>\n\n\n\n<p>Head over to your team\u2019s time-off calendar and see who\u2019s having martinis and riding horses into the sunset on an exotic beach and who\u2019s reporting for duty for the project&#8217;s duration.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2023\/01\/website-timeline-spring-break.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/fsnNbATnG7YT2lSfQV\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Plus, keep in mind each employee\u2019s preferences and expertise, as people tend to be more productive when they like what they\u2019re doing.&nbsp;<\/p>\n\n\n\n<p>Needless to say, being an expert on certain topics cuts research time on those topics significantly, leading to faster delivery.<\/p>\n\n\n\n<p>If you consider all these variables when assigning tasks, you will most likely get it right.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #6: Put everything together in chronological order<\/h3>\n\n\n\n<p>Finally, all the hard work is done. Now all you have to do is find the most time-efficient order for the project\u2019s tasks.<\/p>\n\n\n\n<p>An easy way to do this is to identify independent processes that can be worked on simultaneously.&nbsp;<\/p>\n\n\n\n<p>For example, content writers can write blog posts while designers create wireframes.<br>Try to plan your schedule so you can overlap as many independent tasks as possible to save time and have a little wiggle room if unexpected situations arise, like sick leave.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step #7: Share the website timeline with the team and stakeholders<\/h3>\n\n\n\n<p>How exciting! Now the web project is sketched out, and your timeline design is ready to be shared with the team.<\/p>\n\n\n\n<p>To make this experience interactive, you can draft your website timeline with collaborative tools like Google Sheets (we\u2019ll show you how in a second).&nbsp;<\/p>\n\n\n\n<p>Alternatively, you can use any timeline maker you want, capture a screenshot of your document, and add it to an online feedback tool like <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io.<\/a><\/p>\n\n\n\n<p>With an <a href=\"https:\/\/www.markup.io\/blog\/annotation-tools\/\" target=\"_blank\" rel=\"noreferrer noopener\">annotation platform like MarkUp.io<\/a>, you can <a href=\"https:\/\/support.markup.io\/hc\/en-us\/articles\/4413415243283-Using-MarkUp-Workspaces\" target=\"_blank\" rel=\"noreferrer noopener\">drag and drop your timeline design onto your Workspace<\/a> and share it with the team and stakeholders via link or email.<\/p>\n\n\n\n<p>Reviewers can then click anywhere on your MarkUp and leave comments with their input and ask questions.<\/p>\n\n\n\n<p>In case you don\u2019t have access to a specialized tool for website timeline creation, we have good news for you!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"template\">Download our free website timeline template<\/h2>\n\n\n\n<p>We thought it irresponsible of us to send you out into the world of project planning without an interactive timeline template up your sleeve.<\/p>\n\n\n\n<p>So, we designed a website timeline template in Google Sheets that you can copy, edit, and make your own.<\/p>\n\n\n\n<p>Have a look:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/website-timeline-template-1024x681.png\" alt=\"MarkUp.io's website timeline template\" class=\"wp-image-200456\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-template-1024x681.png 1024w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-template-300x200.png 300w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-template-768x511.png 768w, https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-template.png 1169w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>It has a field for each essential element discussed in the previous section. You can add infinite rows to break down your tasks into as many subtasks as necessary.<\/p>\n\n\n\n<p>You can easily share it with stakeholders and team members via a link.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1osgZcylgVMS8-NS3VhxzaZV78r9kXD05kZUUsjJXtiA\/copy?utm_source=markup&amp;utm_medium=markup-blog&amp;utm_campaign=website-timeline-template&amp;utm_content=website-timeline\" target=\"_blank\" rel=\"noreferrer noopener\">Click here to download our free website timeline template!<\/a><\/p>\n\n\n\n<p>Oh, wait!&nbsp;<\/p>\n\n\n\n<p>We forgot something\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Now over to you<\/h2>\n\n\n\n<p>Before you jump straight to planning your next website project with your brand new shiny timeline template, give MarkUp.io a try.<\/p>\n\n\n\n<p>Our platform helps you get feedback on different design elements throughout the website timeline process, i.e., getting feedback on graphics, website mockups, etc.<\/p>\n\n\n\n<p>It enables you to minimize misunderstandings and effortlessly get every stakeholder on the same page through contextual feedback.<\/p>\n\n\n\n<p>If that sounds like something you\u2019d like, sign up for a <a href=\"https:\/\/app.markup.io\/signup?trial=true\" target=\"_blank\" rel=\"noreferrer noopener\">30-day free trial with MarkUp.io<\/a> and make the design review and approval process something your team looks forward to.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You\u2019ve just signed a big website-development project with a huge budget. The only issue is time: the client wants the website done yesterday. After delegating some vague tasks on Asana \u2013 after all, you tell yourself, there isn\u2019t enough time to properly plan \u2013 your team does the best they can with the limited info &hellip; <a href=\"https:\/\/www.markup.io\/blog\/website-timeline\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":200420,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-200422","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What&#039;s a website timeline? How to build one (w\/ free template) - Markup.io<\/title>\n<meta name=\"description\" content=\"Developing your own website can be quite messy if you don&#039;t have a well-structured website creation timeline in place. Learn the steps and get a free template.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markup.io\/blog\/website-timeline\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What&#039;s a website timeline? How to build one (w\/ free template) - Markup.io\" \/>\n<meta property=\"og:description\" content=\"Developing your own website can be quite messy if you don&#039;t have a well-structured website creation timeline in place. Learn the steps and get a free template.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/website-timeline\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-03T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-06T11:05:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-timeline\/\",\"url\":\"https:\/\/www.markup.io\/blog\/website-timeline\/\",\"name\":\"What's a website timeline? How to build one (w\/ free template) - Markup.io\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-timeline\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-timeline\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp\",\"datePublished\":\"2023-01-03T12:00:00+00:00\",\"dateModified\":\"2024-02-06T11:05:46+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"Developing your own website can be quite messy if you don't have a well-structured website creation timeline in place. Learn the steps and get a free template.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/website-timeline\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/website-timeline\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-timeline\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp\",\"width\":1024,\"height\":576},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/website-timeline\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What&#8217;s a website timeline? How to build one (w\/ free template)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What's a website timeline? How to build one (w\/ free template) - Markup.io","description":"Developing your own website can be quite messy if you don't have a well-structured website creation timeline in place. Learn the steps and get a free template.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markup.io\/blog\/website-timeline\/","og_locale":"en_GB","og_type":"article","og_title":"What's a website timeline? How to build one (w\/ free template) - Markup.io","og_description":"Developing your own website can be quite messy if you don't have a well-structured website creation timeline in place. Learn the steps and get a free template.","og_url":"https:\/\/www.markup.io\/blog\/website-timeline\/","og_site_name":"Markup.io","article_published_time":"2023-01-03T12:00:00+00:00","article_modified_time":"2024-02-06T11:05:46+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/assets.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp","type":"image\/webp"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/website-timeline\/","url":"https:\/\/www.markup.io\/blog\/website-timeline\/","name":"What's a website timeline? How to build one (w\/ free template) - Markup.io","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/website-timeline\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/website-timeline\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp","datePublished":"2023-01-03T12:00:00+00:00","dateModified":"2024-02-06T11:05:46+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"Developing your own website can be quite messy if you don't have a well-structured website creation timeline in place. Learn the steps and get a free template.","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/website-timeline\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/website-timeline\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/website-timeline\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2022\/12\/website-timeline-hero-1024x576-1.webp","width":1024,"height":576},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/website-timeline\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"What&#8217;s a website timeline? How to build one (w\/ free template)"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/200422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=200422"}],"version-history":[{"count":7,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/200422\/revisions"}],"predecessor-version":[{"id":203021,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/200422\/revisions\/203021"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/200420"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=200422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=200422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=200422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}