This exercise is designed to allow you practice and apply the concepts and techniques taught in class.
Upon completion of this exercise, you will be able to:
- Properly structure a webpage using basic HTML tags (head, body, headings, paragraphs, images, and lists)
- Create and link an external CSS stylesheet with an HTML document.
- Use id and class selectors to apply CSS styles to elements on a webpage.
- Display images in a webpage using HTML image tags and CSS
backgroundproperty. - Submit completed work using Git and GitHub by creating a pull request.
We have only learned the very basics today with HTML and CSS, so what the heck we can really build, right? Wrong, we can build some cool stuff already, and we are going to do just that.
We all have to eat (at least, we should), so let's make some handy recipe pages. We are going to be recreating an Apple Pie recipe. As an extra step, we prepared a French Onion Soup recipe as well.
Cloning something that already exists is the best way to get better at frontend development, so check out the deliverable below to see what we are expecting.
Some starter code is already provided, so you can jump right into it.
- Fork this repo
- Clone this repo
- Make sure you use
classandidselectors throughout your exercise. Remember, only use type selectors if you want to modify every element of that type - Use a single external CSS stylesheet to style all pages
- Use the images provided to construct the appropriate elements on the page:
- The background with a picture of the apple pie
- The recipe servings / nutrients section
- The prep section
Upon completion, run the following commands:
$ git add .
$ git commit -m "done"
$ git push origin master
Create Pull Request so your TAs can check up your work.
You will be working in the apple-pie folder. There you will find all the files, images, and text content needed to create the page. The text is in the index.html, and a CSS file is created in styles/style.css.
Please find a screenshot of the expected results below:
If you feel you need more practice, you can keep working on the french-soup exercise. There you will find the expected-result.md file where you can see what is expected from you to build. This folder has the same structure as the apple-pie one so follow the same steps.
Happy coding! ❤️
I am stuck in the exercise and don't know how to solve the problem or where to start.
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.
How can I style an ordered list ol to use parentheses (e.g., 1), 2) ) instead of dots?
You can use CSS counters to style an ordered list (ol) element to use parentheses (e.g., 1), 2) ). Here's how to do it:
- First, you need to remove the default list style
- Next, you need to create a custom list counter using the
counter-incrementproperty. - Last step is to use the
::beforepseudo selector to set the new style for the list markers using the custom list counter.
ol {
/* 1. Remove the default list style */
list-style: none;
}
ol > li {
/* 2. Create a custom list counter */
counter-increment: listcounter;
}
ol > li::before {
/*3. Set the new style for the list markers */
content: counter(listcounter) ")";
}This will remove the default list style, create a new counter called listcounter, and style the list markers to use parentheses and the current value of the listcounter counter.
For more information on CSS Counters check: MDN - Using CSS counters
How do I center align HTML text elements?
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
How do I center align HTML block elements?
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;.
How do I center align an HTML image element?
There are a few ways you can center align an image element.
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.
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.
I am unable to push changes to the repository. What should I do?
There are a couple of possible reasons why you may be unable to push changes to a Git repository:
- You have not committed your changes: Before you can push your changes to the repository, you need to commit them using the
git commitcommand. 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- 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 -vIf 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 may want to make a copy of the code you have locally, to avoid losing it in the process.