Ever wanted to build your own website? With NUWIT, you'll learn how—and more!
- Figma: A wireframing application that can help you plan out your website!
Here is a great open source code editor that is compatible with Windows, Mac, and Linux:
- Visual Studio Code: Microsoft's code editor with a super sleek user interface and terminal integration.
There are lots of other code editors out there if you'd prefer something different, but this is the code editor we'll be using during our demos.
Git is a version control system. It, like our code editors, is open source. Essentially, git allows us to make changes to code, revert code to a past version, and add features to code without necessarily having those features part of our final product.
IMPORTANT: If you have windows, installing git might be slightly more challenging. Read the instructions above carefully and make sure to ask for help if something doesn't work!
Open your terminal in your code editor:
- Use the
⌃`keyboard shortcut with the backtick character. - Use the
View > Terminalmenu command on windows, and theTerminal > New Terminalmenu command on Mac. - From the Command Palette (
⇧⌘P)
Type the following into terminal to add a username to your Git. It can be your Github username, or just your name:
$ git config --global user.name "[GITHUB USERNAME]"
And also type the following into terminal to match your Git email to your Github email. This email must match the one you associated with your Github account:
$ git config --global user.email "[email protected]"
Return to the Github repository for Personal Website Hack Day. Fork this repository using the link below the topbar:
Copy your new repo's clone url:
Type the following command into your terminal, pasting the git clone url you just copied:
$ git clone [COPIED GIT CLONE URL]
and press enter...
You should now have this repo on your machine!
In your editor, open the hack_day_2020/bare_bones folder.
You'll notice that there are two files in this folder: index.html and style.css
On line of 7 of index.html, replace:
<title>My Website</title>
with
<title>[YOUR NAME HERE]</title>
And on line 9, replace:
<meta name="author" content="Your Name">
with
<meta name="author" content="[YOUR NAME HERE]">
You can also add a description to your site on line 8, in the content attribute.
To stage your changes to be committed, type:
$ git add .
Then type the following command to commit the changes to your local repository. Your local repository is the git repository that is tracking the changes on your laptop only. Your remote repository is your Github repository, the one that saves all your changes online.
$ git commit -m "Add my name"
The quotation following -m is the commit message, which gives a description of what changes were made in that commit.
Once the changes are committed, let's push them to your Github repo.
$ git push -u origin
You should now see the changes on your Github repo.
You can use those three commands to save your work throughout your coding process.
Here, we're going to give you an overview of HTML and show you some demos. But in case you need resources, we've listed quite a few below:
Once again, CSS will require a bit of in-person explanation. But here are resources just in case:
Something important to know is CSS inheritance. Let's say we have the following HTML and CSS:
<style>
.parent {
color: red;
}
</style>
<div class="parent">
Parent
<div class="child">Child</div>
</div>
Which elements will have red text?
Actually, the answer is: both!
But if the code changes:
<style>
.parent {
color: red
}
.child {
color: green;
}
</style>
<div class="parent">
Parent
<div class="child">Child</div>
</div>
The parent is red, but we have specified the color for the child, so now it is green.
There are certain CSS properties that child elements will inherit, like color. Here is a list of them. Be careful with inherited properties, as they can mess up the styling of your elements in ways that are hard to identify.
But let's say I set multiple colors for .child, using the simple .child selector and the .parent .child selector, which tells us to change the color of the the .child within a .parent element. Which one is chosen?
<style>
.parent {
color: red
}
.child {
color: green;
}
.parent .child {
color: blue;
}
</style>
<div class="parent">
Parent
<div class="child">Child</div>
</div>
It's blue!
In the end, the css with the most specific selector will be displayed. The .child class could be anywhere in the HTML. But .parent .child tells us a bit more—that .child will be found within the .parent. Therefore, it's more specific, and takes priority.
If all selectors are of equal specificity, the last css attribute in the document is chosen.
<style>
.parent {
color: red
}
.child {
color: green;
}
.child {
color: orange;
}
</style>
<div class="parent">
Parent
<div class="child">Child</div>
</div>
.child and .child have equal specificity. But because color: orange comes last in the document, it's the color that shows up.
Getting a bit lost putting it all together? Here's some example code!
Don't forget to commit your changes!
Sometimes figuring out the correct CSS is a lot of trial and error. There are a lot of different CSS attributes, and it's hard to memorize them all, let alone everything they do. Google Chrome's Developer Tools can help you.
Developer Tools allows you to see immediate changes to a website as you toggle CSS attributes and edit HTML. Note that these changes won't actually be made to your code — they'll just temporarily manipulate the website as it appears in your browser. But it's still a good way to experiment and identify problems in your HTML or CSS.
If you'd like to test out a new look for Wikipedia's logo, for example, you can add the yellow background:
And then toggle it off again:
You can open the Developer Tools by right clicking on some component of a website and selecting "Inspect:
Or through the Chrome menu:
Need more help with Developer Tools? Check out these Google tutorials:
Open the hack_day_2020/bootstrap folder and open index.html.
Your index.html is already set up with Bootstrap installed.
Trying to figure out Bootstrap? Here are some important pages in the documentation:
Breakpoints are common device widths at which we should change our layout to optimize readability and usability. For example, while a set of links can span horizontally across a laptop screen, those links should stack vertically on a phone. Otherwise some text could get cut off.
Here are Bootstrap's breakpoints.
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// sm - Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// md - Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// lg - Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// xl - Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
You can set certain (but not all) Bootstrap utilities to activate at certain breakpoints. To do this, use the following syntax in your class names:
[Bootstrap attribute]-[breakpoint abbreviation]-[Bootstrap value]
For example:
text-left text-md-center
Using the above class names, your text will be left-aligned on all screens with widths smaller than 768px, but centered on all screens above that.
Your default styling, aka the styling that applies to extra small (xs) screens, should have no breakpoint. In this case text-left. For greater screen sizes that require different styling, add the appropriate breakpoints. The styling you provide for a breakpoint will apply for all screen sizes greater than that breakpoint — until/unless it reaches a greater breakpoint where you've applied different styling.
You can change styling at every breakpoint, if you want. For example:
text-left text-sm-center text-md-right text-lg-justify text-xl-right
In this example, extra small screens will have left-aligned text, small screens will have center-aligned text, medium screens will have right-aligned text, large screens will have justified text, and extra large screens will have right-aligned text.
The Bootstrap grid allows you to build website layouts using—you guessed it—a grid system. This grid system relies on rows and columns, nested within a div of the container css class.
col is the column css class. Notice the numbers attached to col, like col-4? They're pretty important. That's the column width. It's not a width in pixels. Rather, it's the proportion of the parent element it's inside. How does that work?
The absolute key to the grid system is this: the column widths must add up to twelve. If they're more than twelve, they probably won't work. If they're less than twelve, they probably won't work too. Twelve is the golden number in the Bootstrap grid system.
So how does this relate to proportions? Well, think of the column widths as a fraction over twelve. 6 is half of 12, so a column of col-6 will take up half its parent container. col-4 is a third of twelve, so it takes up a third of the parent container, and so on. No matter how big or small the parent container gets, col-6 will always take up half of the container's width.
Notice that some columns have breakpoints. Columns are one of those special utilities that you can set to activate at certain responsive breakpoints.
For example, you could want a menu to take up the full width of a phone screen, otherwise it'd be too small to fit your text. So your menu is given col-12 for extra small screens up to your next breakpoint, the default.
But once you hit medium screens, a full screen menu could seem too large. So you give your menu another class: col-md-6. Now, for medium-sized screens, your menu takes up only half the screen.
The grid system is super useful when developing responsive websites.
Though the grid is useful, it can be somewhat inflexible. That's what Flex was created to fix (haha). Flex is useful if you need your HTML elements to have more fluid sizing and more controllable alignment.
Flex can be a tough concept to grasp, which is why it's best exemplified through demos. We'll be showing you some, but here are the official Bootstrap demonstrations if you miss us:
Want fun icons like these on your website?
To use icons in your HTML, add the following code before </head>:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity_no="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Then, check out this list of FontAwesome icons. Take note of the names of icons you want to use.
To use an icon, add an <i></i> tag with the following class names:
<i class="fas fa-[ICON NAME]></i>
To insert a star, for example:
<i class="fas fa-star></i>
Tired of boring web safe fonts like Helvetica and Times New Roman? Well, you're in luck! Google Fonts has a wide selection of fonts that you can embed on your webpage.
Once you pick a font, take note of its name. Then add the following code before </head>:
<link href="https://fonts.googleapis.com/css?family=[FONT NAME]" rel="stylesheet">
For example,
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
And if you want to add only specific weights:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
Each font will have different weights, or sometimes, only one weight. Check which weights are available for your chosen font
Feel free to delete the starter files. Make sure your final index.html is at the root of your directory.
Now let's push your finished website to your personal Github page.
Create a NEW Github repository. DO NOT INITIALIZE THE REPO WITH A README and make sure to give it a name in the following format:
[YOUR GITHUB USERNAME].github.io
For example: username.github.io
In your terminal, type the following command:
$ git remote add website https://github.com/[YOUR GITHUB USERNAME]/[YOUR GITHUB USERNAME].github.io
...where website is the name of your new remote repository.
Check that your new remote repository exists:
$ git remote -v
Finally, push your finished website to Github pages:
$ git push website master
That's it! Check out [YOUR GITHUB USERNAME].github.io for your published website! It might take some time to show up, but it should be there within an hour or so.