Anuhaza / javascript-course-repo

https://lab.github.com/bitprj/javascript-with-html-and-css
0 stars 0 forks source link

Week 2 #7

Closed github-learning-lab[bot] closed 3 years ago

github-learning-lab[bot] commented 3 years ago

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.

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's href 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 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] commented 3 years ago

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:

This will make sure all elements fit the screen appropriately.

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;

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] commented 3 years ago

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, 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)

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.

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] commented 3 years ago

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'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.

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] commented 3 years ago

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!

Anuhaza commented 3 years ago

Nothing was confusing this week. It was fun to work with the basics of CSS.

github-learning-lab[bot] commented 3 years ago

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