This site was custom-coded using the very technologies taught in this lesson! When complete, you will be able to do the same!
Web development is the process of creating and designing websites for the World Wide Web. Understanding web development requires familiarity with the fundamental components of the web and the technologies used to build modern websites.
In its early days, the web consisted of virtual documents (or pages) linked together through Universal Resource Identifiers/Locators (URIs/URLs). These documents were created using Hypertext Markup Language (commonly known as HTML), a markup language that allowed users to define the structure and presentation of web pages [1]. Over time, the web has evolved significantly under the guidance of early computer scientists like Sir Tim Berners-Lee, growing into the twisted mix of beauty and insanity it is today [1].
The core building blocks of modern web development are HTML, Cascading Style Sheets (CSS), and JavaScript. While approximately 98.7% of websites still utilize HTML, CSS and JavaScript have become essential additions to enhance the functionality and visual appeal of these pages [2].
Website builders like Webflow and Wordpress offer friendly and appealing interfaces to create websites without directly needing to learn to code. However, it is paramount to recognize that these platforms still utilize the underlying technologies of HTML, CSS, and JavaScript under-the-hood. While they simplify website creation, for any more advanced customization, they require custom-code.
For example, I built a small website called github-painter.vercel.app [3] that looks like it could be made with a builder, right? I mean, it’s only a couple squares on a grid! However, this problem took several thousand lines of custom-code to build, alongside code-generation. However inception-y that sounds, no builder could do it. I’ll say it again, knowing how to develop your own custom solutions is critical in this day and age; it gives you versatility and the ability to stretch your creative muscles — the freedom not to be bound to somebody else’s idea of perfection.
Two common misconceptions about web development are:
1) That it is inherently challenging and that coding knowledge is no longer necessary for building complex websites. Contrary to this notion, website design is simple if you put in the effort. It’s unrealistic to be able to compete with the quality and build of well-established enterprise sites online on day one, but realistic to quickly overtake the scary amount of 1990s sites still up within a week or so of study. I mean, HTML and CSS aren’t even classified as languages! They’re just “markup” and “styling” sheets.
2) That it is useless to learn if website builders exist and offer basic features suitable for general purposes. This is a fallacy because customizing advanced functionalities often requires coding expertise (refer to my example in the previous section!). Thus, web-based development skills are important to learn.
The choice of web development as our topic is driven by my teammates and I’s extensive experience in the field. Multiple of our team members have undertaken university-level courses and I’ve additionally participated in a London-based bootcamp. Moreover, I run a "Help Kids Learn To Code" Discord server [4], with about 500 members primarily aged 13 to 18, which has afforded me valuable insights into interacting with this demographic.
Unintentionally, for the Discord server, my primary audience has become these young individuals. Oddly, on the younger side of that spectrum I’ve noticed a large minority of them have some mental ailment, usually a variation of an attention-deficit disorder. Many of these knowledge-seekers thus require specialized one-on-one continual encouragement to learn and grow.
In accordance with advice received earlier, I was thinking about switching-up some of our activities to be easier. However, before I did so, I perused my Discord server. Within a few minutes, I saw a 13 year old Balkan kid building a video game in Python, a 14 year old South Korean building an AI image processing system, and another 14 year old writing some unknown low-level assembly program. Then it hit me. I think kids of this demographic like learning hard things. They know coding is prestigious and difficult, so they want to be treated like adults. Thus, I've altered the material a little bit (especially the JavaScript lessons) to make them easier, but primarily kept the HTML and CSS lessons the same (they're easier by default anyway). However, it's worth noting that emphasizing the difficulty of these activities is recommended. This will both incentivize the kids (give them a challenge), alongside vindicating the kids who are unable to progress at the same speed (note: there are enough easy activities to keep these kids occupied as well). I’ve put a lot of thought into this, based upon my personal experience interacting with specifically young learners wanting to learn coding.
We tentatively propose hosting this resource on my personal website, matthewtrent.me [5], which was created using the very web development techniques we’re trying to teach. By doing so, we aim to add a sense of credibility to the article, and become more relatable to the learner. In other words, we want them to know their teachers once went through the very thing they’re going through now themselves, and that the skills they learn will carry-forward and be useful.
The structure of our content will be based on the three uncontested fundamental components of web development: HTML, CSS, and JavaScript, which also happens to map perfectly with the number of team members in our group!
An introduction should be made before diving into the three subtopics to clarify how they connect. This was an overview I was never given, but wish I had been:
To relate a web page to our own human physiology: HTML is like our bones. It makes up our structure. It helps us not fall apart. However, with just HTML, we can’t walk, don’t have skin, and are pretty much ugly and useless! If we add CSS, which is like our skin and outer layer, we become more pleasant to gaze upon — we suddenly gain eyelashes, hair, skin, and lips! From the outside, we now appear fully human. However, without JavaScript, all we can do is lay static, doing nothing. Thus, to correct this, we add JavaScript, which is like our brain! With it, our human can now walk, talk, and do things by themselves. Likewise, with JavaScript, our website can now handle button presses, talk to a server, and much more!
| Skill classification | Essential question | Learning objective | Assessment plan | Additional resources by activity |
|---|---|---|---|---|
| Knowledge (formative) | Are students able to identify the structure of a basic HTML document? | The students will match 10 different commonly-used tags to what their UI representation is. | A matching activity (we did this in CSC 130!). There are 10 lines of “code” on a projector, with 10 lines of UI on another projector. Students must attempt to match the two correctly. | HTML tags intro: w3schools.com/html [6] |
| Collaboration and analysis (summative) | Are students able to map an idea of a basic UI from their minds to code? | Students should be able to think of a tag they want to create, and add it to the page such that the UI renders. | Students are put into groups where they prompt each other with assorted ideas of “cool” UI concepts. They then try to actually bring those individual concepts to life with a matching HTML tag. |
HTML visualizer tool:
codebeautify.org/htmlviewer [7] Easy HTML editor (no installation): html.onlineviewer.net [8] |
| Aggregated application (summative) | Can students apply individual tag-based skills to a more complex project? | Students build a basic web page. | Students are asked to create a “personal website” about themselves that looks better than any 1990s website they find online. This brings out the competitive side of them! Let their own motivation drive them forward. Many intelligent computer science professors have awful websites, and it’s encouraging for students to be able to surpass their websites so quickly. |
Example old websites:
blog.uptrends.com/internet/6-internet-fossils-websites-from-the-90s-that-still-work [9] More example old websites: makeuseof.com/popular-90s-websites-running [10] |
| Skill classification | Essential question | Learning objective | Assessment plan | Additional resources by activity |
|---|---|---|---|---|
| Fundamental knowledge (formative) | Are students able to understand basic syntax and structure of CSS rules? | Students complete basic code by filling in the blanks. | There are 20 lines of code with blanks, and students need to follow the instructions and fill in the blanks to complete the code. | CSS intro: w3schools.com/css/default.asp [11] |
| Collaboration and analysis (summative) | Can learners analyze UI design choices to create effective web interfaces? This is highly subjective, but allows for great creativity. | Students need to be able to think up CSS solutions for layout and design challenges in web projects. | Students participate in a group project. They need to create a responsive and naive website design, while providing feedback on peers’ website designs. | CSS frameworks: getbootstrap.com [12] |
| Aggregated application (building on previous skills; summative) | Can students apply CSS skills effectively to create comprehensive and polished web projects? | Students should be able to proficiently integrate HTML and CSS to build websites, and use CSS properties and techniques to enhance website aesthetics and functionality. | Students create a multi-page website with HTML and CSS, showcasing a combination of design, layout, and interactivity. Encourage students to perform code reviews for peers’ projects and provide constructive feedback. | CSS preprocessor: sass-lang.com/install [13] |
| Skill classification | Essential question | Learning objective | Assessment plan | Additional resources by activity |
|---|---|---|---|---|
| Fundamental knowledge (formative) | Are students able to understand the syntax and procedure of how the first official “programming language” code works? | The students just have to create a variable and have to assign the values to that variable. They can also print the results to see a visual representation. | This assessment consists of just 5 exercises where students have to create a new variable and assign it to certain values given in the question. | Javascript variables 101: exercise_js.asp [14] |
| Breadth of knowledge — widening the base (summative) | Are students able to use arithmetic operators in JavaScript? | The students would get to know how to use different arithmetic operators in JavaScript. | The students must use the arithmetic operators in such a way that they get the desired output. They are given 4 or 5 test cases. These consist of statements like “1+1” or “5*2”. | Javascript operations: exercise_js.asp [15] |
| Usage of Functions (summative) | Are students familiar with functions in JavaScript and how to call them? | Students learn how to use functions and get the desired output from them. | The students must call a pre-specified function, such that the function is executed and returns a predetermined result. For example, “write us a function that returns the word ‘three’”. | Javascript functions: exercise_js.asp [14] |
Our rubric ranges from level 1 ("no content grasp") to level 5 ("advanced understanding") without clear parameters in the middle. We've decided this is for the assesser to determine. However, we've given them generic categories we believe important. These levels will be given over grades.
| Category | Level 1 | Level 2 | Level 3 | Level 4 | Level 5 |
|---|---|---|---|---|---|
| Content & Holistic Viewpoint | Insufficient | Basic | Proficient | Good | Excellent |
| Organization of Ideas | Disorganized | Inconsistent | Logical | Structured | Well-structured with clear flow |
| Clarity & Concept Understanding | Unclear / Nothing | Inadequate | Clear and Personal Insight | Effective or Driven | Highly effective and easy to understand, going above and beyond |
| Domain-relevant Language | Unintelligible | Errors present | Accurate and coherent | Polished with minimal errors | Fluent, precise, and articulate |
| Delivery & Energy | Monotone | Unengaging | Engaging | Dynamic and interactive | Compelling, captivating, and inspiring |
Done! We’ve begun planning for our interactive learning resource.
[1] CERN. “A short history of the Web.” home.cern. home.cern/science/computing/birth-web/short-history-web (accessed Jul. 24, 2023).
[2] Tech Jury. “How many websites use JavaScript?” techjury.net. techjury.net/blog/javascript-usage-statistics/ (accessed Jul. 24, 2023).
[3] Vercel. “Github Contribution Graph Painter.” vercel.app. github-painter.vercel.app (accessed Jul. 24, 2023).
[4] Discord. “Coder's Cove.” discord.app. https://discord.gg/cWHnQFSfMy (accessed Jul. 24, 2023).
[5] Matthew Trent. “I’m Matt, a Programmer.” matthewtrent.me. matthewtrent.me (accessed Jul. 24, 2023).
[6] W3Schools. “HTML Tutorial.” w3schools.com. w3schools.com/html (accessed Jul. 24, 2023).
[7] Code Beautify. “Best HTML Viewer, HTML Beautifier.” codebeautify.org. codebeautify.org/htmlviewer (accessed Jul. 24, 2023).
[8] Online Viewer. “HTML Online Viewer.” onlineviewer.net. html.onlineviewer.net/ (accessed Jul. 24, 2023).
[9] Uptrends. “6 internet fossil fuels - websites from the 90s that still work.” uptrends.com. blog.uptrends.com/internet/6-internet-fossils-websites-from-the-90s-that-still-work (accessed Jul. 24, 2023).
[10] Make Use. “12 Popular Websites From The 90s That Are Still Up And Running.” makeuseof.com. makeuseof.com/popular-90s-websites-running/ (accessed Jul. 24, 2023).
[11] W3Schools. “CSS Tutorials.” w3schools.com. w3schools.com/css/default.asp (accessed Jul. 24, 2023).
[12] Bootstrap. “Build fast, responsive sites with Bootstrap.” getbootstrap.com. getbootstrap.com (accessed Jul. 24, 2023).
[13] Install SASS. “Install SASS.” sass-lang.com. sass-lang.com/install/ (accessed Jul. 24, 2023).
[14] W3Schools. “Exercise v3.0.” w3schools.com. w3schools.com/js/exercise_js.asp?filename=exercise_js_variables1 (accessed Jul. 24, 2023).
[15] W3Schools. “Multiply 10 with 5 and Alert the Result.” w3schools.com. w3schools.com/js/exercise_js.asp?filename=exercise_js_operators1 (accessed Jul. 24, 2023).