Question
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<img src=>
<h1>GREEN THUMB LANDSCAPING </h1>
<h2> transforming your yard, one bloom at a time!</h2>
<h2>HOME PAGE</h2>
<nav>
<ul>
<li>Home</li>
<li> <a href = "about.html">About</a></li>
<li> <a href = "service.html">Services</a></li>
<li> <a href = "portfolio.html">Portfolio</a></li>
<li> <a href = "contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<p>
Professional landscaping services are offered by Green Thumb Landscaping Services to both residential and business customers.
Green Thumb Landscaping Services is an environmentally conscious company that specialises in designing stunning outdoor areas that are both aesthetically
pleasing and sustainable.
</p>
<img src=>
<h3> GIVE US A CALL TODAY!!!!</h3>
</main>
<footer>
<nav>
<ul>
<li>Home</li>
<li> <a href = "about.html">About</a></li>
<li> <a href = "service.html">Services</a></li>
<li> <a href = "portfolio.html">Portfolio</a></li>
<li> <a href = "contact.html">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Create an external CSS Style Sheet and link all pages to it.
Identify appropriate selectors for the styling of web page elements.
Apply Decorative, Typographic & Layout styling to web pages using CSS for a desktop
solution.
Take advantage of the “Cascading” nature of CSS to style page elements with a minimum
number of selectors.
Use browser developer tools to assist with CSS.
Apply responsive styling for mobile phones using a mixture of relative values and at least
one Media Query.
1. Create an external style sheet in your website root folder.
2. Link all web pages to this style sheet.
3. Apply CSS rules to your page elements to style them how you want your pages to look.
4. Note that efficient CSS uses a minimum number of selectors to style the maximum number
of page elements across a web-site. So try and work efficiently.
5. You must apply CSS styling for positioning and layout of elements, typography and
decoration.
6. Note that a “desktop solution” means a screen width not narrower than 1024px. So
everything must look good in your browser when open on a standard desktop or laptop
computer screen.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<img src=>
<h1>GREEN THUMB LANDSCAPING </h1>
<h2> transforming your yard, one bloom at a time!</h2>
<h2>HOME PAGE</h2>
<nav>
<ul>
<li>Home</li>
<li> <a href = "about.html">About</a></li>
<li> <a href = "service.html">Services</a></li>
<li> <a href = "portfolio.html">Portfolio</a></li>
<li> <a href = "contact.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<p>
Professional landscaping services are offered by Green Thumb Landscaping Services to both residential and business customers.
Green Thumb Landscaping Services is an environmentally conscious company that specialises in designing stunning outdoor areas that are both aesthetically
pleasing and sustainable.
</p>
<img src=>
<h3> GIVE US A CALL TODAY!!!!</h3>
</main>
<footer>
<nav>
<ul>
<li>Home</li>
<li> <a href = "about.html">About</a></li>
<li> <a href = "service.html">Services</a></li>
<li> <a href = "portfolio.html">Portfolio</a></li>
<li> <a href = "contact.html">Contact Us</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Create an external CSS Style Sheet and link all pages to it.
Identify appropriate selectors for the styling of web page elements.
Apply Decorative, Typographic & Layout styling to web pages using CSS for a desktop
solution.
Take advantage of the “Cascading” nature of CSS to style page elements with a minimum
number of selectors.
Use browser developer tools to assist with CSS.
Apply responsive styling for mobile phones using a mixture of relative values and at least
one Media Query.
1. Create an external style sheet in your website root folder.
2. Link all web pages to this style sheet.
3. Apply CSS rules to your page elements to style them how you want your pages to look.
4. Note that efficient CSS uses a minimum number of selectors to style the maximum number
of page elements across a web-site. So try and work efficiently.
5. You must apply CSS styling for positioning and layout of elements, typography and
decoration.
6. Note that a “desktop solution” means a screen width not narrower than 1024px. So
everything must look good in your browser when open on a standard desktop or laptop
computer screen.
Answers
GPT 3.5
7. Use media queries to apply responsive styling for mobile phones. For example, you can set a maximum width for certain elements to adjust their size or layout on smaller screens.
8. Use browser developer tools to inspect and test your CSS styles. This will help you identify any issues and make adjustments as needed.
9. Make sure to use appropriate selectors for styling different elements of your webpage. This will help you keep your CSS organized and efficient.
10. Experiment with different CSS properties to enhance the visual appeal of your webpage. This can include colors, fonts, spacing, borders, and more.
Overall, make sure to have fun with your CSS styling and create a visually appealing and user-friendly website for Green Thumb Landscaping Services.
8. Use browser developer tools to inspect and test your CSS styles. This will help you identify any issues and make adjustments as needed.
9. Make sure to use appropriate selectors for styling different elements of your webpage. This will help you keep your CSS organized and efficient.
10. Experiment with different CSS properties to enhance the visual appeal of your webpage. This can include colors, fonts, spacing, borders, and more.
Overall, make sure to have fun with your CSS styling and create a visually appealing and user-friendly website for Green Thumb Landscaping Services.