[Challenge] Create your ideal day's schedule in VS Code

Code Challenge, July 20, 2020

Every month, we feature a new challenge related to the Monthly Feature’s theme. For this month’s theme VS Code For You, the challenge is:

Create your ideal day schedule in VS Code!

Challenge Rules:

  • You must incorporate the HTML elements and attributes introduced in this lesson: HTML Tables.
  • You must use a minimum of three (3) CSS properties introduced in this lesson: CSS Visual Rules.
    Suggestion: add 3 colors, a font-family of your choosing, and at least 2 different font-sizes.
  • You must code this in your text editor, preferably VS Code to stay on the monthly feature theme but not mandatory.
  • Originality and readability of your code (make it your own and use style conventions and comments to keep things legible).

Use all of these HTML Elements and Attributes:

Table Row
<tr> </tr>

Table Data
<td> </td>

Table Header
<thead> </thead>

Table Body
<tbody> </tbody>

Table Heading
<th> </th>

Table Footer
<tfoot> </tfoot>

Table
<table> </table>

rowspan how many rows that particular cell should span within the table

colspan how many columns that particular cell should span within the table

Choose a minimum of 3 CSS Properties:

font-family is a property that defines the typeface of an element

font-size is what controls the size of text displayed

text-align is a property that places text in the left, right, or center of its parent container

color defines the color of the text

background-color defines the color behind the text

Resources:

HTML Tables (lesson)
HTML Tables Cheatsheet
Learn CSS Visual Rules (video)
CSS Visual Rules cheatsheet
How to Push Code to GitHub (video)
List of VS Code extensions with descriptions
Creating gists

Deadline for Prize Submission:

August 3, 2020 at 11:59 pm ET

Prize:

1 month of Pro

The winner will be the one who uses all of the elements, attributes, and CSS properties–– ie. how you use the HTML elements and attributes and CSS properties to format your ideal day’s schedule.

Strongly encouraged but not mandatory: peer review one other person’s code and provide feedback!

Once you’re done…

Share in a post below. Two options for sharing your project:

Option #1: Take a screenshot of your finished project in a browser and include a link to your GitHub gist so we can see your code.
Option #2: Upload your project to GitHub and include a link to your project.

Do we have to choose a minimum of 3 css properties or maximum of 3 css properties?
also, does the winner get a free month of pro subscription like lasts months challenge?
Are we confined to the css properties that you mentioned or can we also use other css properties such as width and height?

2 Likes

Thank you for asking! Yes, minimum of three. I’ve revised the post to include that.

Yes!

You may use other CSS properties.

1 Like

Thanks for the clarity!

1 Like

Hi @lilybird!

I’ve coded my schedule on Codepen. You can check it out here.

I’ve also exported it as a gist here.

It’s been fun to code and play around with the design. Thanks for the challenge :grinning:

Cheers!

6 Likes

So fun! Thanks for sharing, @icalvo! :sunglasses:

2 Likes

Pretty sure I can’t enter as a mod, haha, but this was fun regardless! :slight_smile:

The CSS is… a little all over the place.

The page is, for now (until I remove it), available here. There may be a delay in loading if the server has to spin up, it’s a free dyno so it’s not on 24/7.

3 Likes

It is pretty basic but here is mine!

I loved working on it! Thanks for the challenge.

By the way the “Fit in somewhere” is the summary of a list, not something I am attempting to do :wink:

I am thinking I might keep working on it, perhaps make an actual calendar.

You can see the files here.

3 Likes

Thank you for participating in July’s code challenge! @icalvo @thepitycoder @8-bit-gaming

I’m absolutely delighted to see each of your ideal day’s schedule screenshots – it really livens up the thread! :blush:

The winner of this challenge is: @icalvo

You’ve met code requirements for this challenge: all of the HTML elements and attributes and CSS properties have been used and formatted properly. :tada:

2 Likes

Congrats, @icalvo! :+1: :partying_face:

Just checked mine again… so far I’m lucking out with the random backgrounds!

2 Likes