Week 2

[github-learning-lab[bot]]

Task 1: Linking your CSS file

How to begin a CSS file and link it to your HTML file.

This week, we're going to take the HTML and JavaScript code we wrote last week and style our page using CSS to make it more aesthetically pleasing.

First, let's create a new folder to hold your files.

1. Create a new folder called week 2 within your orginal directory. You should now have two folders called "Week 1" and "Week 2"

2. Copy your index.html file from week 1 and paste it in your week 2 homework folder.

3. Open this folder in Visual Studio Code. You can do this by clicking "Open folder..." on VSC's "Welcome" page and selecting your path.

Once you have Visual Studio Code open, you can style your webpage.

First we must link a CSS file to our HTML file.

4. Add a link tag inside the head of your html file

5. Set the rel attribute of the link tag to "stylesheet", and its href attribute to "style.css".

   Having issues? Click me!

<link rel="stylesheet" href="styles.css"

6. Create a new file in your week 2 folder called style.css.
   • It's important that your file name matches the one you typed in your link tag's href attribute in your HTML file, as this will be what links your two files.

Task 1 Checklist:

• [x] Reference (href) to "styles.css" in your HTML file
• [x] Created a new file called "style.css"

Open a pull request for your code

Just as you did for your previous tasks, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task. For example, my GitHub username is danzelo1 so my branch name for week 2's first task (this assignment) would be danzelo1-2-1.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.

As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 2). A new comment should have appeared for your next task. This is where you'll find the instructions for task 2.

[github-learning-lab[bot]]

Task 2: Styling the body

In this task, we'll go over how to style the text in your body tag.

In your CSS file:

1. Define a body selector (.body{})

What is a selector?

#### CSS selectors are used to "find" (or select) the HTML elements that you want to style. ```css .body{ } ```

2. Inside the selector, set the display attribute to flex

   • This will make sure all elements fit the screen appropriately.

3. Set the justify-content and align-items attributes to center so your items are centered on the y axis and the x axis respectively.

4. You may also want to set the min-height to 100vh so that height of your content will always be relative to the size of the screen.

5. Inside the body, you can also change the color of the background, as well as the color, font, and size of your text.

   • I recommend using the font-family attribute with a few backup fonts in case your browser doesn't support your font of choice.

   • You can add back up fonts by following your font with a comma and another font family or type. My font-family line looks like this:

     font-family: "Trebuchet MS", Verdana, sans-serif;

Having issues? Click me!

```css body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 25px; background: #a5b8d9; color: #fff; } ```

At this point, your webpage should look something like this:

Task 2 Checklist:

• [x] Attributes that center your content
• [x] Stylized text for elements in your body

Open a pull request for your code

Just as you did for your previous tasks, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task. For example, my GitHub username is danzelo1 so my branch name for week 2's second task (this assignment) would be danzelo1-2-2.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.

As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (so this week would be week 2). A new comment should have appeared for your next task. This is where you'll find the instructions for task 3.

[github-learning-lab[bot]]

Task 3: Creating your clock

For the third task, we're going to begin designing a digital clock using some basic styling techniques.

After you're satisfied with the body of your page, you'll move on to designing your clock.

1. Define a selector that styles elements in the clock class.
   • This selector will style the div we created in the last assignment that prints the time on your screen.
   • If this div tag only has an id property, be sure to go back to your HTML file and add a class attribute set to "clock".

Within your .clock selector:

2. Set the width to 500px and height to 200px. This will define the rectangle in which the time is printed.

3. Add a background and a solid border using colors different from the screen's background so you can see what the box will look like.

   • Use the background-color and border attributes for these items respectively

4. Set the display to flex

5. Center the text using align-items and justify-content

6. You may also want to adjust the margins of your clock so that theres some space between the box and the form - I simply adjusted the left margin of my clock.

This is what my code looks like after these steps:

If your page doesn't look right, check this out:

```css .clock{ width: 500px; height: 200px; font-size: 90px; background: #102; border: 20px solid black; display: flex; align-items: center; justify-content: center; margin-left: 50px; } ```

Now, you may notice that my border appears slightly different than yours- this is because I used the CSS box-shadow tool to create some depth to my clock and add additional borders. This effect is in no way required, but if you'd like to learn more about it, click below!

Box-Shadow Tool (Optional)

 The first number in each line represents the x-offset which is the horizontal distance from which you want the object to appear. The second number is the y-offset - the vertical distance from which the box will appear. The third number is the blur radius - a larger blur radius will create a bigger shadow and vice versa. Lastly is the color. I used the rgba() tool to define my color. The first 3 numbers represent the amount of red, green, and blue in the color, respectively. The fourth number is the opacity on a scale from 0 to 1, with 0 being complete transparency and 1 being fully opaque. This tool can be very intimidating so I suggest using a box-shadow generator, such as [this one](https://html-css-js.com/css/generator/box-shadow/) and playing around with the options so that you can understand what's going on a little better and simply copy the code generated.

Task 3 Checklist:

• [x] A clock class selector
• [x] Custom colors and fonts for your clock
• [x] The time centered on your "digital clock"

Open a pull request for your code

Once again, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch.

As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week. A new comment should have appeared for your next task where you'll find the instructions for task 4.

[github-learning-lab[bot]]

Task 4: Styling your buttons

Now that you've styled your text and your clock, now's time to make any changes to your radio buttons that you'd like.

Lastly, you're going to style the labels and buttons used for your timezone selector.

Define a selector that targets your timezone elements.

1. Make sure that your radio buttons and labels are grouped in some way.
   • I recommend surrounding these elements with a div with its class property set to "timezone".
2. Then define a selector in your CSS file that targets these elements, like so:

If you're already satisfied with how your page looks because of how you styled the body, then this part is unnecessary, but I recommend you do some styling here to get a better hang of CSS attributes.

3. You can change the font-family, or the font-size, or even the font-color - use your creativitity with this task.

This is what my page looks like after this step:

Task 4 Checklist:

• [x] A timezone selector
• [x] Customization of timezone elements (optional)

Open a pull request for your code

Once again, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch.

As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. This is the last task for week 2, so you're all done!

[github-learning-lab[bot]]

Providing Feedback

What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated!

[3vil8unny]

Pretty straight-forward to follow instructions easy to follow. Maybe some more detail could be added about possible customisations within selectors, animations etc.

[github-learning-lab[bot]]

That's it for Week 2! Click here to move on to Week 3!