Step 1

Install Visual Studio Code (if not already installed). Then launch it.

Why installing Visual Studio Code? Visual Studio Code is an IDE or Integrated Development Environment, which is essentially a code editor, published by Microsoft. The software is free and powerful, providing numerous tools to customize your coding environment and integrate external applications. Atom and Sublime Text are viable options, however, Github has announced that it will cease updates for the former in 2022 due to a lack of support, and the latter requires a license for continued use.

Step 2

Install Live Server extension (if not already installed). If the plugin is installed, you should be able to see it in the Extensions sidebar of VS Code (open it with CMD + SHIFT + X). You should also see the Go Live button in the bottom bar of VS Code.

Why installing Live Server? Live Server enables launching HTML files through a server instead of only locally (i.e., by double-clicking an index.html file). It is crucial to launch HTML files through a server and not locally as browsers block many functions for security purposes. These functions primarily include JavaScript functions (the fetch() function being the most important), but it can still be bothersome with pure HTML and CSS.

Step 3

Open the VS Code Terminal (Terminal > New Terminal) and check if Node.js is already installed by typing:

node -v

If not installed, or if your Node.js version is below v18, install the LTS version from here. Run node -v once again after installing to check that the installation worked.

Why installing Node.js? Simply put, Node.js is a server-side adaptation of Javascript that supersedes other server-side languages like Python or PHP. It facilitates more advanced integration between the client and server, which will be looked at in the second lecture. We won’t be coding anything in Node.js, but we may use some Node.js plugins at the very end of the block to process CSS and JS files. Generally speaking, although it may not be used this year, having Node.js installed is virtually essential today for anyone who wants to move beyond very basic HTML/CSS coding.

Step 4

Check if Git is already installed by typing:

git --version

If not installed, an installation program should automatically be launched. Follow it and run git --version once again after installing to check that the installation worked. The installation program can be quite long, especially on MacOS, as it needs to update Xcode at the same time.

Why installing Git? Git is a version control tool that enables tracking of changes in files and facilitating project collaboration. It is a highly efficient tool commonly employed by developers. It will be utilized for downloading course materials and potentially publishing work online at the end of the block. No further use is planned, but it is recommended to have the software installed on your computer.

Step 5

Signup on Github or sign in if you already have an account. Then, add your name and email to Git by typing this in the terminal (replace with your own name and email):

git config --global user.name "Your Name"
git config --global user.email youremail@gmail.com

Why using Github? Github is the most popular git tool globally. It is no longer an independent platform since its acquisition by Microsoft and there are notable alternatives (such as Gitlab and Bitbucket). Nonetheless, it is crucial to acquaint yourself with Github’s interface as you are bound to use it to download even the smallest plugin, locate documentation or examples, and more. The website also integrates effectively with other tools that we may use during our sessions.

And you’re done!

You can now code in a clean programming environment, set up on your computer.

Well, not really…

Ensuring an up-to-date and tidy working environment on your computer is undoubtedly essential, but it is also crucial to cultivate proficient coding habits for a smoother experience.

Successfully coding requires a proper balance between expediting current processes and facilitating future ones, either for yourself or others. A code file is a file that will inevitably undergo multiple modifications, postponements, truncations or deletions by an individual or sometimes by several others. Therefore, it is crucial to observe some protocols, which can oftentimes be simple but occasionally tedious, to not only make the programming experience bearable but also to facilitate the comprehension and modification of the code in the future, either by yourself or by someone else.

Advice 1

Use a starterkit that already includes most of what you need to start your project. For an HTML/CSS/JS project, I recommend using the starterkit I created, which addresses many of the common questions you may have when starting the project: How do I reset the default CSS values? How can I incorporate a font? What should I include in my HTML file? How do I import CSS and JS files into my HTML file?

You simply need to click the Download button and you’re all set with a clean project structure.

Advice 2

But there’s one key issue I aim to address with this starterkit: how can I organise a straightforward coding project?

In my opinion, after trying different methods, I suggest the following guidelines.

1.

Each project should have its own folder, and everything related to that project should be stored in that folder without any exceptions.

2.

The index.html file should be placed in the root of the folder because it is the fundamental file that encompasses all other files. To add more pages, just duplicate the index.html file in the root folder, and rename it according to your needs (for instance, about.html).

3.

File and folder names should not contain any spaces or special characters. It is crucial to prevent errors resulting from inconsistent interpretation of spaces and special characters across servers. Ideally, use lowercase letters, hyphens, and underscores. This is known as slugification and you can easily find online generators to test for accuracy.

4.

Everything that isn’t HTML should be placed in the assets folder and sorted according to its use, for example, CSS/JS separate from images, PDF documents, font files, etc. The naming of the sub-folders is not crucial.

5.

Avoid multiplying CSS and JS files unless necessary. It is often recommended to make files as modular as possible by separating modules as much as possible, especially on a professional level. At your level, I would recommend the opposite: consolidating everything into one file. This way, you will easily locate specific information when needed.

6.

All pages should implement the same CSS and JS files. It is unnecessary to create separate files for each page, given that several CSS styles will prove useful throughout the entirety of the website.

Advice 3

Be consistent and clear in naming your HTML elements. From the least precise to the most precise, there are several levels.

1.

The HTML tag itself, with the <div> tag being the most commonly used. Utilise semantic HTML and avoid sticking to just using <div> to bring more meaning to your structure, finding out more here.

2.

Use classes by adding class="" and separate multiple classes with a space between the quotes. A class is an identifier assigned to multiple repeatable elements. BEM syntax is my preferred naming convention for classes, as it adds clarity and logic to the naming process, you can find out about it here.

3.

The id is an identifier assigned to a single element that you add with id="", but I advise against using them as all elements can potentially be repeated on a website. If you are certain that an element will not be repeated, this can be a good way of identifying it though.

Advice 4

Try to minimize repeating code to avoid unnecessary tediousness. This adheres to the DRY principle, which stands for “Don’t Repeat Yourself”. More information can be found here. If you find yourself constantly copying and pasting code, it may be worth exploring ways to improve it.

There are probably many more tips I could give you, but these are the main ones, and if you think about them throughout the block, you’ll already considerably improve the quality, readability and maintainability of your code, and probably make your experience less tedious in the end!

Good luck and have fun!