Skip to main content
Dan Rodney/2 min read

Challenge: Designing Your Own Styles

Build a Web Page

1

Mark Up Structure

Semantic HTML first — header, nav, main, footer.

2

Style Layout

Flexbox for one-dimensional, Grid for two-dimensional layouts.

3

Style Components

Buttons, cards, forms — reusable design system pieces.

4

Responsive Tweaks

Media queries for tablet and mobile breakpoints.

Master HTML & CSS at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate teaches HTML, CSS, and JavaScript — the complete front-end foundation.

Dive into our comprehensive HTML & CSS tutorial that includes hands-on exercises, insightful tips, and ideas to elevate your web development skills.

Topics Covered in This HTML & CSS Tutorial:

Coding CSS, Tips & Ideas

Exercise Preview

fluid layout preview

Exercise Overview

In a previous exercise you added semantic section tags to Fish and Fowl: The Amazing Animal Blog. You didn’t style the page though, so now is your chance to add your own stylistic flair with CSS.

Getting Started

  1. Preview semantic-elements-partially-styled.html from the Structural Semantics folder in a web browser.

    Notice that we added some very basic styling to the page. The webpage is structurally complete, but it lacks personality. Your challenge is to use what you’ve learned about CSS to improve the visual appearance.

  2. In your code editor, open semantic-elements-partially-styled.html from the Structural Semantics folder.

    Take a moment to review the code and make note of the different semantic sections.

  3. Using CSS, give the webpage some character! Continue reading this exercise for some ideas of what you can do.

Tips & Ideas

Here are a few ideas you can try:

  • Modify the page colors.
  • Make the section headers stand out with different font sizes, font family, or color.
  • Remove the default bullet style for the list.
  • Try making the navigation horizontal rather than stacking.
  • Give the links interactive style with pseudo-classes.
  • Use Google Web Fonts.
  • Put your styles in an external style sheet and link it in the webpage.
  • Give the wrapper rounded edges using border-radius.
  • Test the mobile view using Chrome’s Inspector and adjust how the page scales.