Computing Basics

Computing Basics: HTML and CSS Fundamentals

Role

Industry

Duration

Computing Basics: HTML and CSS Fundamentals

Understanding the basics of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) is essential for UX designers to bridge the gap between design and development. Webflow, a no-code design tool, allows you to apply these concepts in a visual, intuitive way, making it ideal for this exercise.

Steps to Understand HTML and CSS Fundamentals

What is HTML?
- HTML is the structure of a webpage. It organizes content into elements like headings, paragraphs, images, and links.
- Example of an HTML tag: <h1>Hello World</h1>.
What is CSS?
- CSS controls the visual style of a webpage, including layout, colors, fonts, and spacing.
- Example of CSS code:
How Webflow Helps:
- Webflow visually applies the principles of HTML and CSS, allowing you to design without writing code.
- Every element you add in Webflow is translated into clean, responsive HTML/CSS code behind the scenes.

Computing Basics: HTML and CSS Fundamentals

Steps to Understand HTML and CSS Fundamentals

What is HTML?
- HTML is the structure of a webpage. It organizes content into elements like headings, paragraphs, images, and links.
- Example of an HTML tag: <h1>Hello World</h1>.
What is CSS?
- CSS controls the visual style of a webpage, including layout, colors, fonts, and spacing.
- Example of CSS code:
How Webflow Helps:
- Webflow visually applies the principles of HTML and CSS, allowing you to design without writing code.
- Every element you add in Webflow is translated into clean, responsive HTML/CSS code behind the scenes.

Exercise: Create a Basic Webpage Layout Using Webflow

Objective:

Design a simple webpage layout with the following components:

A Header with a logo and navigation menu.
A Main Section with a heading, paragraph, and an image.
A Footer with contact information.

Step-by-Step Instructions

Plan Your Webpage Layout
- Sketch the layout on paper or using tools like Figma, focusing on simplicity:
  - Header: Logo on the left, navigation links on the right.
  - Main Section: Title, short text, and an image beside each other.
  - Footer: Centered contact details.
Set Up Your Webflow Project
- Create a free account at Webflow and start a new project.
- Choose a blank canvas to design from scratch.
Design the Header
- Add a Div Block for the header.
- Inside the Div Block, place:
  - A Text Block for the logo (e.g., “My Site”).
  - A Nav Menu element with links like Home, About, and Contact.
- Use Webflow’s Flexbox to align items horizontally.
Build the Main Section
- Add a Section element and give it a class name (e.g., “Main Section”).
- Inside the section:
  - Add a Heading (e.g., “Welcome to My Website”).
  - Add a Paragraph with descriptive text.
  - Add an Image Block and upload an image.
- Use Webflow’s layout tools to arrange the content (e.g., place the image to the right of the text).

Create the Footer

Add another Div Block for the footer.
Inside the Div Block, add a Text Block for contact details (e.g., “Contact us at info@example.com”).
Center-align the text using Webflow’s alignment options.

Style Your Page with CSS Properties
- Select each element and customize its properties in Webflow’s style panel:
  - Header background color: Set a distinct color to differentiate it.
  - Font styles: Choose fonts, sizes, and colors for the text.
  - Spacing: Add margins and padding for better layout spacing.
Preview and Publish
- Use the Preview Mode to check how the layout looks and functions.
- Publish your design using Webflow’s hosting option to share it.

Expected Outcomes

A functional, visually appealing webpage layout that applies fundamental HTML and CSS concepts.
A live preview link to showcase the webpage.

Tips for Success

Keep it Simple: Focus on clean design and clear organization.
Practice CSS Styling: Use consistent fonts, colors, and spacing for a polished look.
Learn by Doing: Experiment with Webflow’s features to understand how changes affect the underlying HTML/CSS.

This exercise helps solidify your understanding of HTML/CSS basics while introducing a professional design tool like Webflow. It’s an essential foundation for UX designers collaborating with developers.

Create the Footer

Add another Div Block for the footer.
Inside the Div Block, add a Text Block for contact details (e.g., “Contact us at info@example.com”).
Center-align the text using Webflow’s alignment options.

Style Your Page with CSS Properties
- Select each element and customize its properties in Webflow’s style panel:
  - Header background color: Set a distinct color to differentiate it.
  - Font styles: Choose fonts, sizes, and colors for the text.
  - Spacing: Add margins and padding for better layout spacing.
Preview and Publish
- Use the Preview Mode to check how the layout looks and functions.
- Publish your design using Webflow’s hosting option to share it.

Expected Outcomes

A functional, visually appealing webpage layout that applies fundamental HTML and CSS concepts.
A live preview link to showcase the webpage.

Tips for Success

Keep it Simple: Focus on clean design and clear organization.
Practice CSS Styling: Use consistent fonts, colors, and spacing for a polished look.
Learn by Doing: Experiment with Webflow’s features to understand how changes affect the underlying HTML/CSS.