- Build a website using HTML, CSS and JavaScript
- Publish a website
You've been learning HTML, CSS, and JavaScript over the previous lessons. You've
been receiving specific guidance ("Use a <link>
tag!") and have been steered
by our documentation or tests. In an effort to help you build your confidence,
we're going to give you nothing except some specifications and leave the
document structure and styling to you. It's time to tie all your learning
together into one project. You must create...
...a personal website!
Professional software engineers and web developers often have a personal website. In some ways, it is the industry's alternative to a business card. A personal website can showcase your abilities while also giving visitors a sense of your personality.
This project is an opportunity to showcase what you've learned so far, so it is
important that HTML, CSS, and JavaScript are incorporated into the project in
some way. For example, you could use a mouseover
event to change the
appearance of an element when the user mouses over it. Or use a click
event to
toggle some content between being visible and hidden. There are a variety of
ways to do this using the CSS and JavaScript you've learned so far, but don't
forget you can always use Google if you get stuck. Google is an invaluable tool
for developers! Try to use this project as an opportunity to stretch your coding
skills!
The content, styling, and functionality of your site are up to you. Keep in mind that you may show this project to your peers and future instructors, so be considerate of content/subject matter and your potential audience.
Review the previous lesson, Host a Site on GitHub, for guidance on setting up the necessary HTML, CSS, and JS files, and instructions on how to publish a site on GitHub Pages.
We recommend going through these steps first — create and connect the necessary files and get them published before diving into writing too much HTML and JavaScript. If you've got everything published, you'll be able to continuously push updates to your site as you build it.
In general, when it comes to building code-related projects, it is often best to establish a routine of making small improvements, checking to make sure those improvements work and don't break things. After creating the basic files and connecting them, open your HTML file in a browser tab and your files in a code editor, this routine might look something like the following:
- Write some HTML, CSS or JavaScript
- Go to your browser and refresh the page to see the changes
- Adjust your code and repeat until you're satisfied
- Move on to the next task and repeat the process
It is very common to get lost in coding and to keep going from one task to the next without checking your work. The problem here is that if you make a mistake it becomes more and more difficult to spot the error and can cause you to backtrack and spend extra time debugging.
By frequently checking your work, you'll set your own project milestones — at each one, you can verify everything is working so when you do make a mistake, you'll know it was made recently.
When it comes to Git, there is ultimately no rule that says you must do things a certain way. However, if there was anything we could impart to you regarding good version control habits, it would be this — commit code frequently.
As mentioned, it is a common habit to dive into the code of a project and write as much as you can, for as long as you can. However, not only does this increase the chance for bugs, it will result in very large Git commits or just one big commit for everything.
Repositories with a good commit history can relay a story about their development from just the commit messages alone. For example, instead of the commit history looking like this:
- Commit 1: "Initialize Repository"
- Commit 2: "Finish website"
A good history might look closer to this:
- Commit 1: "Initialize Repository"
- Commit 2: "Add basic HTML, CSS and JavaScript files"
- Commit 3: "Create initial HTML content"
- Commit 4: "Add CSS rules"
- Commit 5: "Fix syntax issue in HTML"
- Commit 6: "Finish bio/about section"
- Commit 7: "Add JS event listeners"
- etc...
- Commit 22: "Adjust styling for new HTML layout"
- Commit 23: "Finish website"
The commit messages here suggest that each commit above addressed a small, often singular task.
Good commit practices are critical for large companies and organizations where many developers are working on large code-bases — in these cases, limiting the size of commits makes it easier for others to understand what changes the commit brings. If a commit introduces a bug into the code base, it is fairly easy to revert a small commit. A big commit, on the other hand, may require lots of extra work to untangle and fix.
For personal development, though, the same concerns apply. In addition, when you start building more complex projects, you may find yourself in situations where you'd like to go back to an earlier version of a project. Taking the time now to build good habits will help you many times over in the future. Think of good version control habits as a favor to your future self!
Once you've finished building your website, make sure to push it all up to GitHub. If you followed our advice and set up GitHub Pages first, you've now successfully built and published a website! Fantastic work!