Advanced table and style techniques

Let's create a web page containing your resume with the use of advanced tables, lists, and cool styles!

The goal

You create a nice page with your (or fictional) resume and learn the advanced techniques of working with tables and styles.

What you will learn

You not only will create a cool-looking resume page but will learn how to apply styles to the tables, use lists, change the background's look.

Preliminary material

Please refer to the very first project in this series that explains in detail how to create and work on a project: https://www.codingwolves.io/project/a179f0e9/simple-personal-page 

Before you start, get familiar with the basics of HTML and CSS (if you never tried them). We found these resources pretty clear:

You also may want to refresh your memory about some common principles of HTML and CSS:

This is also a good short introduction to HTML: https://www.geeksforgeeks.org/html-introduction/ 

We use the Fontawesome version 5.1 for icons and Google Fonts for the font.

For the brand icon styles (brand colors) please use this CSS file: https://github.com/CodingWolvesIO/assets/blob/main/HTML-CSS/brand-colors.css 

Instructions
  1. Create the project folder, add files, and include all links. The most detailed instructions on how to start any project can be found in Step 1 of the first project
  2. Add a table element to the page. Don't worry about styling now.
  3. Divide it into rows and cols you want to see, add the text data inside.
  4. For the experience or/and education section, add at least 2 merged rows inside. You should do it using the colspan attribute.
  5. Your table should contain at least one enumerated or unenumerated list; you can use it for listing your skills, technologies you worked with, or your projects.
  6. Start working on styling: select the main font (we use Google fonts), play with size, weight, color.
  7. By default, a browser adds padding and/or margins to the lists, so it may break the alignment - work on it.
  8. Decide on the tables' border. If you want just a partial border as we did in our example, create the classes, and add the corresponding classes to some rows and/or cells.
  9. Work on the background. We used the gradient background, so you can play with it right on the Mozilla's website (see the reference for a link).
  10. Make sure your table looks good everywhere. Due to the table's nature, it may be not possible to provide the fully responsive design form very small screens, but at least scrollbar should be available.
Note. If you see some styles override others and it's not the desired behavior, think about using the !important attribute as described in Mozilla's reference on the specificity (see the link in the Preliminary material section).
Additional ideas
  • Play with colors, fonts, sizes;
  • consider adding your own portrait or any other pictures.
Screenshots
Acceptance criteria
  1. The page should have one big table
  2. The table should look nice
  3. Don't use the default font and default table style, you should create them to override the original ones.
  4. The table should have at least one use of one of the attributes colspan or rowspan.
  5. The background should be designed using CSS only.
  6. All the elements should be aligned well.
No posts yet! Share your experience with this project, help others, ask and answer questions, get feedback