- View -> Editor Layout -> Two Columns
- Select your code file in the code tree, which will open it up in a new VSCode tab.
- Drag your assessment code files over to the second column.
- Great work! You can now see instructions and code at the same time.
In this exercise you will practice applying CSS rules to HTML elements.
- Define a CSS rule using an element selector.
- Define a CSS rule using an id selector.
- Define a CSS rule using a class selector.
- Define a CSS rule using a descendant selector.
- If you get stuck, apply the CSS rules one at a time and verify their behaviour is what you expect.
In this exercise you will practice applying CSS rules to HTML elements.
- Add photo.jpg to the webpage.
- Add your name as a heading to the webpage.
- Add an unordered list of your five favorite music artists.
- Add an ordered list of your top five favorite films.
- Add a hyperlink to your Facebook profile, or, meta.com.
- Style the webpage using CSS.
- Make sure that HTML tags are closed properly.
- Use a different heading type for your name.
- Remember the box model.
In this exercise, you will practice building a webpage using the Bootstrap Grid.
- Create a two-column food menu for Little Lemon.
- Set up the Bootstrap container.
- Display the Little Lemon logo in the top center of the webpage using Bootstrap.
- Display the food menu in two columns using Bootstrap Grid.
- Make sure to add your columns to row elements.
- Remember that Bootstrap uses a 12 column grid system.
In this exercise, you will practice adding Bootstrap components to a webpage.
- Update the Little Lemon website to use Bootstrap Components.
- Add a Badge component to the page to notify customers of the new falafel dish.
- Add an Alert component to the page to notify customers that the restaurant will be closed on New Year's Day.
- Add a Button component to the page with the text Order Online.
- Make sure to add your columns to row elements.
- Remember that Bootstrap uses a 12 column grid system.
- There are plenty of examples in the Bootstrap documentation.
In this graded assessment, you will revise your biographical page to use Bootstrap.
- Use Bootstrap to build your biographical page.
- Add a Bootstrap Grid to the page.
- Set up the grid so that the content will layout correctly on both mobile and desktop.
- Configure your photo to be responsive.
- Change the Meta profile link to use a Bootstrap button style.
- Remember the responsive breakpoints in Bootstrap.
- Use the correct infixes where appropriate.
- Component modifiers are specified using suffixes.
- Use the Browser Preview to check your progress.