Dive into our comprehensive HTML & CSS tutorial that includes hands-on exercises, insightful tips, and ideas to elevate your web development skills.
This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online.
Topics Covered in This HTML & CSS Tutorial:
Coding CSS, Tips & Ideas
Exercise 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
-
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.
-
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.
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.
