Building a Construction-Based "McCance Group" Website with Basic HTML, CSS, JavaScript, React.js, Lambda, and Next.js

Creating a website for a construction company like "McCance Group" involves a combination of foundational web technologies and modern frameworks. This blog will guide you through building a responsive and dynamic site using HTML, CSS, JavaScript, React.js, Lambda, and Next.js. Each step will be explained in detail, ensuring a clear understanding of the concepts and implementation.

1. Setting Up the Foundation with HTML and CSS

HTML Structure

HTML (HyperText Markup Language) forms the backbone of your website. Here’s a basic structure for the homepage:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>McCance Group</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>McCance Group</h1>

<nav>

<ul>

<li><a href="#about">About Us</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<section id="about">

<h2>About Us</h2>

<p>McCance Group is a leading construction company known for delivering top-notch infrastructure projects.</p>

</section>

<section id="services">

<h2>Services</h2>

<ul>

<li>Residential Construction</li>

<li>Commercial Projects</li>

<li>Renovation Services</li>

</ul>

</section>

<section id="contact">

<h2>Contact Us</h2>

<form id="contact-form">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

<label for="message">Message:</label>

<textarea id="message" name="message" required></textarea>

<button type="submit">Submit</button>

</form>

</section>

</main>

<footer>

</footer>

</body>

</html>

CSS Styling

CSS (Cascading Style Sheets) adds styling to your HTML structure. Save the following code in a styles.css file:

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

line-height: 1.6;

background-color: #f4f4f4;

}

header {

background: #333;

color: #fff;

padding: 1rem;

text-align: center;

}

nav ul {

list-style: none;

padding: 0;

display: flex;

justify-content: center;

}

nav ul li {

margin: 0 1rem;

}

nav ul li a {

color: #fff;

text-decoration: none;

}

main {

padding: 2rem;

}

section {

margin-bottom: 2rem;

}

footer {

background: #333;

color: #fff;

text-align: center;

padding: 1rem 0;

}

2. Adding Interactivity with JavaScript

Basic interactivity can be introduced using vanilla JavaScript. For instance, validate the contact form before submission:

// script.js

const form = document.getElementById('contact-form');

form.addEventListener('submit', (event) => {

event.preventDefault();

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const message = document.getElementById('message').value;

if (!name || !email || !message) {

alert('All fields are required!');

return;

}

alert('Thank you for your message!');

form.reset();

});

Include this script in your HTML file:

<script src="script.js"></script>

3. Enhancing Functionality with React.js

React.js allows us to build reusable components. Set up a React project using:

npx create-react-app mccance-group

Replace the App.js file content with the following:

import React from 'react';

import './App.css';

.function App() {

return (

<div className="App">

<header>

<h1>McCance Group</h1>

<nav>

<ul>

<li><a href="#about">About Us</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<section id="about">

<h2>About Us</h2>

<p>McCance Group is a leading construction company known for delivering top-notch infrastructure projects.</p>

</section> <section id="services">

<h2>Services</h2>

<ul>

<li>Residential Construction</li>

<li>Commercial Projects</li>

<li>Renovation Services</li>

</ul>

</section>

<section id="contact">

<h2>Contact Us</h2>

<form>

<label>Name:</label>

<input type="text" placeholder="Your Name" />

<label>Email:</label>

<input type="email" placeholder="Your Email" />

<label>Message:</label>

<textarea placeholder="Your Message"></textarea>

<button type="submit">Submit</button>

</form>

</section>

</main>

<footer>

</footer>

</div>

);

}

export default App;

4. Serverless Backend with AWS Lambda

AWS Lambda allows you to run backend code without managing servers. Here's a simple example:

Create a Lambda Function

Write a function in index.js:

exports.handler = async (event) => {

const { name, email, message } = JSON.parse(event.body);

// Process the data

console.log(`Message from ${name} (${email}): ${message}`);

return {

statusCode: 200,

body: JSON.stringify({ message: 'Message received successfully!' }),

};

Deploy this function using the AWS Management Console or AWS CLI.

5. Leveraging Next.js for Server-Side Rendering

Next.js enhances your React app with server-side rendering (SSR) and static site generation (SSG).

Install Next.js

npx create-next-app@latest mccance-next

Create Pages

Inside the pages directory, create index.js:

export default function Home() {

return (

<div>

<header>

<h1>McCance Group</h1>

<nav>

<ul>

<li><a href="#about">About Us</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</header>

<main>

<section id="about">

<h2>About Us</h2>

<p>McCance Group delivers top-notch infrastructure projects.</p>

</section>

</main>

</div>

);

}

Deploying Next.js

Host your Next.js app on platforms like Vercel or Netlify for seamless deployment.

Conclusion

Building a professional website for a construction company like "McCance Group” This guide equips you with the skills to create a robust and scalable website for "McCance Group" using a mix of traditional and modern web technologies.