Explore the ins and outs of HTML and CSS through a tutorial focusing on styling a webpage. Gain insights on how to add your own stylistic flair to a webpage, making it both attractive and interactive.
Key Insights
- The tutorial focuses on styling 'Fish and Fowl: The Amazing Animal Blog', an exercise project that previously centered on adding semantic section tags.
- Getting started involves previewing ‘semantic-elements-partially-styled.html’ from the ‘Structural Semantics’ folder in a browser and then opening it in a code editor.
- The tutorial challenges learners to add personality to the structurally complete but visually lacking page using CSS skills.
- Several tips and ideas for the exercise include modifying page colors, making section headers stand out with different font sizes, font families or colors, removing default bullet styles for lists, and making navigation horizontal rather than stacking.
- Other suggestions include giving links interactive style with pseudo-classes, using Google Web Fonts, putting styles in an external style sheet, giving the wrapper rounded edges using border-radius, and testing the mobile view using Chrome’s Inspector.
- The tutorial provides a comprehensive approach to learning, combining theory with practical application aimed at equipping learners with skills applicable to real-world web development.
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.
Build a Web Page
-
Mark Up Structure
Semantic HTML first — header, nav, main, footer.
-
Style Layout
Flexbox for one-dimensional, Grid for two-dimensional layouts.
-
Style Components
Buttons, cards, forms — reusable design system pieces.
-
Responsive Tweaks
Media queries for tablet and mobile breakpoints.
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.
