JavaScript and interactive web pages

Try this

1. Open Notepad, type the HTML5 skeleton with the doctype, html (lang set to en), head and body elements, set the title to My First Page, save it as index.html in a new folder named website with All files as the save type and UTF-8 encoding, and open it in Chrome or Edge to check that the title shows on the browser tab.
2. In the same page, add an h1 heading with your name, two paragraphs about your favourite subject, an hr line between them, a br line break inside one paragraph and a comment that marks where the second paragraph starts; reload the page and confirm that the comment is not displayed.
3. Add a sentence containing the rupee sign ₹ and a few words in Hindi and check that they display correctly, then right-click any web page, choose View page source and write down five element names and two attributes you recognise.

Try this

1. Build a page about your town with one h1, three h2 sections and an h3 under one of them, write a paragraph in each section, use strong for one important warning and em for one stressed word, and put a postal address on three lines using br.
2. Add an unordered list of five things to carry to an exam, an ordered list of the steps to make tea with a nested list under one step, and change the ordered list to Roman numerals with its type attribute; then create contact.html and link the two pages to each other with relative links.
3. Save a photo in an images folder, show it with an img element that has descriptive alt text, width and height, then misspell the file name to see the alt text appear in place of the image; also add a link that jumps to a section by its id, an email link using mailto: and a phone link using tel:.

Try this

1. Make a marksheet table for five students with a caption, a thead row of Roll No, Name, Hindi, English, Maths and Total headings, a tbody with their marks, and a tfoot row in which the words Class average span the first two columns using colspan.
2. Create your weekly class timetable as a table with the periods down the first column and the days across the top, use rowspan to show a two-period practical as one tall cell and colspan to show the lunch break as one cell across all the days.
3. Build an admission enquiry form with a label for every control: text inputs for name and email, a tel input for phone, a date input for date of birth, radio buttons for morning or evening batch inside a fieldset with a legend, checkboxes for three subjects, a select for the city, a textarea and a submit button; make the name required, try submitting it empty, then leave out the action attribute so that the form sends its data back to the same page, set method to get, submit it filled in and read the name=value pairs added to the address bar.

Try this

1. Write a page for an imaginary electronics shop using header, nav with three links, main, two article elements for two products, an aside with a buying tip and a footer with the address, without using a single div.
2. Write a short page built only from div elements with classes such as menu, content, sidebar and bottom, then replace each div with the matching semantic element and check that there is exactly one main and that it is not inside header, footer, nav, article or aside.
3. Give one article its own header with the product name and a footer with the date it was added, place a figure with an image and a figcaption inside it, add a section with its own h2 that groups both products, and write a comment beside each article, section and aside explaining why you chose that element.

Try this

1. Create style.css, link it from the head of index.html with a link element, set the body font-family to "Noto Sans", Arial, sans-serif with a font-size of 1rem and a line-height of 1.6, then colour the h1 with a named colour, a hex code and an rgb() value in turn.
2. Give two paragraphs the class price and one heading the id offer, style them with .price and #offer selectors, add a nav a rule and an a:hover rule that changes the link colour, and style h1 and h2 together with one grouped selector.
3. Write two rules that give the same paragraph different colours, one using the element selector p and one using a class selector, predict which colour wins and check in the browser; then swap the order of the rules, and finally add !important to the element rule and note the result each time.

Try this

1. Style a .card with width 300px, padding 20px, a 5px solid border and margin 16px, check in the browser developer tools (F12) that it takes 350px of width, then add box-sizing: border-box and confirm that it becomes exactly 300px wide.
2. Give four boxes margins written with one, two and four values and label each box with the values you used, centre a box that has a fixed width with margin: 0 auto, and place a paragraph with a 20px bottom margin above one with a 30px top margin to see that the gap is 30px, not 50px.
3. Build a navigation bar with display: flex containing a logo, four links and a search box, use justify-content: space-between, align-items: center and gap: 12px, give the search box flex: 1, add flex-wrap: wrap and narrow the window to watch the items wrap onto a new line.

Try this

1. Lay out six product cards with display: grid, grid-template-columns: repeat(3, 1fr) and a 16px gap, make the first card span two columns with grid-column: span 2, then change the columns to 2fr 1fr 1fr and see how the space is shared.
2. Build a gallery of nine photos with grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)), add the rule img { max-width: 100%; height: auto; }, and drag the browser window from wide to narrow, counting how many columns fit at each width.
3. Write a mobile-first product page that shows one column by default, two columns from a min-width of 600px and four from 1024px, check that the viewport meta tag is in the head, then open device emulation with F12 and Ctrl+Shift+M and test it at 390px for sideways scrolling, readable text and buttons large enough to tap.