DEV Community: Sanghun Han

[School Landing Page – Part 2, Section 2] Folder Structure & Sass Setup

Sanghun Han — Fri, 04 Jul 2025 23:31:11 +0000

[School Landing Page – Part 2, Section 2] Folder Structure & Sass Setup

📸 School Landing Page Project – Section 2: Folder Structure & Sass Setup

In this section, we’re going to dive into how I set up the Sass files and the project folder structure. Having a well-organized folder structure is super important if you want your project to be maintainable and scalable down the road. We’ll also go over some handy libraries and tools that make coding easier and how they help keep things smooth during development.

✨ What is Sass Architecture?

Sass is all about making styling more efficient, and one way to do that is by organizing your styles in a clean, structured way. This is where Sass architecture comes in, which helps to break your code into smaller, manageable pieces. The goal here is to make your project easy to maintain and expand as it grows.

📦 The 7-1 Architecture

The 7-1 architecture is a popular way of structuring your Sass files. It’s called "7-1" because there are seven main folders and one main file to rule them all. Here's a quick rundown of the folders:

abstracts: Variables, mixins, and functions go here
base: This is where you’ll put your base styles, like resets or typography
components: All your reusable UI components like buttons, cards, etc.
layout: Styles that define the layout of the page (header, footer, navigation, etc.)
pages: Styles for specific pages (if you have a multi-page site)
themes: Custom themes for the project
vendors: Styles for third-party libraries or plugins

This architecture helps you keep things tidy and makes it easy to reuse and update styles across your project.

📦 How I Tweaked the Sass Architecture

I decided to use the 7-1 architecture, but with a few tweaks to suit my project. Here’s what I changed:

No pages folder

Since this is a single-page project, I didn’t need a pages folder. It’s useful for multi-page sites, but in my case, it wasn’t necessary.
No themes or vendors folders

I didn’t use any external libraries or themes, so I left these out.
Renamed layout to sections

I swapped layout for sections to better reflect how I’m organizing the project. Each section of the page gets its own folder, making it easy to manage styles for different parts of the page.

🗂️ Project Folder Structure

Here’s a quick overview of my project folder structure:

abstracts: Variables, mixins, and functions
base: Base styles (e.g., resets, typography)
components: UI components (buttons, cards, etc.)
sections: Individual page sections

This structure helps keep the code organized, readable, and easy to scale as the project grows.

🚀 Handy Libraries and Tools

Now that we’ve covered the folder structure, let’s talk about the tools and libraries that make our lives easier while coding. These tools help automate tasks, so we can focus more on building and less on managing.

🖥️ Running a Live Server

While building the project, it’s essential to see changes in real-time. That’s why I’m using live-server — it automatically refreshes the page whenever a file changes, so you don’t have to keep manually reloading the browser.

📦 How to Install `live-server`

First, let’s get live-server installed. It’s super easy:

npm install live-server --save-dev

📦 Why `npm-run-all` Is a Must

We’re using npm-run-all to run multiple commands at once. It lets us run both the Sass compiler and the live server at the same time, which is super convenient. It saves us the hassle of running each command separately.

🔧 How to Install `npm-run-all`

Run the following command to install npm-run-all:

npm install npm-run-all --save-dev

Then, update your package.json scripts section like this:

"scripts": {
  "watch:sass": "sass sass/main.scss css/style.css -w",
  "devserver": "live-server",
  "start": "npm-run-all --parallel devserver watch:sass"
}

This way, when you run npm start, both the live server and Sass will start at the same time!

🔜 Next up...

With Part 2 done, we’re ready to move into Part 3, where we’ll start writing some real code! This next section will focus on building the HTML layout and organizing it with semantic tags. Stay tuned for more on how we’ll structure the page and style it using Sass!

Thanks for reading! 😊

[School Landing Page – Part 2, Section 1] Sass Setup

Sanghun Han — Fri, 04 Jul 2025 06:32:43 +0000

🥓 School Landing Page Project – Section 1: Sass Setup

💡 What is Sass?

Sass (Syntactically Awesome Stylesheets) is an extension of CSS that helps you write styles more efficiently and in a more structured way.

Simply put, it’s a tool that makes CSS easier to maintain and more readable by reducing repetition and adding powerful features.

Sass has two syntaxes, and for this project, I’ll be using SCSS syntax, which is almost identical to regular CSS.

(It keeps the curly braces and semicolons, making it very familiar.)

❓ Why use Sass?

While this project can technically be built with plain HTML and CSS, I’ve chosen to use Sass for the following reasons:

1. ✅ Reuse styles with variables

By defining values like colors, font sizes, and spacing using Sass variables, I can easily manage and update styles throughout the project.

$main-color: #03A6A1;
$accent-color: #F9A825;
$font-base: 'Inter', sans-serif;

2. 🧩 Write cleaner code with nesting

Since HTML is naturally nested, using Sass nesting makes it easier to write styles that reflect the structure of the page.

This is especially helpful when working with components.

.navbar {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    text-decoration: none;
    color: $main-color;
  }
}

3. 📱 Responsive design with mixins

As this landing page is targeting mobile users, responsive design is crucial.

Instead of writing repetitive media queries, I’ll use @mixin to create reusable, clean breakpoints.

@mixin respond($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) {
      @content;
    }
  }
}

// Example usage
.container {
  width: 100%;
  padding: 2rem;

  @include respond(mobile) {
    padding: 1rem;
  }
}

Using these features will help me write CSS in a more organized and scalable way —

that’s why I decided to use Sass for this project.

🗂️ Creating the Project Folder & Initializing npm

Now that we’ve decided to use Sass, let’s start by creating the project folder and initializing it with npm.

1. 📁 Create the Project Folder

Open your terminal and run the following commands to create and navigate into your project folder:

mkdir css_school-landing_project
cd css_school-landing_project

2. 📦 Initialize the Project with npm

We’ll use npm to manage packages like Sass. First, let’s initialize the project with a package.json file using the command:

npm init -y

The -y flag accepts all default values, quickly generating a basic package.json file.

📸 Before npm init	📦 After npm init

This comparison shows how running npm init -y creates the package.json file needed to manage your project’s dependencies.

In the next step, we’ll install Sass as a development dependency and begin setting up the folder and file structure.

3. 📥 Installing Sass with npm

Now that the project is initialized, let's install Sass.

We'll use the officially recommended Dart Sass (node-sass is deprecated and no longer recommended).

Open your terminal and run:

npm install sass --save-dev

✅ Why use the `--save-dev` flag?

Sass is a development tool — it’s only needed while building the project, not during production.

That’s why we install it as a development dependency using --save-dev.

After running the command, it will be listed in your package.json like this:

"devDependencies": {
  "sass": "^1.89.2"
}

📦 Files and folders created

After installing Sass, you’ll notice these new items:

node_modules/ – contains Sass and its dependencies
package-lock.json – tracks exact versions of all installed packages
package.json – now includes "sass" under devDependencies

📌 Note

The node_modules/ folder is large and can always be regenerated, so you should never upload it to GitHub.

If you're working on a different computer, simply run:

npm install

This will install all dependencies based on your package.json.

🔜 Next: Folder Structure & Sass File Setup

Now that Sass is installed, it’s time to organize the project structure and set up the base Sass files.

In the next step, we’ll:

Create src/ and dist/ folders
Add a scss/ folder with Sass partials (_variables.scss, main.scss, etc.)
Write npm scripts to automatically compile Sass into CSS

👉 Let’s get started with folder setup!

[School Landing Page – Part 1, Section 4] Layout Planning & Low-Fidelity Sketch

Sanghun Han — Wed, 02 Jul 2025 09:08:18 +0000

🧩 School Landing Page Project – Section 4: Layout Planning & Low-Fidelity Sketch

With all the content and design personality defined, it’s now time to structure the layout.

This step bridges planning with design — outlining how each section fits together and visualizing the full page flow.

🧱 Full Layout Structure

I decided to organize this landing page as a single-page scroll layout, with clear visual hierarchy from top to bottom.

The layout will include the following sections:

Navigation Header – with logo and search/icon buttons + nav menu
Hero Section – fullscreen video background + key text + CTA
About Us – city background image + intro card with expand button
School Features – 2x2 grid of feature cards
Curriculum – 1x4 horizontal cards for each course type
Campus Life – Z-pattern layout with alternating images/text
Admissions – CTA text with a form in card layout
Events Gallery – 1 large event + 4 smaller ones (1+4 grid)
Footer – navigation links, contact info, copyright

Each section has a distinct layout style, but together they form a cohesive scroll experience.

✍️ Low-Fidelity Sketch

To better visualize the structure, I created a low-fidelity wireframe of the full layout.

Rather than jumping straight into code, this sketch helps confirm the flow, spacing, and component balance.

📷 Here’s a preview of my layout sketch:

🛠️ Note for Future Projects

For this project, I kept the design phase light — using only a low-fidelity wireframe before moving into development.

However, in future projects I plan to include medium-fidelity designs and a complete visual stylesheet,

to create a more polished and professional design system from the start.

🔜 Next up…

Before jumping into the actual markup process with semantic HTML, I’ll first set up Sass in the project using npm. This includes creating the folder structure, initializing the project with package.json, and installing node-sass as a development dependency.

Once that’s ready, I’ll begin building the layout structure and styling foundation using HTML and Sass.

Exciting part ahead — bringing the layout to life with real code!

Thanks for reading! 😊

[School Landing Page – Part 1, Section 3] Collecting Content (Images / Videos / Text)

Sanghun Han — Wed, 02 Jul 2025 08:27:50 +0000

📸 School Landing Page Project – Section 3: Collecting Content (Images / Videos / Text)

To design and build a realistic landing page, collecting actual content is essential.

Rather than working with placeholders, this step focuses on bringing the layout to life with meaningful visuals and copy.

In this section, I’ll walk through how I gathered images, videos, and text content for each part of the page.

🖼️ Images & 🎞️ Video Assets

Visual content plays a major role — especially for a landing page aimed at international students.

Since many users engage more with visuals than long blocks of text, I focused on the following:

✅ Sourced high-quality images and royalty-free videos from platforms like Unsplash and Pexels

✅ Selected appropriate content for each section (Hero, About Us, Campus Life, etc.)

✅ Ensured all materials are usable within license and attribution guidelines

For example, I used a video clip to bring the Hero section to life, showing the campus atmosphere,

and a wide city shot as the background for the About Us section to reflect the school’s location.

📝 Writing Text Content

All text was written with the help of AI, tailored for a clear and friendly tone across the site.

My focus was to ensure:

✏️ Easy-to-understand language for international users
✨ Short and engaging introductions for each section
✅ Clear messaging aligned with each section’s purpose

I’ve prepared titles, short descriptions, and CTA text for each section — including Hero, About Us, Curriculum, and Campus Life.

🔜 Next up…

Next, I’ll move into low-fidelity layout planning — sketching out the page structure and components before diving into code.

A few rough sketches should be enough to shape the visual flow, and then I’ll begin actual markup and layout building.

Thanks for reading! 😊

[School Landing Page – Part 1, Section 2] Define Site Personality: Color, Font, and Mood

Sanghun Han — Tue, 01 Jul 2025 06:51:11 +0000

🎨 School Landing Page Project – Section 2: Define Site Personality

Before designing any layout, it's crucial to define the personality of the site —

how it should feel, what message it should convey, and how users should perceive it at a glance.

This step lays the foundation for visual and UX consistency throughout the site.

🧠 Personality Direction

After considering the project’s goal and target users, I chose this personality:

Bold / Confident + Calm / Peaceful

This combination reflects a site that feels trustworthy, clear, and professional — while still welcoming and calming for international users.

🎨 Color System

To express that tone visually, I selected the following color palette:

Role	HEX Code	Usage
Main	`#03A6A1`	Primary buttons, highlights, main components
Accent	`#F9A825`	Supporting highlights, icons, and tag emphasis
Grey	`#4E4E4E`	Base text color for high readability
Background	`#FFFFFF`	Default page background

🌗 Tints & Shades

To enable flexibility (e.g., hover states, backgrounds, soft dividers), I created tints and shades from the base colors.

Main (`#03A6A1`)

Light: #68CAC7, #B3E4E3
Dark: #027471, #014240

Accent (`#F9A825`)

Light: #FBCB7C, #FDE5BE
Dark: #AE761A, #7D5413

Greys

Main grey: #4E4E4E
Light grey: #606060
Background: #FFFFFF

Here’s the color system in CSS variables for implementation:

/* Main */
--color-main: #03A6A1;
--color-main-light1: #68CAC7;
--color-main-light2: #B3E4E3;
--color-main-dark1: #027471;
--color-main-dark2: #014240;

/* Accent */
--color-accent: #F9A825;
--color-accent-light1: #FBCB7C;
--color-accent-light2: #FDE5BE;
--color-accent-dark1: #AE761A;
--color-accent-dark2: #7D5413;

/* Grey & Background */
--color-grey-main: #4E4E4E;
--color-grey-light: #606060;
--color-background: #FFFFFF;

✍️ Typography

For clarity and consistency, I chose a single sans-serif font family:

Font: Inter

Why Inter?

✅ Clean and neutral appearance
✅ Friendly yet professional
✅ Readable in both headings and long paragraphs
✅ Supports multiple weights for better hierarchy (e.g., 300–700)

📌 Summary

By clearly defining the site’s tone, color palette, and typography,

I’ve established a strong design foundation for the landing page.

This will guide every future decision — from layout to imagery to content —

and ensure a consistent, trustworthy identity:

“Bold yet Calm.”

🔜 Next up…

In the next section, I’ll keep doing the project plan contents collection such as image, video and icons.

Thanks again for reading! 😊

[School Landing Page - Part 1, Section 1] Project Planning: Purpose and Target Users

Sanghun Han — Tue, 01 Jul 2025 03:23:32 +0000

🏫 School Landing Page Project – Section 1: Define the Project

This is my very first portfolio project to demonstrate my skills with HTML/CSS (and Sass).

Rather than just building a static page, I'm approaching this project as if it's for a real-world audience and purpose.

🎯 Project Overview

Goal:

To design and build a fully responsive school landing page using only HTML and CSS/Sass, with clear structure and user-focused design.
Key Points:
- Responsive layout (mobile-friendly)
- Semantic HTML structure
- Maintainable CSS with Sass
- User-centric design decisions

👥 Target Audience

The target users for this project are people aged late teens to 20s/30s, especially international students and parents looking for undergraduate programs in Australia.

These users may:

Be currently preparing for or already studying abroad
Prefer visual content (images, videos) over text-heavy layouts due to limited English
Browse mostly on mobile devices

🎨 Design & UX Strategy

Based on that target, I planned the following UI/UX directions:

Prioritize visual elements over text (photos, intro videos, icons)
Keep navigation simple and intuitive
Build with responsive design from the start (mobile-first approach)

One of my inspirations is the

Brisbane City page on Queensland.com.

That site uses high-quality visuals, clear layout, and subtle interactivity to present the city beautifully.

👉 I aim to follow a similar approach — using images and video to create an engaging, informative landing page, especially helpful for international users who may not feel confident reading large blocks of text.

✏️ What’s next?

With the project goal and audience defined,

the next step will be collecting content, planning the sitemap, and organizing the page sections.

Thanks for reading! 😊

Introducing My Dev Blog: Learning HTML & CSS

Sanghun Han — Tue, 01 Jul 2025 02:44:55 +0000

👋 Hi, I'm Sanghun!

Welcome to my Dev Blog where I document my journey as a self-motivated learner in web development.

💻 What I'm doing now

I'm currently building responsive websites using HTML & CSS. I just launched my first project: a school landing page!

🎯 Goal

Share what I learn, build cool projects, and improve step by step.

Stay tuned for more!

DEV Community: Sanghun Han

[School Landing Page – Part 2, Section 2] Folder Structure & Sass Setup

[School Landing Page – Part 2, Section 2] Folder Structure & Sass Setup

📸 School Landing Page Project – Section 2: Folder Structure & Sass Setup

✨ What is Sass Architecture?

📦 The 7-1 Architecture

📦 How I Tweaked the Sass Architecture

🗂️ Project Folder Structure

🚀 Handy Libraries and Tools

🖥️ Running a Live Server

📦 How to Install live-server

📦 Why npm-run-all Is a Must

🔧 How to Install npm-run-all

🔜 Next up...

[School Landing Page – Part 2, Section 1] Sass Setup

🥓 School Landing Page Project – Section 1: Sass Setup

💡 What is Sass?

❓ Why use Sass?

1. ✅ Reuse styles with variables

2. 🧩 Write cleaner code with nesting

3. 📱 Responsive design with mixins

🗂️ Creating the Project Folder & Initializing npm

1. 📁 Create the Project Folder

2. 📦 Initialize the Project with npm

3. 📥 Installing Sass with npm

✅ Why use the --save-dev flag?

📦 Files and folders created

🔜 Next: Folder Structure & Sass File Setup

[School Landing Page – Part 1, Section 4] Layout Planning & Low-Fidelity Sketch

🧩 School Landing Page Project – Section 4: Layout Planning & Low-Fidelity Sketch

🧱 Full Layout Structure

✍️ Low-Fidelity Sketch

🛠️ Note for Future Projects

🔜 Next up…

[School Landing Page – Part 1, Section 3] Collecting Content (Images / Videos / Text)

📸 School Landing Page Project – Section 3: Collecting Content (Images / Videos / Text)

🖼️ Images & 🎞️ Video Assets

📝 Writing Text Content

🔜 Next up…

[School Landing Page – Part 1, Section 2] Define Site Personality: Color, Font, and Mood

🎨 School Landing Page Project – Section 2: Define Site Personality

🧠 Personality Direction

🎨 Color System

🌗 Tints & Shades

Main (#03A6A1)

Accent (#F9A825)

Greys

✍️ Typography

📌 Summary

🔜 Next up…

[School Landing Page - Part 1, Section 1] Project Planning: Purpose and Target Users

🏫 School Landing Page Project – Section 1: Define the Project

🎯 Project Overview

👥 Target Audience

🎨 Design & UX Strategy

✏️ What’s next?

Introducing My Dev Blog: Learning HTML & CSS

💻 What I'm doing now

🎯 Goal

📦 How to Install `live-server`

📦 Why `npm-run-all` Is a Must

🔧 How to Install `npm-run-all`

✅ Why use the `--save-dev` flag?

Main (`#03A6A1`)

Accent (`#F9A825`)