Website Creation Procedure
Sat Aug 10, 2024
Since CSS and HTML can be written freely, there aren’t strict rules for how to approach them. So, I’ve compiled how I personally do it.
Design Creation Process
Create a Mockup of the Overall Design
Without a mockup, work can’t proceed smoothly. It’s helpful to have mockups that include page transitions. Personally, I find it difficult to manage more than 10 pages for a solo project.
List Out the Components
Write out the necessary components. At this stage, you don’t need to decide on specific class names. It’s OK to just roughly write them in your native language.
Article collection
- Article box
- Title
- Article description
- Upload date
- Article photo
Create Markup Based on HTML Elements
It’s better to use markup that aligns with HTML5 standards. Using too many divs can be troublesome later.
It’s better to use semantic elements like header, main, footer, section, article, aside, nav, etc. if they exist.
<section class="articles">
<a href="#" class="article-box">
<h3 class="title">Article Title</h3>
<p class="desc">Article description, article description, article description, article description</p>
<time class="date" datetime="2019-01-01">2019.01.01</time>
<img class="image" src="./images/article.jpg" alt="Article capture image">
</a>
</div>
</section>
Determine Layout Placement
- Use Grid Layout for the overall page layout
- Use Flexbox for horizontal layouts
- Use Grid Layout for grid-like layouts
- Use Float for text wrapping
Create CSS Base
This is generally good as a CSS base:
@charset "UTF-8";
/* --------------------------------
* base
* -------------------------------- */
html {
font-size: 62.5%;
}
*, *::before, *::after {
box-sizing: border-box;
}
Next, set up the general body configuration:
@charset "UTF-8";
/* --------------------------------
* base
* -------------------------------- */
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
font-family: Raleway, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
Create HTML Base
Something like this is generally fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML Base</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
</header>
<main class="main">
</main>
<footer class="footer">
</footer>
</body>
</html>
Useful Techniques
Create Comments for Each CSS Component
Creating comments in advance makes the work easier:
#ccs
/* --------------------------------
* parts
* -------------------------------- */
<!-- contents of parts -->
/* --------------------------------
* header
* -------------------------------- */
<!-- contents of header -->
Use the outline Property to Check Layout
The border property creates a border with thickness, which can make the entire block larger by the width of the border, possibly breaking the layout.
The outline property is convenient because it doesn’t affect the box model calculations, so there’s no worry about layout breaking.
div {
outline: 2px solid #f00;
}
How to Name CSS Classes
Using semantic naming rather than visual naming makes it more robust for future changes.
If you name a button color class as button-orange, when you later need to modify it, you’ll need to change:
- Class name in CSS class definition
- Color code in CSS
- Class specification in HTML
But if you use a semantic class name like button-showy, you only need to change:
- Color code in CSS
