diff --git a/Sprint-2/1-key-exercises/1-count.js b/Sprint-2/1-key-exercises/1-count.js index 117bcb2b6..af749016f 100644 --- a/Sprint-2/1-key-exercises/1-count.js +++ b/Sprint-2/1-key-exercises/1-count.js @@ -4,3 +4,5 @@ count = count + 1; // Line 1 is a variable declaration, creating the count variable with an initial value of 0 // Describe what line 3 is doing, in particular focus on what = is doing +//Line 3 takes the current value of count, adds 1 to it, and assigns the new value back to count. +//The = sign is the assignment operator. It assigns the value on the right side to the variable on the left side. \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/2-initials.js b/Sprint-2/1-key-exercises/2-initials.js index 964c9563c..5feb68613 100644 --- a/Sprint-2/1-key-exercises/2-initials.js +++ b/Sprint-2/1-key-exercises/2-initials.js @@ -5,6 +5,6 @@ const lastName = "Johnson"; // Declare a variable called initials that stores the first character of each string. // This should produce the string "CKJ", but you must not write the characters C, K, or J in the code of your solution. -const initials = ``; +const initials = `${firstName[0]}${middleName[0]}${lastName[0]}`; // https://www.google.com/search?q=get+first+character+of+string+mdn diff --git a/Sprint-2/1-key-exercises/3-paths.js b/Sprint-2/1-key-exercises/3-paths.js index ab90ebb28..3dddfe48a 100644 --- a/Sprint-2/1-key-exercises/3-paths.js +++ b/Sprint-2/1-key-exercises/3-paths.js @@ -17,7 +17,8 @@ console.log(`The base part of ${filePath} is ${base}`); // Create a variable to store the dir part of the filePath variable // Create a variable to store the ext part of the variable -const dir = ; -const ext = ; +const dir = filePath.slice(0, lastSlashIndex); +const lastDotIndex = filePath.lastIndexOf("."); +const ext = filePath.slice(lastDotIndex); // https://www.google.com/search?q=slice+mdn \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/4-random.js b/Sprint-2/1-key-exercises/4-random.js index 292f83aab..3c52ee852 100644 --- a/Sprint-2/1-key-exercises/4-random.js +++ b/Sprint-2/1-key-exercises/4-random.js @@ -7,3 +7,7 @@ const num = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; // Try breaking down the expression and using documentation to explain what it means // It will help to think about the order in which expressions are evaluated // Try logging the value of num and running the program several times to build an idea of what the program is doing + +// num represents a random whole number between 1 and 100, including both 1 and 100. +// Math.random() generates a random decimal number. +// Math.floor() rounds the result down to the nearest whole number. \ No newline at end of file diff --git a/Sprint-2/2-mandatory-errors/0.js b/Sprint-2/2-mandatory-errors/0.js index cf6c5039f..6a7a7f690 100644 --- a/Sprint-2/2-mandatory-errors/0.js +++ b/Sprint-2/2-mandatory-errors/0.js @@ -1,2 +1,2 @@ -This is just an instruction for the first activity - but it is just for human consumption -We don't want the computer to run these 2 lines - how can we solve this problem? \ No newline at end of file +// This is just an instruction for the first activity - but it is just for human consumption +// We don't want the computer to run these 2 lines - how can we solve this problem? \ No newline at end of file diff --git a/Sprint-2/2-mandatory-errors/1.js b/Sprint-2/2-mandatory-errors/1.js index 7a43cbea7..031839b47 100644 --- a/Sprint-2/2-mandatory-errors/1.js +++ b/Sprint-2/2-mandatory-errors/1.js @@ -1,4 +1,4 @@ // trying to create an age variable and then reassign the value by 1 -const age = 33; +let age = 33; age = age + 1; diff --git a/Sprint-2/2-mandatory-errors/2.js b/Sprint-2/2-mandatory-errors/2.js index e09b89831..2865eb8a4 100644 --- a/Sprint-2/2-mandatory-errors/2.js +++ b/Sprint-2/2-mandatory-errors/2.js @@ -1,5 +1,5 @@ // Currently trying to print the string "I was born in Bolton" but it isn't working... // what's the error ? -console.log(`I was born in ${cityOfBirth}`); const cityOfBirth = "Bolton"; +console.log(`I was born in ${cityOfBirth}`); diff --git a/Sprint-2/2-mandatory-errors/3.js b/Sprint-2/2-mandatory-errors/3.js index ec101884d..f7993c030 100644 --- a/Sprint-2/2-mandatory-errors/3.js +++ b/Sprint-2/2-mandatory-errors/3.js @@ -1,9 +1,6 @@ const cardNumber = 4533787178994213; -const last4Digits = cardNumber.slice(-4); +const last4Digits = cardNumber.toString().slice(-4); // The last4Digits variable should store the last 4 digits of cardNumber -// However, the code isn't working -// Before running the code, make and explain a prediction about why the code won't work -// Then run the code and see what error it gives. -// Consider: Why does it give this error? Is this what I predicted? If not, what's different? -// Then try updating the expression last4Digits is assigned to, in order to get the correct value +// The original code doesn't work because cardNumber is a number and .slice() cannot be used on a number. +// Converting cardNumber to a string allows .slice(-4) to return the last 4 characters. \ No newline at end of file diff --git a/Sprint-2/2-mandatory-errors/4.js b/Sprint-2/2-mandatory-errors/4.js index 5f86c730b..b0feba1bb 100644 --- a/Sprint-2/2-mandatory-errors/4.js +++ b/Sprint-2/2-mandatory-errors/4.js @@ -1,2 +1,2 @@ -const 12HourClockTime = "8:53pm"; -const 24hourClockTime = "20:53"; +const twelveHourClockTime = "8:53pm"; +const twentyFourHourClockTime = "20:53"; diff --git a/Sprint-2/3-mandatory-interpret/1-percentage-change.js b/Sprint-2/3-mandatory-interpret/1-percentage-change.js index e24ecb8e1..a90a1f512 100644 --- a/Sprint-2/3-mandatory-interpret/1-percentage-change.js +++ b/Sprint-2/3-mandatory-interpret/1-percentage-change.js @@ -2,21 +2,31 @@ let carPrice = "10,000"; let priceAfterOneYear = "8,543"; carPrice = Number(carPrice.replaceAll(",", "")); -priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," "")); +priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", "")); const priceDifference = carPrice - priceAfterOneYear; const percentageChange = (priceDifference / carPrice) * 100; console.log(`The percentage change is ${percentageChange}`); - -// Read the code and then answer the questions below - -// a) How many function calls are there in this file? Write down all the lines where a function call is made - -// b) Run the code and identify the line where the error is coming from - why is this error occurring? How can you fix this problem? - -// c) Identify all the lines that are variable reassignment statements - -// d) Identify all the lines that are variable declarations - -// e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression? +// a) There are 5 function calls. +// carPrice.replaceAll(",", "") +// Number(carPrice.replaceAll(",", "")) +// priceAfterOneYear.replaceAll(",", "") +// Number(priceAfterOneYear.replaceAll(",", "")) +// console.log(`The percentage change is ${percentageChange}`) + +// b) The error is on line 5 because there is a missing comma between "," and "". +// It should be replaceAll(",", ""). + +// c) The variable reassignment statements are: +// carPrice = Number(carPrice.replaceAll(",", "")); +// priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", "")); + +// d) The variable declarations are: +// let carPrice = "10,000"; +// let priceAfterOneYear = "8,543"; +// const priceDifference = carPrice - priceAfterOneYear; +// const percentageChange = (priceDifference / carPrice) * 100; + +// e) Number(carPrice.replaceAll(",", "")) removes the comma from the carPrice string +// and then converts the result from a string into a number. \ No newline at end of file diff --git a/Sprint-2/3-mandatory-interpret/2-time-format.js b/Sprint-2/3-mandatory-interpret/2-time-format.js index 47d239558..0b9fcd60b 100644 --- a/Sprint-2/3-mandatory-interpret/2-time-format.js +++ b/Sprint-2/3-mandatory-interpret/2-time-format.js @@ -11,15 +11,21 @@ console.log(result); // For the piece of code above, read the code and then answer the following questions -// a) How many variable declarations are there in this program? +// a) There are 6 variable declarations: +// movieLength, remainingSeconds, totalMinutes, remainingMinutes, totalHours and result. -// b) How many function calls are there? +// b) There is 1 function call: +// console.log(result); -// c) Using documentation, explain what the expression movieLength % 60 represents -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators +// c) movieLength % 60 gives the remainder after dividing movieLength by 60. +// This represents the number of seconds left after converting the rest into whole minutes. -// d) Interpret line 4, what does the expression assigned to totalMinutes mean? +// d) (movieLength - remainingSeconds) / 60 removes the leftover seconds +// and divides the remaining seconds by 60 to calculate the total number of whole minutes. -// e) What do you think the variable result represents? Can you think of a better name for this variable? +// e) result represents the movie length formatted as hours:minutes:seconds. +// A better variable name could be formattedMovieLength. -// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer +// f) The code works correctly for non-negative whole numbers of seconds. +// If movieLength contains a decimal value, the result may contain decimal seconds. +// Negative values would also not represent a normal movie duration. \ No newline at end of file diff --git a/Sprint-2/3-mandatory-interpret/3-to-pounds.js b/Sprint-2/3-mandatory-interpret/3-to-pounds.js index 60c9ace69..a2693c569 100644 --- a/Sprint-2/3-mandatory-interpret/3-to-pounds.js +++ b/Sprint-2/3-mandatory-interpret/3-to-pounds.js @@ -6,6 +6,7 @@ const penceStringWithoutTrailingP = penceString.substring( ); const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); + const pounds = paddedPenceNumberString.substring( 0, paddedPenceNumberString.length - 2 @@ -20,8 +21,30 @@ console.log(`£${pounds}.${pence}`); // This program takes a string representing a price in pence // The program then builds up a string representing the price in pounds -// You need to do a step-by-step breakdown of each line in this program -// Try and describe the purpose / rationale behind each step +// 1. const penceString = "399p": +// Initialises a string variable with the value "399p". + +// 2. penceString.substring(0, penceString.length - 1): +// Removes the last character "p" from the string. +// The result is "399". + +// 3. penceStringWithoutTrailingP.padStart(3, "0"): +// Makes sure the string has at least 3 characters by adding "0" to the start if needed. +// "399" already has 3 characters, so it remains "399". + +// 4. paddedPenceNumberString.substring(0, paddedPenceNumberString.length - 2): +// Takes everything except the last 2 characters. +// This gives us the pounds part of the price. +// The result is "3". + +// 5. paddedPenceNumberString.substring(paddedPenceNumberString.length - 2): +// Takes the last 2 characters of the string. +// This gives us the pence part of the price. +// The result is "99". + +// 6. .padEnd(2, "0"): +// Makes sure the pence part has 2 characters. -// To begin, we can start with -// 1. const penceString = "399p": initialises a string variable with the value "399p" +// 7. console.log(`£${pounds}.${pence}`): +// Combines the pounds and pence and prints the formatted price. +// The final output is £3.99. \ No newline at end of file diff --git a/Sprint-3/1-key-errors/0.js b/Sprint-3/1-key-errors/0.js index 653d6f5a0..b8a406cfe 100644 --- a/Sprint-3/1-key-errors/0.js +++ b/Sprint-3/1-key-errors/0.js @@ -1,7 +1,9 @@ // Predict and explain first... -// =============> write your prediction here +// I predict an error will occur because str is already the name of the function parameter. // call the function capitalise with a string input +capitalise("hello"); + // interpret the error message and figure out why an error is occurring function capitalise(str) { @@ -9,5 +11,13 @@ function capitalise(str) { return str; } -// =============> write your explanation here -// =============> write your new code here +// The error occurs because str is declared twice in the same scope. +// str is already a parameter of the capitalise function, so we cannot declare it again using let. + +// New code: +function capitalise(str) { + str = `${str[0].toUpperCase()}${str.slice(1)}`; + return str; +} + +console.log(capitalise("hello")); \ No newline at end of file diff --git a/Sprint-3/1-key-errors/1.js b/Sprint-3/1-key-errors/1.js index f2d56151f..a5fdcafbe 100644 --- a/Sprint-3/1-key-errors/1.js +++ b/Sprint-3/1-key-errors/1.js @@ -1,7 +1,8 @@ // Predict and explain first... // Why will an error occur when this program runs? -// =============> write your prediction here +// I predict an error will occur because decimalNumber is already the name +// of the function parameter and it is declared again using const. // Try playing computer with the example to work out what is going on @@ -14,7 +15,15 @@ function convertToPercentage(decimalNumber) { console.log(decimalNumber); -// =============> write your explanation here +// The error occurs because decimalNumber is declared twice in the same scope. +// It is already a parameter of the function, so it cannot be declared again using const. // Finally, correct the code to fix the problem -// =============> write your new code here + +function convertToPercentage(decimalNumber) { + const percentage = `${decimalNumber * 100}%`; + + return percentage; +} + +console.log(convertToPercentage(0.5)); \ No newline at end of file diff --git a/Sprint-3/1-key-errors/2.js b/Sprint-3/1-key-errors/2.js index aad57f7cf..e839d576d 100644 --- a/Sprint-3/1-key-errors/2.js +++ b/Sprint-3/1-key-errors/2.js @@ -1,20 +1,25 @@ - // Predict and explain first BEFORE you run any code... // this function should square any number but instead we're going to get an error -// =============> write your prediction of the error here +// I predict there will be a syntax error because 3 is a number +// and a function parameter must be a valid variable name. -function square(3) { - return num * num; -} +// function square(3) { +// return num * num; +// } -// =============> write the error message here +// Error message: +// Identifier expected. -// =============> explain this error message here +// The error occurs because 3 is being used as the function parameter. +// A function parameter must be a valid variable name, such as num. +// The number 3 should be passed into the function as an argument instead. // Finally, correct the code to fix the problem -// =============> write your new code here - +function square(num) { + return num * num; +} +console.log(square(3)); \ No newline at end of file diff --git a/Sprint-3/2-mandatory-debug/0.js b/Sprint-3/2-mandatory-debug/0.js index b27511b41..39c657475 100644 --- a/Sprint-3/2-mandatory-debug/0.js +++ b/Sprint-3/2-mandatory-debug/0.js @@ -1,6 +1,8 @@ // Predict and explain first... -// =============> write your prediction here +// I predict the multiplication will calculate 320, +// but the final message will show undefined because the function +// logs the result instead of returning it. function multiply(a, b) { console.log(a * b); @@ -8,7 +10,15 @@ function multiply(a, b) { console.log(`The result of multiplying 10 and 32 is ${multiply(10, 32)}`); -// =============> write your explanation here +// The multiply function uses console.log() to display the result, +// but it does not return a value. +// A function without a return statement returns undefined. +// This is why the final message contains undefined. // Finally, correct the code to fix the problem -// =============> write your new code here + +function multiply(a, b) { + return a * b; +} + +console.log(`The result of multiplying 10 and 32 is ${multiply(10, 32)}`); \ No newline at end of file diff --git a/Sprint-3/2-mandatory-debug/1.js b/Sprint-3/2-mandatory-debug/1.js index 37cedfbcf..7ef8139cb 100644 --- a/Sprint-3/2-mandatory-debug/1.js +++ b/Sprint-3/2-mandatory-debug/1.js @@ -1,5 +1,7 @@ // Predict and explain first... -// =============> write your prediction here + +// I predict the result will be undefined because the return statement +// does not return the result of a + b. function sum(a, b) { return; @@ -8,6 +10,14 @@ function sum(a, b) { console.log(`The sum of 10 and 32 is ${sum(10, 32)}`); -// =============> write your explanation here +// The function returns immediately when it reaches the return statement. +// Because there is no value after return, the function returns undefined. +// The line a + b is never reached. + // Finally, correct the code to fix the problem -// =============> write your new code here + +function sum(a, b) { + return a + b; +} + +console.log(`The sum of 10 and 32 is ${sum(10, 32)}`); \ No newline at end of file diff --git a/Sprint-3/2-mandatory-debug/2.js b/Sprint-3/2-mandatory-debug/2.js index 57d3f5dc3..fe4f1043c 100644 --- a/Sprint-3/2-mandatory-debug/2.js +++ b/Sprint-3/2-mandatory-debug/2.js @@ -1,7 +1,8 @@ // Predict and explain first... // Predict the output of the following code: -// =============> Write your prediction here +// I predict that all three console.log statements will show 3 +// because the function uses the global variable num, which is 103. const num = 103; @@ -14,11 +15,24 @@ console.log(`The last digit of 105 is ${getLastDigit(105)}`); console.log(`The last digit of 806 is ${getLastDigit(806)}`); // Now run the code and compare the output to your prediction -// =============> write the output here + +// The output is: +// The last digit of 42 is 3 +// The last digit of 105 is 3 +// The last digit of 806 is 3 + // Explain why the output is the way it is -// =============> write your explanation here +// The getLastDigit function does not have a parameter. +// It always uses the global variable num, which has the value 103. +// Therefore, the arguments 42, 105 and 806 are ignored. +// The last digit of 103 is 3, so the function returns 3 every time. + // Finally, correct the code to fix the problem -// =============> write your new code here -// This program should tell the user the last digit of each number. -// Explain why getLastDigit is not working properly - correct the problem +function getLastDigit(number) { + return number.toString().slice(-1); +} + +console.log(`The last digit of 42 is ${getLastDigit(42)}`); +console.log(`The last digit of 105 is ${getLastDigit(105)}`); +console.log(`The last digit of 806 is ${getLastDigit(806)}`); \ No newline at end of file diff --git a/Sprint-3/3-mandatory-implement/1-bmi.js b/Sprint-3/3-mandatory-implement/1-bmi.js index 58b1085f1..3c1194c43 100644 --- a/Sprint-3/3-mandatory-implement/1-bmi.js +++ b/Sprint-3/3-mandatory-implement/1-bmi.js @@ -17,3 +17,7 @@ function calculateBMI(weight, height) { // return the BMI of someone based off their weight and height } +function calculateBMI(weight, height) { + const bmi = weight / (height * height); + return bmi.toFixed(1); +} \ No newline at end of file diff --git a/Sprint-3/3-mandatory-implement/2-cases.js b/Sprint-3/3-mandatory-implement/2-cases.js index 5b0ef77ad..ea3e06366 100644 --- a/Sprint-3/3-mandatory-implement/2-cases.js +++ b/Sprint-3/3-mandatory-implement/2-cases.js @@ -14,3 +14,6 @@ // You will need to come up with an appropriate name for the function // Use the MDN string documentation to help you find a solution // This might help https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase +function toUpperSnakeCase(str) { + return str.toUpperCase().replaceAll(" ", "_"); +} \ No newline at end of file diff --git a/Sprint-3/3-mandatory-implement/3-to-pounds.js b/Sprint-3/3-mandatory-implement/3-to-pounds.js index 10754da73..4495267b3 100644 --- a/Sprint-3/3-mandatory-implement/3-to-pounds.js +++ b/Sprint-3/3-mandatory-implement/3-to-pounds.js @@ -1,6 +1,23 @@ -// In Sprint-1, there is a program written in 3-mandatory-interpret/3-to-pounds.js +function toPounds(penceString) { + const penceStringWithoutTrailingP = penceString.substring( + 0, + penceString.length - 1 + ); -// You will need to take this code and turn it into a reusable block of code. -// You will need to declare a function called toPounds with an appropriately named parameter. + const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); -// You should call this function a number of times to check it works for different inputs + const pounds = paddedPenceNumberString.substring( + 0, + paddedPenceNumberString.length - 2 + ); + + const pence = paddedPenceNumberString + .substring(paddedPenceNumberString.length - 2) + .padEnd(2, "0"); + + return `£${pounds}.${pence}`; +} + +console.log(toPounds("399p")); +console.log(toPounds("50p")); +console.log(toPounds("1250p")); \ No newline at end of file diff --git a/Sprint-3/4-mandatory-interpret/time-format.js b/Sprint-3/4-mandatory-interpret/time-format.js index c0dd9c9a5..c549c3217 100644 --- a/Sprint-3/4-mandatory-interpret/time-format.js +++ b/Sprint-3/4-mandatory-interpret/time-format.js @@ -15,24 +15,28 @@ function formatTimeDisplay(seconds) { return `${pad(totalHours)}:${pad(remainingMinutes)}:${pad(remainingSeconds)}`; } -// You will need to play computer with this example - use the Python Visualiser https://pythontutor.com/visualize.html#mode=edit +// You will need to play computer with this example - use the Python Visualiser // to help you answer these questions // Questions // a) When formatTimeDisplay is called how many times will pad be called? -// =============> write your answer here +// pad will be called 3 times. // Call formatTimeDisplay with an input of 61, now answer the following: // b) What is the value assigned to num when pad is called for the first time? -// =============> write your answer here +// The value assigned to num is 0. // c) What is the return value of pad when it is called for the first time? -// =============> write your answer here +// The return value is "00". -// d) What is the value assigned to num when pad is called for the last time in this program? Explain your answer -// =============> write your answer here +// d) What is the value assigned to num when pad is called for the last time in this program? Explain your answer +// The value assigned to num is 1. +// The last call is pad(remainingSeconds), and when the input is 61, +// remainingSeconds is 1. -// e) What is the return value of pad when it is called for the last time in this program? Explain your answer -// =============> write your answer here +// e) What is the return value of pad when it is called for the last time in this program? Explain your answer +// The return value is "01". +// num is converted to the string "1". Because it has fewer than 2 characters, +// the while loop adds a "0" to the beginning, producing "01". \ No newline at end of file diff --git a/Sprint-3/5-stretch-extend/format-time.js b/Sprint-3/5-stretch-extend/format-time.js index 32a32e66b..11a6a6685 100644 --- a/Sprint-3/5-stretch-extend/format-time.js +++ b/Sprint-3/5-stretch-extend/format-time.js @@ -1,25 +1,50 @@ // This is the latest solution to the problem from the prep. // Make sure to do the prep before you do the coursework -// Your task is to write tests for as many different groups of input data or edge cases as you can, and fix any bugs you find. +// Your task is to write tests for as many different groups of input data +// or edge cases as you can, and fix any bugs you find. function formatAs12HourClock(time) { const hours = Number(time.slice(0, 2)); + const minutes = time.slice(2); + + if (hours === 0) { + return `12${minutes} am`; + } + + if (hours === 12) { + return `12${minutes} pm`; + } + if (hours > 12) { - return `${hours - 12}:00 pm`; + return `${hours - 12}${minutes} pm`; } + return `${time} am`; } -const currentOutput = formatAs12HourClock("08:00"); -const targetOutput = "08:00 am"; -console.assert( - currentOutput === targetOutput, - `current output: ${currentOutput}, target output: ${targetOutput}` -); - -const currentOutput2 = formatAs12HourClock("23:00"); -const targetOutput2 = "11:00 pm"; -console.assert( - currentOutput2 === targetOutput2, - `current output: ${currentOutput2}, target output: ${targetOutput2}` -); +// Morning +console.assert(formatAs12HourClock("08:00") === "08:00 am"); + +// Midnight +console.assert(formatAs12HourClock("00:00") === "12:00 am"); + +// Just after midnight +console.assert(formatAs12HourClock("00:30") === "12:30 am"); + +// Before noon +console.assert(formatAs12HourClock("11:59") === "11:59 am"); + +// Noon +console.assert(formatAs12HourClock("12:00") === "12:00 pm"); + +// Afternoon +console.assert(formatAs12HourClock("13:00") === "1:00 pm"); + +// Evening with minutes +console.assert(formatAs12HourClock("20:30") === "8:30 pm"); + +// Late evening +console.assert(formatAs12HourClock("23:00") === "11:00 pm"); + +// End of the day +console.assert(formatAs12HourClock("23:59") === "11:59 pm"); \ No newline at end of file diff --git a/Wireframe/README.md b/Wireframe/README.md index b1712c4b3..068b696c1 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -13,6 +13,7 @@ ## Task + ![Wireframe](./wireframe.png) Using the provided wireframe and resources, write a new webpage explaining: diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..76e1eb249 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,66 @@ - - - - Wireframe - - - -
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

-
-
+ + + + + Developer Essentials + + + + +
+

Developer Essentials

+

Important tools and concepts used in web development.

+
+ +
+
- -

Title

+ Illustration representing a README file +

What is a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file explains important information about a project. It + helps people understand what the project does, how to set it up, + and how to use it.

- Read more + + Read more +
-
- - - + +
+ Illustration representing a website wireframe +

What is a wireframe?

+

+ A wireframe is a visual plan of a webpage. It shows where content + such as images, headings, text and links will be positioned before + the final design is created. +

+ + Read more + +
+ +
+ Illustration representing a Git branch +

What is a branch in Git?

+

+ A branch in Git allows developers to work on changes separately + from the main version of a project. Those changes can later be + reviewed and merged. +

+ + Read more + +
+ +
+ + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index aca09e1cc..84dc90c19 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -1,8 +1,112 @@ -/* - (Suggestion) Use a top-down approach when applying CSS: - 1. Lay out the top-level elements:
,
,