L13. Make a change you can check

Change the heading and introduction size, then check the edited page. Allow about 30 minutes and have the two working files from the previous lesson ready. First, keep a backup so you can restore the original appearance.

Olena decides that her name alone says too little. “Olena: simple things, every day” explains the theme of her work more clearly. The introduction will keep its wording but become slightly larger.

In class

The teacher will edit a heading, save it and reload the page. Together, we will compare the page heading with the tab title and check which text CSS enlarged.

Keep a copy of the working version

• Close extra tabs showing the page so you do not edit one copy while viewing another. In File Explorer, open Documents\AI-practice.
• Select personal-site, press Ctrl+C, then Ctrl+V. Rename the copy personal-site-backup; if that folder already exists, name the new one personal-site-backup-2. Keep the earlier copy.
• In the main personal-site folder, right-click index.html and choose Open with → Notepad. Press Ctrl+F and find <h1>. We will change the text between the opening and closing tags, leaving the tags themselves in place.

The HTML fragment in Notepad before editing:

<h1>Olena</h1>

The same fragment after editing:

<h1>Olena: simple things, every day</h1>

Press Ctrl+S. Switch to the browser and reload using the button beside the address, or Ctrl+R. The new heading should appear immediately. The browser tab may still show its old title: that comes from a separate <title> element, which we have not changed.

> [TRY]

> To check the difference, find <title> and change only the text between its tags to “Olena — learning projects”. Save and reload: the tab title changes, while the large page heading stays the same.

Ask the AI for one small edit

Next, we will enlarge the introduction. In the supplied example it has the class intro: a name CSS uses to find that paragraph. The other paragraphs should stay the same size.

• Open styles.css in Notepad. Copy its contents into a new message in the same conversation and add this prompt:

> [PROMPT]

> Here is my website’s current styles.css. Change only the font size of the .intro introduction from 21px to 23px. Keep every other property and rule. Show the exact old and new rule and explain the visible change in one sentence. If .intro is absent, tell me first. Do not rewrite the entire website.

Press the send button and wait for the answer.

• Find the new rule in the answer and compare it with the original. For the supplied example, the result below is CSS to save in place of the existing .intro rule:

.intro {
  max-width: 620px;
  font-size: 23px;
}

font-size sets the size of the letters; px means CSS pixels. max-width limits the paragraph’s width and has not changed. If your own generated page starts with a different size, change that value to 23px and retain the rest of the rule.

• Save the CSS and reload the page. The introduction should be larger; the project descriptions should retain their previous size. Narrow the window. The longer heading may take two or three lines, but it must stay within the page.

[[VIS:b5_site_revision]]

If the result is wrong

> [FIX]

> Can you see the edit in Notepad but not in the browser? Press Ctrl+S, then Ctrl+R. Check the browser’s address: it should point to the main personal-site folder, not the backup. To undo the edit, copy only the changed file back from the backup folder and reload.

Edit the existing .intro rule. Several rules for the same paragraph make it harder to find the property controlling its size.

Home practice

• Copy personal-site into a new neighbouring folder, personal-site-heading-home. Add an unused number if needed.
• Open the copy’s index.html in Notepad. Write a heading of up to seven words and change only the text inside <h1>. Save and open the file in a browser.
• Check a narrow window and the Projects link. In the copy’s heading-check.txt, record the old and new headings and your results. Success means the complete heading remains visible, the menu works and the main website is unchanged.

Self-test

• What does HTML change in this exercise, and what does CSS change?
• After editing, the heading occupies three lines in a narrow window. When is this acceptable?
• You changed h1, but the tab title stayed the same. Was the edit lost, and which element controls the tab title?

Terms

• CSS class: a name used to apply a presentation rule to selected elements.
• Rollback: returning to a previous working version.
• Side effect: a change outside the part you intended to edit.