Step 0 - Pre-requisites
In preparation for beginning this activity, it will be helpful to have the following skills or references handy.
- For this exercise, you will need to be familiar with how to use an IDE to do the coding (not WordPress). Make sure that you know how to work with the IDE to add external content like images and files, preview the file, and upload the contents to the web.
- For this exercise, you will need to know how to create headers, containers, classes, and IDs in HTML and how to format them in CSS.
- For this exercise, you will need to know how to check the responsiveness of a website using the code inspector.
Step 1 - Infographic with Gridlines
After completing this activity, you will have an HTML file where the content is organized into labelled containers. Refer to the example.
- Where will you find ideas for your infographic? Create or select an infographic.
- Examine the infographic. Where are the blocks of text? How you could you look at this infographic as a grid? As flexboxes? Draw lines on the infographic to represent this structure.
- How will you label these containers in the code? Name the boxes
- Hint: Refer to the "Using WordPress and Flex box layouts" activity to get a feel for what you are looking to accomplish.
Step 2 - HTML with Content Organized into Labelled Containers
After completing this activity, you will have an HTML file where the content is organized into labelled containers. Refer to the example below. After adding tags to organize sections, containers, classes, and IDs, you will then incorporate graphics and other content (as applicable) to the body of the HTML. Finally, you will have added fonts and a reference to the CSS file in the header.
Step 3 - HTML Layout with CSS Colorized Container
After completing this part of the activity, you will have an HTML infographic where the containers are colorized using CSS. The containers will have a background color, a border, and text as shown in the example below. You will then use this labeling to align and position the containers relative to each other and the content within the containers. At this time, you will then have an infographic that looks like the illustration in Step 1 except that it will be labelled and colorized. (Compare Step 3 to Steps 1 and 2.)
Step 4 - "Cleaned Up" HTML Infographic with CSS
After completing this part of the activity, you will have an HTML infographic where the code has been 'cleaned up' to remove the colorized labelling from the previous step and any unused fonts. And then you will have uploaded the content to the web and previewed it on a web browser if you have not already done so. Refer to the example below.
Step 5 - Responsive CSS
After completing this step, you will have an HTML page that is responsive through variable parameters, max width settings, break points, and other coding techniques.
Here is an example of a completed project - https://learningcenter.premierjones.com/css-infographic-challenge/index.html