Building web skills requires hands-on practice with real code. The examples covered here—custom list bullets, merged table cells, frame layouts, and JavaScript array operations—represent techniques you'll encounter constantly in real projects. Each one teaches something essential about HTML structure or JavaScript logic.
Whether you're styling a product catalog, building a data grid, or processing user data, the fundamentals in this article form a foundation you can build on. Let's walk through each example and see what concepts they reinforce.
- Create styled lists using background images instead of default bullets
- Build tables demonstrating rowspan and colspan cell merging
- Design multi-frame page layouts with horizontal and vertical divisions
- Write JavaScript functions finding array minimum and maximum values
Custom List Bullets with Images
Standard HTML lists display plain bullets. To replace them with custom images, apply CSS to the list and its items. First, set list-style: none on the ul element to remove default bullets. Then add background-image, background-repeat: no-repeat, and padding-left to each li element. The image appears in place of the standard marker.
This technique works well for navigation menus, feature lists, or any interface where you want icons instead of generic bullets. You control the image size, position, and spacing through standard CSS properties.
Tables with Rowspan and Colspan
HTML tables support cell merging through two attributes. Colspan extends a cell horizontally across multiple columns. Rowspan extends a cell vertically across multiple rows.
Picture a four-row, four-column grid where the top-left cell spans two columns. Below it, the first cell in each row spans down three rows. The third row's second cell spans three columns. The fourth row's third cell spans two columns.
Building this requires careful planning. Place colspan="2" on the first cell of row one. Add rowspan="3" to the first cell of rows two, three, and four. Each merged cell reduces the total number of td elements needed.
These attributes appear in scheduling tools, pricing comparisons, and reports with grouped headers. The syntax is straightforward but requires attention to grid mathematics.
Frame Layout Concepts
Frames divided browser windows into independent sections containing separate HTML documents. A common layout uses horizontal splits with nested vertical divisions. The outer frameset defines rows, while nested framesets define columns.
Say you want a documentation viewer. The top frame holds navigation spanning full width. The bottom section splits into two columns: table of contents on the left, main content on the right. The right column further divides between the article body and footnotes.
Modern web development uses CSS Grid and Flexbox instead of framesets, which browsers no longer support. However, understanding hierarchical document structure helps when working with component-based frameworks where independent sections communicate through props or state.
Finding Array Min and Max
Array operations are fundamental JavaScript skills. A function finding minimum and maximum values uses a single loop, initializing both variables to the first array element, then comparing each subsequent element. This single-pass approach runs in O(n) time.
Modern JavaScript offers Math.min and Math.max with spread syntax for concise extreme value finding. However, the manual loop remains instructive and works identically across all environments.
Always handle empty arrays explicitly. Return a clear sentinel value rather than undefined to prevent downstream errors in your application.
Why This Matters
These examples cover territory every web developer navigates repeatedly. Custom bullets appear in navigation and feature displays. Merged cells build irregular grids in dashboards and reports. Frame concepts, while obsolete for page layout, illustrate architectural thinking useful in modern component systems. Array min/max operations process user data constantly.
The linear scan for min/max deserves attention. It outperforms sorting first, especially with large datasets. For arrays with millions of elements, the performance difference becomes noticeable. Also watch edge cases—empty arrays should return predictable values, not throw errors.
Modern frameworks abstract raw HTML, but underlying concepts remain essential for debugging, optimization, and situations where frameworks fall short.
What to Watch Next
Practice these fundamentals until they feel natural. Build each example by typing the code yourself rather than copying—writing forces engagement with the syntax. Once comfortable with basics, explore CSS Grid for layouts, and try array methods like reduce for more expressive min/max calculations.
Key takeaways
- Replace default list bullets with images using CSS background-image and list-style: none
- Plan merged table cells carefully to maintain proper grid structure
- Frame concepts translate to component architecture in modern frameworks
- Use single-pass loops for array min/max operations—handle empty arrays explicitly
Frequently asked questions
Are framesets still supported in HTML5?
No. The frameset, frame, and noframes elements are obsolete. Use CSS Grid or Flexbox for layout instead.
Can I use images as list bullets without CSS?
Not directly. CSS list-style-image is the standard approach. Older workarounds involved JavaScript, but CSS is the correct method.
How do I find min/max without writing a loop?
Use Math.min and Math.max with spread syntax: Math.min(…array). These methods loop internally but provide concise one-liners.
What happens if I don't handle empty arrays in min/max functions?
The function either crashes or returns undefined, both poor outcomes. Always return a predictable value for empty inputs.
Can colspan and rowspan be combined in the same cell?
Yes. A cell can have both colspan and rowspan attributes, extending both across columns and rows simultaneously.