Closed github-learning-lab[bot] closed 3 years ago
In your CSS file:
.body{}
) display
to flex
This will make sure all elements fit the screen appropriately.
justify-content
and align-items
attributes to center your items on the y axis and the x axis respectively. min-height
to 100vh
so that height of your content will always be relative to the size of the screen.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;
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.
After you're satisfied with the body of your page, define a selector that styles elements in the clock
class.
![Screen Shot 2021-01-15 at 5.49.29 PM](../../images/Screen Shot 2021-01-15 at 5.49.29 PM.png)
Set a width and a height for the box that's going to hold your time
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.
background-color
and border
attributes for these items respectivelySet your display
to flex
Center your text using align-items
and justify-content
You need to do this again because these attributes in the body only centered the box on your page; repeating the two bullets above in the clock section will center your text within the box.
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.
You can add as many bells and whistles to this clock that you please. I increased the font-size here and added a box-shadow to add some depth to my clock.
![Screen Shot 2021-01-15 at 6.17.26 PM](../../images/Screen Shot 2021-01-15 at 6.17.26 PM.png)
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.
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.
Lastly, you'll define a timezone selector to style the labels and buttons used for your timezone selector. Similarly to the way you defined the clock styles using the unique id from the clock div, preceded by a '.', you'll define the radio button style class using whatever class you used to group together your timezone buttons. I grouped my radio buttons and labels in a div with the class set to "timezone"
so my CSS file looks like this:
![Screen Shot 2021-01-15 at 6.29.34 PM](../../images/Screen Shot 2021-01-15 at 6.29.34 PM.png)
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.
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!
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!
Nothing was confusing this week. It was fun to work with the basics of CSS.
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.
To style our webpage, we must link a css file to our HTML file.
link
tag inside the head of your html filerel
attribute to"stylesheet"
and thehref
attribute to"style.css"
.Next, open a new file in your week 2 folder and save it as
style.css
. It's important that your file name matches the one you typed in your HTML document in its link tag'shref
attribute, as this will be what links your two files.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 isdanzelo1
so my branch name for week 2's first task (this assignment) would bedanzelo1-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.