This tutorial will cover building a website that shortens URLs. I'd be working with a design and will approach it from structure first hence the first section of this will be the HTML pages, after which I will style and finally add the functionalities.
This tutorial will be divided into three parts;
Html (page structure),
CSS (page styling), and
JavaScript (functionalities).
The repository for this project is available here and this article will be updated as I work.
Pre-requisites: You are expected to know the fundamentals of html5 and css3 as well as API calls using JavaScript. Most concepts won't be explained but the approach will be beginner-friendly and I will share the thought process.
Stage one: Designs and Project file structure: //insert images here
Create a folder for HTML pages named "pages" so far the project will have: -index.html -Login and Sign Up pages
p.s: other pages in the navigation won't be covered in this tutorial
Page Structure: There are two views and I will structure with a desktop view and query for mobile afterward
The page will have:
- Page header with navigation
- Main section: - intro, - link-shortener section and advanced statistics section
- Action section
- footer
Page header steps: The header has three sections which I will flex in the style sheet so those have to be in block-level elements.
The sections will be the logo container, page navigation bar, and user auth (login and register) buttons.
Use descriptive class names or ids. code snippet:
<!--Header-->
<header class="header-container">
<div class="logo-container">
<img src="../images/logo.svg" alt="logo" class="logo">
</div>
<nav>
<a href="#" class="nav-item">Features</a>
<a href="#" class="nav-item">Pricing</a>
<a href="#" class="nav-item">Resources</a>
</nav>
<div class="user-auth">
<div class="login">Login</div>
<div class="sign-up">Sign Up</div>
</div>
</header>
main Section The main page has three prominent sections
- Intro section containing text and an illustration. two containers(divs) wrap those and divide the sections on the left side into three; heading, paragraph, and action button.
code snippet:
<!--Main content-->
<main>
<section class="intro">
<div class="intro-content">
<h1>More than just shorter links</h1>
<p>Build your brand’s recognition and get detailed insights
on how your links are performing.
</p>
<button>
Get Started
</button>
</div>
<div class="intro-image">
<img src="../images//illustration-working.svg" alt="illustration-working-svg">
</div>
</section>
- Link Shortener section
code snippet:
<div class="grey-bg"
<section class="shorten">
<div class="wrap">
<div class="shorten-input-wrap">
<div class="input-field">
<input type="text" name="link" placeholder="Shorten a link here">
</div>
<button type="submit">
Shorten it!
</button>
</div>
<div class="text">
Please add a link
</div>
</div>
<div class="shortest-output">
<div class="text">some dummy dtest</div>
<div class="link">akndkjd abjdb</div>
<button class="copy">
Copy
</button>
</div>
<div class="shorter-output">
<div class="text">some dummy dtest</div>
<div class="link">akndkjd abjdb</div>
<button class="copy">
Copy
</button>
</div>
<div class="short-output">
<div class="text">some dummy dtest</div>
<div class="link">akndkjd abjdb</div>
<button class="copy">
Copy
</button>
</div>
</section>
- The section for statistics
code snippet:
<section class="stat">
<div class="stat-desc">
<h2>Advanced Statistics</h2>
<p>Track how your links are performing across the web with our
advanced statistics dashboard.
</p>
</div>
<div class="cards-wrap">
<div class="card">
<div class="icon">
<img src="../images/icon-brand-recognition.svg" alt="icon-chart">
</div>
<h3>Brand Recognition</h3>
<p>Boost your brand recognition with each click. Generic links don’t
mean a thing. Branded links help instil confidence in your content.
</p>
</div>
<div class="space">
<div class="line"></div>
</div>
<div class="card">
<div class="icon">
<img src="../images/icon-detailed-records.svg" alt="icon-flame">
</div>
<h3>Detailed Records</h3>
<p>Gain insights into who is clicking your links. Knowing when and where
people engage with your content helps inform better decisions.
.
</p>
</div>
<div class="space">
<div class="line"></div>
</div>
<div class="card">
<div class="icon">
<img src="../images/icon-fully-customizable.svg" alt="icon">
</div>
<h3>Fully Customizable</h3>
<p>Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.
</p>
</div>
</div>
</section>
</main>
Action section
code snippet:
<section class="action-button">
<div class="text">Boost your links today</div>
<button>Get Started</button>
</section>
Footer Section
code snippet:
<footer>
<div class="logo">
<img src="../images//logo.svg" alt="" class="log">
</div>
<div class="features">
<h5>Features</h5>
<nav>
<a href="#" class="footer-link">link Shortening</a>
<a href="#" class="footer-link">Branded Links</a>
<a href="#" class="footer-link">Analyze</a>
</nav>
</div>
<div class="features">
<h5>Resources</h5>
<nav>
<a href="#" class="footer-link">Blog</a>
<a href="#" class="footer-link">Developers</a>
<a href="#" class="footer-link">Support</a>
</nav>
</div>
<div class="features">
<h5>Company</h5>
<nav>
<a href="#" class="footer-link">About</a>
<a href="#" class="footer-link">Our Team</a>
<a href="#" class="footer-link">Careers</a>
<a href="#" class="footer-link">Contact</a>
</nav>
</div>
<div class="social-media">
<div class="fb"><img src="../images//icon-facebook.svg" alt="facebook-icon"></div>
<div class="twitter"><img src="../images//icon-twitter.svg" alt=""></div>
<div class="pinterest"><img src="../images/icon-pinterest.svg" alt=""></div>
<div class="instagram"><img src="../images/icon-instagram.svg" alt=""></div>
</div>
</footer>
Next is page styling css styles