- Creating a design on Figma
- Building your website with HTML, CSS, JavaScript
- Deploying your website with Github Pages
- Go to figma.com
- Create a design file (draft)
- Create an artboard (press a) and select a screen size
- Create a design (doesn't have to be complicated) -- here's an example:
HTML - structure of website (text, images)
CSS - styling of website (colours, font sizes)
JavaScript - functionality of website (buttons, alerts)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>...
<body>
<div>
<h2>vivian</h2>
<p>a very cool cs club exec :)</p>
</div>
</body>Result:
There are a lot more HTML tags.
Remove all margins and paddings by default (personal preference):
* {
margin: 0;
padding: 0;
}
Adding a class name:
<body>
<div class="landing">
<h2>vivian</h2>
<p>a very cool cs club exec :)</p>
</div>
</body>Adding a background colour:
body {
background-color: #E2DEF3;
}Changing font size:
.landing h2 {
font-size: 5rem;
}
.landing p {
font-size: 2rem;
}
Center the text (horizontally):
.landing {
width: 100vw;
margin-top: 150px;
margin-bottom: 150px;
display: flex;
flex-direction: column;
align-items: center;
}
<div class="about">
<p>hi i’m vivian! i’m in grade 11 and i’m an exec at cs club. i make all the cool posts that you see on our <a href="https://www.instagram.com/wci_computer_science">instagram</a>! btw all of this is written by ching lam</p>
<img src="profile.png">
</div>a - link, img - image
.about {
width: 100vw;
display: flex;
justify-content: center;
}
.about p {
font-size: 1.5rem;
width: 40vw;
margin-top: 40px;
margin-right: 50px;
}
.about img {
height: 200px;
}Read more about CSS Flexbox.
The projects section is a bit more complicated (left as an exercise for the reader).
You can use any font from Google Fonts!
Put this at the top of your CSS file:
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');Change font family:
body {
...
font-family: "Inter", sans-serif;
}
Adding link hover effects:
.project a:hover {
color: red;
}Search up transition to add smooth transitions.
<body>
<div class="navbar">
<a href="">vivian</a>
</div>
<div class="landing">
...
....navbar {
background-color: #C7BFEC;
position: fixed;
left: 0;
top: 0;
width: 100vw;
padding: 15px 40px;
}The navbar is fixed to the top of the screen:
Final note: Don't worry if you don't know everything before you start, you can search up what you don't know while you're building your website.
Option 1 - Push changes from your computer
- Download Git: https://git-scm.com/downloads
- Commit all changes
git add .git commit -m "commit message"
Option 2 - You can upload files directly to a Github repository
- Create a Github account: https://github.com/
- Create a Github repository - click "New" button on home page (make sure it's public)
- Option 1: Follow instructions on repo to push changes
- Option 2: Upload files directly
- Go to Settings > Pages
- Select the main branch to deploy and save (might take a few minutes)
Your website is deployed on https://[username].github.io/[repo-name]/
Get yourself bubble tea! (from Hack Club) -> https://hackclub.github.io/boba-drops/