This exercise allows you to practice and apply the concepts and techniques taught in class.

Upon completion of this exercise, you will be able to:

• Develop a fully responsive webpage using the provided designs as a guide.

• Use CSS media queries to adapt the page layout to different screen sizes.

• Use Flexbox to layout and position elements on a webpage dynamically as either rows or columns.

• Use the CSS position property to position elements on a webpage.

• Display images on a webpage and make them responsive according to the viewport size.

• Submit completed work using Git and GitHub by creating a Pull Request.

  
  

  ---

Back to top

Back to top

Back to top

Back to top

If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions.

For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources.

Once you have a clear understanding of the problem, you will be able to start working toward the solution.

Back to top

To center align HTML text elements, you can use the text-align property and set it to center. This property can be applied to any inline or block-level element.

Here is an example of how you can use the text-align property to center align multiple text elements:

HTML

<div>
  <h2>This is a title</h2>

  <p>This is some text in here</p>
</div>

CSS

/* CSS */

p {
  text-align: center; /* Center align all p elements */
}

h2 {
  text-align: center; /* Center align all h2 elements */
}

This will center align all p and h2 elements within the parent div.

For more information, check: W3C: Centering Things

Back to top

To center align a block-level element, such as a div, h1, etc., you can use the margin property and set it to auto. This will center the element horizontally within its parent container.

Here is an example of how you can do this:

HTML

<section>
  <div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
  </div>
</section>

CSS

/* CSS */

div {
  width: 500px;
  margin: 0 auto;
}

This will set the width property of the div to 500 pixels and we set the left and right margins to be equal by using margin: 0 auto;.

Back to top

There are a few ways you can center align an image element.

1. Align an image using text-align

To center an image element in HTML, you can use the text-align property on the parent element, such as div. Example:

HTML

<div>
  <img src="https://placehold.co/300x150.png" />
</div>

CSS

div {
  text-align: center;
}

This will center align all the children elements within the section element, including the img element.

2. Align an image as a block element

The other way is converting the image into a block element and using margin: 0 auto. Here is an example:

HTML

<section>
  <img src="https://placehold.co/300x150.png" />
</section>

CSS

img {
  display: block;
  margin: 0 auto;
}

This will center the image horizontally within the parent section element. The display: block property is used to make the image a block-level element, allowing the margin: 0 auto property to work. The margin: 0 auto property sets the left and right margins to be equal, centering the element within its parent container.

Back to top

Example:

.container {
  display: flex;
  justify-content: center; /* Center elements horizontally */
}

You can also use the align-items property and set it to center to vertically center align the elements within the Flexbox container.

Example:

.container {
  display: flex;
  justify-content: center; /* Center elements horizontally */
  align-items: center; /* Center elements vertically */
}

For more information and an interactive Flexbox guide, check: An Interactive Guide to Flexbox

Back to top

To change the header of an HTML page from having one column to having two columns using Flexbox, you should do the following in your CSS:

1. Use the display property and set it to flex.
2. Add the flex-direction property and set it to column to arrange the elements in a column.
3. Add the justify-content property to align the elements horizontally
4. Use the align-items property to align them vertically.

header {
  display: flex;
  flex-direction: column; /* Arrange elements in a column */
  justify-content: space-between; /* Align horizontally */
  align-items: center; /* Align vertically */
}

To make the header responsive and change it to a two column layout on screens that are wider than 800 pixels, use a media query and set the flex-direction property to row:

@media (min-width: 800px) {
  header {
    flex-direction: row;
  }

  /* Change the width of nested div elements */
  header > div {
    width: 50%;
  }
}

The header will maintain a single-column layout on smaller screens, but on screens larger than 800 pixels wide, it will change to a two-column layout.

Back to top

When using media queries to create a responsive layout, it is recommended to start with the default styles for mobile (smaller) screens and then use media queries at the end of your stylesheet to apply styles for each increasing viewport size.

There are a few possible reasons why your media query styles may not be properly displayed on your browser.

1. Where applicable, check that you already have default styles for mobile screens. These styles should be placed at the beginning of your stylesheet before your media queries.
2. Ensure you have placed your media queries at the end of your stylesheet after your regular styles. This is because media queries are applied after regular styles, so if you place them before your regular styles, they will be overridden.
3. Ensure you have the correct syntax in your media query. The correct syntax is @media (expression) {...}.
4. Make sure that you are using the correct media query expression. For example, if you are trying to target screens that are wider than 800 pixels, you should use the min-width in your expression, like this: @media (min-width: 800px) {...}.

For more information on CSS media queries, check: MDN: Beginner's guide to media queries

Back to top

There are a couple of possible reasons why you may be unable to push changes to a Git repository:

1. You have not committed your changes: Before you can push your changes to the repository, you need to commit them using the git commit command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder:

git add .
git commit -m "Your commit message"
git push

2. You do not have permission to push to the repository: If you have cloned the repository directly from the main Ironhack repository without making a Fork first, you do not have write access to the repository. To check which remote repository you have cloned, run the following terminal command from the project folder:

git remote -v

If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first and then clone your fork to your local machine to be able to push the changes.

Note: You should make a copy of your local code to avoid losing it in the process.

Back to top