There is too much information for any one person to know right away in development and coding. Luckily though, developers tend to be a helpful group with many resources to assist those getting started, and a community that is willing to answer questions about problems.
If (when) you have been using the issues tab on the GitHub repo for this course, you will already recognize the importance of having a strong community to ask questions within.
There are a number of additional resources that you should start to take advantage of, in addition to your classmates and instructors.
One invaluable resource for web developers is the ability to look at the code for websites you visit. Browsers get code from servers, which means you can look at this code to try and inspect how someone else might have solved a problem.
During Workshops, you are expected to look at each other’s codes as Peer Reviewers, looking for errors and code choices.
In Chrome, if you right click, you can select “inspect” which will bring up the Chrome developer tools to the right.
You can use the “Elements” tab, to see source code, as well as the matching highlighted element in the actual page (as described below in Safari). You can also select the “Source” tab to see the raw course code files. Again, these allow you to see the code that creates the page your are viewing.
You can do the same thing in Firefox as Chrome. Simply right click in the page you want to see the code for, and select either “View Page Source”, which loads the file in a separate tab, or “Inspect Element”, which open up a more complete set of developer tools.
To inspect code in Safari, you first need to make it so you can see the developer tools. To do this:
cmd
+ ,
),This will cause a tab to appear in your menu bar. You can now select this menu tab, then select “Show Page Source”.
This will bring up a separate window/tab where you can navigate around all of the resources sent over to your browser for the specific web page.
You can also select the “Elements” tab from within this window. This alternative view of the code allows you to see where each html element is in the displayed page. As you move your mouse through the code, various parts of the page will highlight, representing the current element in the code you are inspecting.
The Wayback Machine allows you to see what certain websites looked like at different points in history. This may not be the best resource for learning how to code a website, but it does allow you to get a sense for how a company may have viewed their brand over time, how the web used to look, or retrieve information from the past that is no longer live. It’s also the coolest way to spend a Saturday night.
The resource is the Internet Archives Wayback Machine.
For example, lets look at the history of www.umt.edu
. At the moment I took this picture, the page tells us, there have been 2024 snap shots taken of this site since the Internet archive began. Dating from Feb. 19, 1997 to Feb. 1, 2017.
I am going to select the year 2000, and the date June 16th, 2000.
That shows us what the University of Montana’s main site looked like at that moment in history. Definitely has a retro feel now, especially with that logo graphic.
Some other great examples include;