PROGRAMMING FOR THE WEB: CSS
TASK 2 - STYLE CONTACT FORM

Google Fonts

Google Fonts is a free library of web fonts that you can easily incorporate into your websites. Using custom fonts can significantly enhance the visual appeal and readability of your web pages.

To use Google Fonts:

Visit fonts.google.com and choose a font.
Click the "+" icon to select the font styles you want.
Copy the provided <link> tag into your HTML's <head> section.
Use the font-family in your CSS.

CSS Transitions

CSS transitions allow you to change property values smoothly over a specified duration. This creates a more polished, animated effect when elements change state (like on hover).

Key aspects of transitions:

property: Specifies which CSS property to transition.
duration: How long the transition takes.
timing-function: The speed curve of the transition.
delay: Optional time before the transition starts.

CSS Pseudo-classes and Hover Effects

Pseudo-classes in CSS are used to define special states of elements. The :hover pseudo-class is particularly useful for creating interactive effects.

Common pseudo-classes include:

:hover - when the mouse is over the element
:active - when the element is being clicked
:focus - when the element has keyboard focus
:first-child - the first element among a group of sibling elements

Visual Enhancements

CSS offers various properties for visual enhancements that can make your designs more appealing and modern. E.g.

Box Shadow: Creates a shadow effect around an element.
Border Radius: Rounds the corners of an element.
Opacity: Makes an element transparent.
Text Shadow: Adds a shadow to text.

Task 2: Style Your Contact Form

Now that you've learned some some more advanced CSS concepts, let's apply them to the contact form page you created previously.

Use Google Fonts:
E.g. Choose two complementary fonts (e.g., one for headings, one for body text)
Create a cohesive colour scheme
E.g. Define a primary, secondary, and accent color from a nice palette.
Style the team member section:
Create visually appealing cards for each team member.
Style the contact form:
E.g. Ensure form elements are clearly visible and easy to use.
Style the submit button to stand out.
Use CSS techniques for visual enhancement:
E.g. Apply consistent rounded corners where appropriate.
Use box shadows to add depth.
Implement subtle transitions or animations for interactive elements.
Ensure adequate spacing and alignment throughout the page

Instructions:

Open your project-16-html folder using VS Code
Fetch any changes using GitHub in the terminal. E.g. git fetch
If there are any changes, we need to pull them. E.g. git pull
You will re-use the task2.html file from last project.
Create the task2.css file using the terminal. Hint: touch

Remember to commit and push your code when done! Here are the terminal commands to do so:

Include any new files to be commited. E.g.
git add task2.css
Commit your changes with a meaningful message:
git commit -am "Your message here"

Note: The -a flag automatically stages all modified files before committing, -m is to add a message.
Push your changes to GitHub:
git push origin main

Version control software such as GitHub is a huge part of Software Engineering and Web Development. It allows you to keep track of your progress, revert to older versions, collaborate with others, and access your code through the cloud from anywhere.

Page updated

Report abuse

PROGRAMMING FOR THE WEB: CSSTASK 2 - STYLE CONTACT FORM