ICE Challenge Assignment

1 Open the Files

Download and unzip the Prophet Cards Zip and save the prophet_cards folder in ice folder. Open in VS code.

2 Convert Design to Code

In oaks.html, create the html and css code according to the ProphetCard_wireframe.png in prophet_cards folder.

What I Learned

I learned how to put links into words using html code. I also learned how to curve borders using css code.

1 Open the Files

Download and unzip the Apostle Spotlight Zip and save the apostle_spotlight folder in ice folder. Open in VS code.

2 Convet Design to Code

In apostles.html, create the html and css code according to the ApostleSpotlight_Design.png in apostle_spotlight folder.

What I Learned

I learned how to make the image shape of circle using css code. I also learned how to change the outline of the image when it’s hovered using css code.

1 Open the Files

Download and unzip the Favorite Devo Zip and save the favorite_devo folder in ice folder. Open in VS code.

2 Tables of Favorites

In favdevo.html, write the html code for a table with 4 columns for Speaker, Title, Location, and Year. Add 3 rows and include appropriate information about favorite devotional.

3 Form to Add More

After the table, write the html code for a form that collect 4 pieces of information that could be used to add another devotional to the table. The form just needs to make them look good and doesn’t need to function.

4 Style the Table and Form

Write down css code to style the table and form.

What I Learned

I learned how to make table and form using html code. I also learned how to style table and form using css code.

1 Open the Files

Download and unzip the Valentines Page Zip and save the valentines folder in ice folder. Open in VS code.

2 Style the Page

With the html code already given, add css code in styles.css to color it and style the page for the holiday. Make it look different from everyone else but do not change the html code.

What I Learned

I learned how to make the image a shape of heart using css code. I also learned how to put borders around the body and to style the borders using css code.

1 Open the Files

Download and unzip the Grid Flags Zip and save the grid_flags folder in ice folder. Open in VS code.

2 Create the Flags with CSS Grid

With the html code already given, write down css code to color the flags and create Denmark, Finland, and Benin flags. For bonus, create the html and css code for Italy and Central African Republic flags.

What I Learned

I learned how to make the star and to put on top of the flag using both html and css code. I also learned how to color the flags using css grid code.

1 Open the Files

Download and unzip the positioning Zip and save the positioning folder in ice folder. Open in VS code.

2 Solve the Challenges

With the html code already given, write down css grid and flex code according to the images for each activity. Pay attention to hints for each activity.

What I Learned

I learned how to make gaps between the grids using css code. I also learned how to change the position of the layers using css code.

1 Open the Files

Download and unzip the Gallery Zip and save the gallery folder in ice folder. Open in VS code.

2 Test it Out

Open the gallery.html in the browser and see how the images load.

3 Optimize the Images

Change the image size o the big images using a photo editor like Photoshop, Adobe Express, or Photopea. Save the small images into images/small folder. Also, shrink the file size of the big images using the same photo editor and override the images in the big folder.

4 Update the Gallery

Change the src attribute of each image to point to the small size version od the images. Keep the link to the big images.

What I Learned

I learned how to change the size of the file and image using Adobe Express. I also learned how to create an overlay image title.

1 Open the Files

Download and unzip the Signup Zip and save the signup folder in ice folder. Open in VS code.

2 Style the Form

Change the html and css code in signup.html to match the image given.

3 Checkout the Javascript

Fill out the form and click submit. Study the javascript in signup.html to see if it make sense.

What I Learned

I learned how to put a shadow in the text using css code. I also learned how to use Javascript to make the form work.