Requirements
This will be our list of requirements we want to include in our custom framework,
- A link to one or more social media accounts.
- Your name, description and a photo.
That’s all we will need for our simple portfolio. We don’t need to pick a third-party framework to use for this project, it will all be custom.
The Essential Foundation: HTML
Let’s start with the bedrock of web development – HTML (Hypertext Markup Language). HTML is your go-to language for structuring and presenting content on the web. It’s the must-have ingredient for any webpage.
Building a Portfolio Project
To illustrate the power of HTML, let’s build a simple portfolio for a developer.
I will provide the design so we can focus on the code, This is how the portfolio will look like.
The portfolio folder
On your desktop, create a folder and name it portfolio.
Download a code editor
For the same reason you need an app like Microsoft Word to write word documents, you will need an app to write HTML, CSS & Javascript code; such apps are called ‘Code Editors’, and instead of ‘typing’, we call it coding.
Visual Studio Code (VS Code) is a popular choice. If you don’t have it yet, download it here then install then open the app.
Open the ‘portfolio’ folder in Visual Studio code
With VS Code open, on the menu bar go to File -> Open Folder... then locate the portfolio folder on your desktop that we created earlier.
Create an HTML file
Create a file and name it index.html.
Since this is not a series on HTML syntax, I will providing the code. In another series I will show you how to structure HTML markup and the things to consider.
Copy this code to the index file, then save the file.
HTML markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
</head>
<body>
<div>
<div>
<span>JD</span>
<nav>
<a href="/">Home</a>
<a href="portfolio">Portfolio</a>
</nav>
</div>
</div>
<div>
<div>
<div>
<span> Hello, I am John... </span>
<h1>A front-end<br />developer</h1>
<div></div>
<p>Contact me on</p>
<!-- Add button -->
</div>
<div>
<div>
<img
src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80"
/>
</div>
</div>
</div>
</div>
</body>
</html>
Expand code +Preview the Portfolio HTML file in the browser.
Right-click the index.html file on the sidebar in VS Code and select ‘Reveal in File Explorer’ to open the folder in the File Explorer or open the portfolio folder on your desktop.
Then, in the file explorer, double-click the index.html file or right-click and select ‘open’ to open it in the browser. The file should open in your default browser.
Previewing HTML
To preview HTML, you will need a browser, which means that so far we need two applications, a code editor and a browser. A code editor to write the code and a browser to preview the HTML file.
Our portfolio is not the prettiest, but it displays all the markup information we need displayed in our portfolio.
Technically you only need HTML to display simple content on the internet, CSS & Javascript are addons, extremely useful addons.
easycutecode
Styling the portfolio to make it pretty
Inline styles are one way of styling a website without the need for an external CSS file.
If you want to brush up on the differences between Inline, External and inline styles, read this article.
As we move along, you will learn and experience the pros and cons of all the three methods of writing styles.
Adding inline styles
In the same index.html file, delete the content and paste the code bellow, the code uses the same HTML structure as above but with inline styles.
HTML code with inline styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="margin: 0; font-size: 1rem; line-height: 1.5; font-family: sans-serif;">
<div style="width: 100%; border-bottom: 1px solid #e2e8f0; position: fixed;top: 0;">
<div style="max-width: 75rem;height: 4rem;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;">
<span style="font-weight: 700">JD</span>
<nav style="display: flex;gap: 1rem;align-items: center;font-weight: 700;text-transform: uppercase;font-size: 0.75rem;">
<a href="/" style="text-decoration: none; color: inherit">Home</a>
<a href="portfolio" style="text-decoration: none; color: inherit">Portfolio</a>
</nav>
</div>
</div>
<div style="width: 100%; height: 100vh">
<div style="max-width: 75rem; margin: 0 auto; height: 100%; display: flex">
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 75%;">
<span style="color: #a0aec0; font-size: 1.5rem; font-weight: 700; margin: 0;">
Hello, I am John...
</span>
<h1 style="font-size: 7rem; font-weight: 700; line-height: 1.1; margin: 0;">
A front-end<br />developer
</h1>
<div style="display: block; width: 6rem; height: 1px; background-color: #cbd5e0; margin: 2rem 0;"></div>
<p style="font-size: 0.875rem; font-weight: 500; text-transform: uppercase; margin: 0;">
Contact me on
</p>
<!-- Add button -->
</div>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 25%;">
<div style="height: 50%">
<img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="dog" style="object-fit: cover; height: 100%; width: 100%"/>
</div>
</div>
</div>
</div>
</body>
</html>
Expand code +Then preview the file in the browser (same steps as above). Beautiful right, all without the need for a CSS or Javascript file.
At the very least you only need an HTML file to create a website, without the need for external CSS styles or Javascript
easy cute code
At this point, if we decide that our portfolio is ‘complete’ and will serve it’s intended purpose, then we will have created our first framework with a single tech-stack (HTML). Let’s call it ‘simple portfolio framework’.
Notice the difference between a tech stack and a framework. A tech stack is just a selection of technologies and tools (HTML, CSS, Javascript, etc.), a tech stack is like selecting various fruits at the market (Banana, Mango, pineapple, etc.).
A framework includes the tech stack and how to use and combine the chosen tech to build an app. A framework is like a recipe, the fruit ingredients plus the process e.g. for a fruit pudding or a fruit smoothie.
So we can describe our simple portfolio framework as ‘A framework for creating a simple portfolio that uses HTML as a tech stack and inline styles, this framework displays your name, what you do, an image and a link to your proffered social media’.
Is this a multipurpose framework?
This is an oversimplified framework and is not a multipurpose framework it only works for a portfolio website, all popular frameworks are multipurpose and work for a variety of use cases whether it is a marketing website, a documentation website, a blog and many more.
It is common for developers to pick a multipurpose framework and extend (add more stuff to) it for a single use case like a portfolio. More on this later.
A framework is more than a tech-stack, it includes how things are done and how to combine the tech stack.
easy cute code
Summary.
So far the key lessons are;
- What a tech stack and a framework is.
- Introduced two applications to use during development (A code editor and a browser).
- Using inline styles in HTML.
In the next episode, we learn about improving our process and our framework. Happy coding!
Estimated Reading Time: 9 minutes