This is the documentation repository for the One Day One Code journey, which tracks the progressive implementation and enhancement of coding skills through Code of The Day.
CSS Navigation styling
.nav-container {
background-image: linear-gradient(to bottom, #010409ff, #010409bf, #01040980, #01040900);
position: sticky;
top: 0;
z-index: 9;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
padding-block: 1rem;
margin-inline: auto;
}
.nav-container a {
line-height: 1rem;
text-decoration: none;
color: #c0c8ce;
font-weight: lighter;
transition: color 0.3s;
}
.nav-logo {
height: 32px;
}
.nav-logo .logo-nav {
margin: 0;
height: 100%;
width: auto;
object-fit: contain;
font-size: 1em;
font-weight: normal;
color: #F0F6FC;
line-height: 32px;
}
.nav-menu ul {
padding: 0;
display: flex;
justify-content: center;
gap: 2rem;
}
.nav-menu li {
list-style-type: none;
}
.nav-container li a:hover {
color: #F0F6FC;
font-weight: normal;
transition: color 0.3s ease-in-out;
}
.nav-container li a.active {
color: #F0F6FC;
font-weight: normal;
transition: color 0.3s ease-in-out;
}
.nav-container li a.active::after {
content: "";
display: block;
width: 1em;
height: 0.1em;
background-color: #F0F6FC;
margin: 0 auto;
}
Extra:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"><h1>One Day One Code</h1>
to <a href="#"><h1 class="logo-nav">one-day-one-code/</h1></a>font-family: 'Monserrat', sans-serif;
to font-family: "DM Mono", monospace;color: #F0F6FC;
to color: #9198A1;“Kickstart your Code of The Day with One Day One Code to progressively implement and enhance your coding skills.” - Rizsan Zainal M
#onedayonecode #codeoftheday
CSS Initialization
<link rel="stylesheet" type="text/css" href="styles/style.css">
Links external CSS file “style.css” for page styling.<link rel="preconnect" href="https://fonts.googleapis.com">
Establishes early connection to Google Fonts server for faster font loading.<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Preconnects to Google Fonts static content server, enabling cross-origin requests.<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
Imports Montserrat font family from Google Fonts with specified weights and styles.*, *::before, *::after { box-sizing: border-box; }
Sets all elements to use border-box model, including pseudo-elements, for consistent sizing.body { ... }
Applies base styles to the body element.
font-family: 'Monserrat', sans-serif;
Sets the default font to Montserrat, with sans-serif fallback.margin: 0; padding: 0;
Resets default margin and padding for consistent layout.background-color: #0D1117;
Sets the background color to a dark shade.color: #F0F6FC;
Sets the default text color to a light shade.display: flex; flex-direction: column;
Uses flexbox to arrange body content in a column.HTML Navigation on Header
<header class="nav-container">
Defines the header section with a navigation container class.<div class="nav-logo">
Defines the div section with a navigation logo container class.<h1>One Day One Code</h1>
The main heading, displaying the site’s title prominently.<nav class="nav-menu">
A navigation menu container, used for grouping navigation links.<ul>
An unordered list, the common structure for navigation menus.<li>
A list item, representing a single navigation link.<a href="#">
An anchor tag, creating a clickable link, with “#” as a placeholder URL.HTML Metadata
<meta charset="utf-8">
Character Encoding Declaration: Specifies UTF-8 character encoding, ensuring proper display of various characters.<meta name="description" content="Code of The Day - 2025-01-02 | One Day One Code">
Page Description Metadata: Provides a brief description of the page content, used by search engines for snippets.<meta name="keywords" content="code of the day, one day one code">
Keyword Metadata: Lists keywords related to the page content, aiding in search engine indexing.<meta name="author" content="Rizsan Zainal M">
Author Metadata: Identifies the author of the page, useful for documentation and attribution.<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport Configuration: Sets the viewport for responsive design, ensuring proper rendering on various devices.HTML First
<!DOCTYPE html>
Document type declaration, essential for browser rendering.<html>
Root element, encloses all other elements.<head>
Contains document metadata, not displayed on the page.<title>
Defines the page title, shown in the browser title or tab.<body>
Main content container, visible page elements inside here.<h1>
Primary heading, shows the main title of the page.<p>
Paragraph element, used for standard text content.© 2025 Rizsan Zainal M