Module 2: Project foundations

Overview

In this reading, you will recap semantic HTML. The revision topics in this reading are from the HTML and CSS in-depth course from the Front-End developer program, with a particular focus on the Semantic and Meta tags lesson in the HTML in-depth module.

What are semantic tags?

Semantic tags are a way to describe the meaning of your web page through tags. For example, older, non-semantic HTML used the following HTML structure to style a main menu section of a web page:

<div>    
  <ul>
    <li><a href="/home">Homepage</a></li>        
    <li><a href="/about">About Us</a></li>
    <li><a href="/blog">Blog</a></li>  
  </ul>
</div>

The above structure is not signaling that it’s a menu for navigation in any way. Instead, to create a more semantic HTML structure, you replace the <div> element with the HTML5 <nav> element.

<nav>    
  <ul>
    <li><a href="/home">Homepage</a></li>        
    <li><a href="/about">About Us</a></li>
    <li><a href="/blog">Blog</a></li>  
  </ul>
</nav>

The code example above is a better way to signal intent. Let’s explore why.

The nav versus div elements

In the example above, the <nav> element describes the meaning of the particular section of the webpage as the element itself is meant to be used to contain some kind of navigation. However, a <div> tag is just there to group any collection of HTML elements when there is no better (more semantic) way to group them. This means that the <div> tag is less semantic or less meaningful. In other words, it conveys less meaning about what exactly the given HTML snippet’s role and purpose is. The <nav> tag is more semantic because it signals that the given structure is meant to be used as some sort of navigation menu. This is a simple but effective example for reminding you what semantic HTML is all about.

Metadata and meta tags

To further revise the purpose of semantic HTML, please revisit the following lesson items from the HTML and CSS in-depth course:

• Metadata
• Metadata cheat sheet

It’s important to remember that <meta> tags are tags that contain data about a given web page. They are used to define SEO-relevant data, responsive and mobile behavior of a given web page, encoding and more.

The role attribute

The role attribute is another tool you have at your disposal when writing semantic HTML. The role attribute describes the role of an element in a web page. This attribute is global meaning you can use it on any element. While many elements have implicit roles, you can make them explicit by adding a role attribute.

<a href="/book" role="button">Book a table</a>

Conclusion

In this reading, you revisited the concept of semantic tags in HTML and the role attribute. Following this quick revision of semantic HTML, including meta tags, you should be ready to complete the exercise in the next lesson item, which involves setting up the HTML document for the Little Lemon web app.

Overview

Using semantic HTML and understanding how it works in React is the next fundamental step in the process of creating the reserve-a-table web functionality for Little Lemon. In this exercise, you will organize your JSX code so that it follows HTML5 best practices.

To revisit using semantic HTML in webpages, you may find it helpful to refer to the following lesson items in the HTML and CSS in-depth course now or as you progress through the exercise:

• Semantic tags
• Semantic HTML cheat sheet

Scenario

By completing this exercise, your React app will use a semantic HTML structure to better describe the intention and semantics of the document. As you have learned, semantic HTML is important for describing the meaning, or semantics, of your HTML document. It also assists accessibility software, such as screen readers, in describing your content to users with disabilities.

Instructions 

Step 1: Set up the initial semantic structure

• Open your project in Visual Studio Code.
• Open the App.js file.
• The App component’s root element uses a div element. As this is not a semantic tag, replace it with a React fragment.

Tip: Remember, a fragment starts with a <> tag and ends with a </> tag.

• Review your UI/UX and decide how each of the sections of the design will be represented using semantic tags.

Tip: Use the header, nav, main and footer semantic tags.

• Inside the fragment, add the semantic tags.

Step 2: Break the sections down into React components

Now that you have planned your semantic structure, it is important to decide which sections will be dynamically updated and if those sections should be child components of the App component.

Tip: For simplicity, you can create a component for each semantic element you added to App.js.

• Create a JavaScript file for each semantic element that will be a React component, for example, Header.js, Nav.js, Main.js and Footer.js.
• In each component, return the semantic HTML element.
• In App.js, replace the semantic tags with the corresponding child components, for example <header></header> will be replaced with <Header/>.

Step 3: Add the logo and navigation elements

The initial components are now set up. You will now add the details for the logo and navigation.

• Add the Little Lemon logo to the appropriate React component using the <img> tag.
• Add the website navigation to the Nav component. It is important to add a hyperlink for each key page of the website based on your mockup.

Tip: Use a <ul> element and add an <li> element for each <a> hyperlink.

Step 4: Add the footer content

Review your design and add the necessary HTML elements to the footer component.

Conclusion

By completing this exercise, you have now set up the semantic foundations to build the rest of your application. As you progress through the course, ensure that you apply the appropriate semantic HTML elements to the content that you are building.

Overview

In this reading, you will revisit the concepts of Open Graph protocol and Open Graph meta tags.

What is Open Graph protocol (OGP)?

Open Graph protocol is an internet protocol that was built by Facebook. It’s a structured way to describe the content of a web page. Before OGP, there were many ways to turn a web page into a rich object, ready to be shared on social media. The OGP brought about a single, simple technology for making this possible. 

A review of meta tags and OGP

Meta tags have many purposes, but the most important are:

• Sharing your web pages on social media
• Improving your website’s search engine optimization using your code (often referred to as technical SEO)

Just like regular HTML, Open Graph meta tags can be validated. Most web and IT professionals know that SEO is a moving target, just like most other technologies on the web. However, for the most part, SEO is not directly affected by the use of meta tags. Additionally, meta tags are very important because they allow you to increase conversions because they affect the way that shared content looks on social media sites.

However, keep in mind that poorly formatted meta tags might end up in, for example, a user sharing a link to your web app, but instead of a relevant image showing up in the shared preview, some other image displays. Although this other image still exists on your site, it’s different from the one that you’d like to show up when your web app’s URLs are shared on social media.

Meta tags examples

Here are a few specific examples of meta tags in use:

description

A meta description is a summary of what a given page is about.

<meta name="description" content="Get all your sports fishing equipment at One Place Fishing. Open Monday to Friday, 9 to 5, in the Great Lake area."/>

og:title

The og:title meta tag is there for you to give a title for your shared link or shared content.

<meta name="og:title" content="One Place Fishing"/>

og:description

A title is usually followed by a description, which is what the og:description meta tag is for.

<meta name="og:description" content="some description here"/>

og:image

The og:image meta tag specifies the image to serve when a link is shared on social media.

<meta name="og:image" content="https://example.com/one-place-fishing-store.jpg"/>

You can find out more information about the OGP and about how to use the Open Graph tags from the ogp.me website.

To re-iterate, meta tags are “tags about HTML tags”. In other words, they give some additional information about the web page itself. You might say that the Open Graph tags are a subset of meta tags, with this subset being specifically responsible for formatting previews to your web app’s content when its URLs are shared as links. What’s so great about the OGP is that it plugs into the existing system of meta tags in HTML5 and allows developers to seamlessly turn web pages into rich objects in a social graph.

Conclusion

You’ve revisited meta tags and the Open Graph protocol in this reading. You should now be prepared to add meta tags to your project as well as set up OGP.

Mark as completedLikeDislikeReport an issue

Overview

Building a website is an important part of marketing a business. Equally, word of mouth and social media are important for bringing in new customers. In this exercise, you will prepare the Little Lemon web app for search engines and social media platforms, by adding meta tags and setting up Open Graph protocol (OGP).

Scenario

The Little Lemon restaurant makes great food and the owners hope that happy customers will recommend the restaurant to others by sharing the website on social media. Potential customers may also try to find the website using popular search engines. It is an important task to make sure that the website is presented correctly on both search engines and social media platforms. In this exercise, you will add metatags and set up the Open Graph protocol (OGP) to help ensure the correct presentation of your project on these various platforms. You may find it helpful to refer to the following lesson items in the HTML and CSS in-depth course now or as you progress through the exercise:

• Metadata
• UX with meta tags
• Social media cards
• Setting up social media cards

Instructions

You will apply the following to the index.html file in your project.

Step 1: Add the appropriate description (meta tag)

Add your own description for your Little Lemon restaurant application:

<meta name="description" content="your text goes here"/>

Step 2: Add the og:title meta tag

Add the Open Graph’s title for your Little Lemon restaurant application, inside the double quotes in the content HTML attribute:

<meta name="og:title" content=""/>

Step 3: Add the og:description meta tag

Add your own description for your Little Lemon restaurant application, inside the double quotes in the content HTML attribute:

<meta name="og:description" content=""/>

Step 4: Add the og:image meta tag

Add your own Open Graph image for your Little Lemon restaurant application, inside the double quotes in the content HTML attribute:

<meta name="og:image" content=""/>

Conclusion

In this exercise, you prepared the Little Lemon web app for search engines and social media platforms using Open Graph meta tags. When the app is launched online, it will appear with the correct information for potential customers.

<article>

That’s correct. The <article> tag is a semantic HTML tag used to represent a standalone piece of content, such as a blog post or news article.

<h1>

That’s correct. The <h1> tag is a semantic HTML tag used to represent the main heading of a webpage or section of content.

<header>

That’s correct. The <header> tag is a semantic HTML tag used to represent the header of a webpage or section of content.

<table>

Give meaning to the content of a webpage or document.

That’s correct. Semantic tags give meaning to the content of a webpage or document by indicating the purpose or function of the content. This makes it easier for search engines and screen readers to understand the content and helps improve the overall accessibility of the webpage or document.

A protocol for describing the shared content on social media platforms

That’s correct. The Open Graph protocol is a protocol for sharing content on social media platforms. It allows developers to specify how content should be displayed when shared on social media sites such as Facebook.

<meta property="og:title" content="Example Web Page" />
<meta property="og:description" content="This is an example web page" />
<meta property="og:image" content="https://example.com/image.jpg" />

True

That’s correct. HTML meta tags provide information about a webpage, such as its title, description and keywords, to search engines and other web services. This information is used to help search engines understand the webpage’s content and improve its ranking in search results.

<meta name="description" content="This is a webpage about HTML meta tags">

description

That’s correct. The description tag is a valid HTML meta name used to specify a description of the content of a webpage.

viewport

That’s correct. This is a valid HTML meta name used to specify the viewport for a webpage. The viewport is the area of the webpage that is visible to the user and determines how the webpage is displayed on different devices.

og:title

That’s correct. The og:title is a valid Open Graph protocol (OGP) meta name used to specify the title of a webpage when it is shared on social media platforms.

<meta name="description" content="This is a webpage about HTML meta tags">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="HTML Meta Tags">

Here is a list of lesson items from the HTML and CSS in-depth course that may be helpful as you continue your learning journey. These resources provide some more in-depth information on the topics covered in this module.

Metadata cheat sheet

Semantic tags and why we need them

Semantic HTML cheat sheet

Semantic tags in action

Metadata

Overview

In this reading, you will recap CSS Grids in preparation for setting up a CSS grid in your Little Lemon web app project.

What is a CSS Grid?

CSS Grids are two-dimensional web page layouts that are responsible and compatible with various browsers. They are an alternative to Flexbox and tables. In a Grid Layout, columns are vertical tracks and rows are horizontal tracks.

Using CSS Grid layouts

You can use a CSS grid layout on any collection of elements on your web page. To do so, you need to use the display property and set it to the value of grid. You can think of the display: grid CSS property as sort of a switch that turns the grid display on.

Once you have the CSS grid activated, you can quickly define a simple grid by just using grid-template-columns and grid-template-rows properties.As a reminder, here’s an example of this, taken from the CSS Grids lesson item from the HTML and CSS in depth course, an earlier course in the Front-End developer program:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 2fr 1fr; 
}

The fraction unit

Let’s explore the above code snippet, remember that grids introduce a new unit, fr, which stands for fraction. The fraction unit is a quick way to divide your grid in a straightforward and versatile way. Remember that you can use fraction and pixel values interchangeably in both grid rows and grid columns.

The repeat function

Another really useful tool in the grid layout is the repeat CSS function, which allows you to repeat columns or rows so that the code itself is less repetitive. As an example, here’s how you’d re-write the above code snippet using the repeat function:

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: 2fr 1fr;
}

The first value given to the repeat function above is the number 3, meaning, there should be three columns in this grid. The second value is the width of each column in the grid – in this case, the width of each column is 100px.

The minmax function

Another useful function that you can utilize is the minmax function. In the example below, the grid-auto-rows property is used with a call to the minmax function, which sets the value for this grid’s rows to 150px each.

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-auto-rows: minmax(150px, auto);
}

More on using CSS Grids

It’s important to note that the HTML and CSS in-depth course has additional lesson items that describe how to use CSS grid in more depth. If you need to brush up on additional topics, please take your time to do it. The following links may be helpful.

• Grids and Flexbox cheat sheet
• Grid showcase
• Grid template area

Conclusion

In this reading, you revisited the topics of CSS Grid and Grid layouts. With this recap on CSS grids completed, you are now positioned well to complete the exercise in the next lesson item, Setting up the CSS Grid.

Overview

To build upon the wireframes you designed for the Little Lemon reserve-a-table web app functionality, your next task is to create the web app layout using HTML and CSS. In this exercise, you will use your CSS skills to code reusable sections of your app’s layout. The code you write in this exercise is one of many building blocks that you can use and reuse in different parts of your React app.

Scenario

Visitors to the Little Lemon website will be viewing the content on different devices, from small devices such as mobile phones to large devices like desktops and tablets. Therefore, the owners of Little Lemon have requested that the website is responsive. To achieve this you will need to implement the responsive column layout that you previously planned, using either a CSS Grid or Flexbox Layout. In this exercise, you will create the necessary CSS rules to allow for a responsive layout. You will apply these rules throughout the course. As you progress through the exercise, it may be helpful to revisit the following lesson items from the HTML and CSS in-depth course:

• CSS web layout
• CSS units of measurement
• Understanding Flexbox
• Basic Flexbox
• CSS Grids
• Grids and Flexbox cheat sheet

Instructions

Step 1: Set up the CSS rules

• Based on the mockup, decide if you will use a CSS Grid or Flexbox Layout
• Open the app.
• Based on the mockup, add the required CSS Grid or Flexbox rules to the file.

Tip: If you are unsure which rules to add, refer to the Grids and Flexbox cheat sheet lesson item.

Step 2: Apply the CSS rules to HTML elements

• Open the index.html file and apply the CSS rules to the HTML elements.
• Open your previously created component files and apply the CSS rules to the HTML elements.

Step 3: Verify that the HTML elements are positioned correctly

• Run your app using the npm start command
• Open the web browser and go to http://localhost:3000 to view the web app.
• Ensure that the elements are positioned correctly in the web browser
• Using the web browser developer tools to view the web page in responsive mode, ensure that the elements are positioned correctly on a mobile device.

Conclusion

By completing this exercise, the Little Lemon website’s visual layout will display correctly on different device sizes. This will provide a good user experience to visitors of the website.