code icon

CSCI 1720

Intermediate Web


Lab 1 - Review

  1. On your external drive, create a folder named your_etsu_id.csci1720.net, if you haven't already. Inside that folder, make a new subfolder named labs. Inside the labs folder, make a final subfolder named lab1
  1. Download lab1.zip and save it to your labs/lab1 folder
  1. Extract the contents of lab1.zip to your labs/lab1 folder
Remember, using 7-Zip, we can right-click the file in Windows File Explorer, mouse down to 7-Zip, and select 'Extract Here,' which bypasses that pesky extra subfolder that often creeps into our work when we're using .zip archives
extracting files
Extracting Files with 7-Zip
  1. In Windows File Explorer, navigate to your labs/lab1 folder. Right-click the folder and select 'Open as Brackets Project.' This will launch Brackets and your folder will be opened as the current project
I'm assuming here that you have already installed Brackets on your system. If you haven't, go to Brackets.io and follow the installation instructions there to install it
Brackets Project
Brackets Project File Tree
Your file tree won't include the 'images' folder -- I changed the lab a little bit
  1. One nice feature of Brackets, in addition to the file tree, is its many extensions. Click the extensions button on the right -> extensions button
  1. Enter 'Custom Work' in the search bar. Click 'Install.' In the options dialog that appears, uncheck 'move Toolbar to side bar' and check 'Show tooltip (horizontal tabs)'
extension options
Selecting Options for Custom Work extension
  1. Open your working files by double-clicking index.html and css/style.css
You can see that the new extension displays the working files as tabs across the top, which simplifies toggling between them

HTML

  1. Open index.html and css/style.css by double-clicking each
working in brackets
Open Working Files
  1. Starting with index.html, complete the comment block, replacing the prompts with the correct information (I know our section # isn't 201, but just ignore that)
  1. Uncomment Line #18 (we'll link to the font in the CSS file)
Google Fonts has changed their API (again) - getting the links for custom fonts requires a couple more steps, which I'll go over with you. For now, just use the one provided
  1. Proceed down the file, completing the embedded instructions as you go
Where you're instructed to add images, link to the images on the class website. For example, the source for the first image will be: src='https://csci1720.net/labs/lab1/images/tolkien.jpg'
  1. Once you've completed the changes in index.html, click the 'Live Preview' button on the right -> live preview button. This will launch the page in your default browser (hopefully, NOT IE or Edge!)
page view
HTML completed, still needs CSS

CSS

  1. In Brackets, navigate to your labs/style.css page
  1. Again, the instructions are embedded in the page, so work through the page, making changes where indicated
I've included prompts (this time) for each set of rules that we need to add to our styling. So (this time) all you need to do is enter the values that are provided in the comments
  1. As you make changes to your CSS, refer back to the browser (reloading, if necessary, but Brackets usually reloads the page when you save changes to the file) to see how the new rules affect the display of the page
Your final product should look something like this:
final page
Final Product
final page
Final Product

Wrapping Up

  1. The remainder of the instructions for logging in to your account, creating the lab folder, uploading your files, and viewing them from the server are included in the comments at the bottom of labs/style.css, so I won't retype them here
  1. Once you have the page displayed in your browser, Ctrl+click the two icons in the lower right corner to validate your work. We won't be using the validation tool as much this semester, for reasons I'll explain later
  1. Once your work is error free, copy the URL of the page (the server URL, not the local one - the first characters should be 'http://', not 'file://') into a new text document. Save the document as lab1.txt and upload it to the Lab 1 D2L Dropbox folder

Have a nice day 😊