Introducing CSS

Landing page landing page

In comes CSS. Styling a webpage seems to be important.

This project is a simple landing page created as part of the Odin Project curriculum. It demonstrates various key coding concepts and techniques in HTML and CSS.

Key Coding Concepts

HTML Structure

  • Semantic HTML: The project uses semantic HTML elements like <header>, <footer>, <div>, <ul>, and <li> to structure the content meaningfully.
  • Responsive Design: The HTML includes meta tags to ensure the page is responsive and adapts to different screen sizes.

CSS Styling

  • Flexbox: The layout is primarily managed using CSS Flexbox, which allows for flexible and responsive design. Key properties include display: flex, justify-content, and align-items.
  • Custom Fonts: The project imports and uses the “Roboto” font from Google Fonts to enhance the visual appeal.
  • Button Styling: Custom styles are applied to buttons, including border-radius, background color, padding, and text color.
  • Color Scheme: The project uses a consistent color scheme with specific colors for background, text, and buttons to maintain visual coherence.
  • Box Model: Proper use of padding, margin, and border properties to create spacing and alignment.
  • Media Queries: Although not explicitly used in the current CSS, the project is designed to be easily extendable with media queries for further responsiveness.

Images

  • Image Embedding: The project includes images using the <img> tag with appropriate src, alt, width, and height attributes to ensure accessibility and proper display.

Typography

  • Font Sizes and Weights: Different font sizes and weights are used to create a visual hierarchy and improve readability.
  • Text Alignment: Text alignment properties are used to center and justify text content appropriately.

Miscellaneous

  • CSS Comments: Comments are used in the CSS file to explain the purpose of specific styles and sections.
  • HTML Comments: HTML comments are used to provide context and structure within the HTML file.

Project Structure

  • index.html: The main HTML file containing the structure of the landing page.
  • style.css: The CSS file containing styles for the landing page.
  • images/: A directory containing image assets used in the project.
#HTML #CSS

Read Next

Introducing JavaScript

An etch-a-sketch board that was my first dive into interactivity with the user.

Basic HTML

My first public website utilizing basic HTML was a list of three recipes. No CSS. No JavaScript. No React. Every <li> painstakingly manufactured for each item. Can you imagine?