Before we begin, make sure to fork and clone this repository as we did yesterday:
- Click the Fork button at the top right of the screen to make your own copy of the repository
- Clone it as we did before:
cd ~/Desktop
git clone https://github.com/meet-projects/y2s19-css-meetx.git
cd y2s19-css-meetx
-
Open hello.html and create a page with a header, two paragraphs, and at least one link.
-
Open style.css and create a style file such that the background color is blue and all text is white.
-
In your HTML file, add this somewhere inside the
<head>:
<link rel="stylesheet" type="text/css" href="style.css">
-
Use a CSS tag selector to change the color of all links.
-
Add a list of six favorite foods to your website. Use the
<ul>tag to accomplish this. -
Use CSS class selectors to make vegetarian foods one color and non-vegetarian foods a different color.
-
Use a CSS id selector to give one element on your page a different background color.
-
Using Google and/or w3schools, find out what the following properties do.
- font-family
- font-size
- Organize your page:
- In
hello.html, make the header a div and give it a class name of "title". - Put the rest of your content (paragraphs and links) in a
<div>with a class of "content". - You should by now have divs with"title" and "content" classes, let's now create a new
<div>with a class of "sidebar" between the title and content class divs. Put some text or links in it! - Lastly, put the "content" and "sidebar" classes in another
<div>with a class of "container".
If you're confused, look at the lecture slide with the title "Lab 3: Hints".
-
Open
style.css. Give the sidebar a light background color of your choosing. -
Make the title banner have a height of 60px, and a width of 100%.
-
Give the
containerclass theposition: relativeproperty. -
Give the sidebar and main content classes
position: absolute;andtop: 0px;Have the sidebar be positioned on the left margin of the page, and the main content be positioned 200px from the left. -
Make it so the sidebar is exactly wide enough to touch the main content, using the
widthproperty. -
Give the container a height of 1000px.
- This is because the container has only absolutely positioned <div>s inside it, which means it has zero size by default.
-
Now, give the sidebar a height of 100%, to have it go all the way down the page.
-
Lastly, use the inspector on your browser (right-click on the page, then click "Inspect Element") to remove the
position: relative;property from thecontainerclass. Notice how the position of the sidebar and main content changes.
-
Open
lab2-centeringin your browser, we've added some extra content - and all of the content is color-coded. Check out the linked style sheet to see what element is what color. -
Your task in this lab is to make the webpage look like this:
-
But the catch is that you can only edit the style sheet!
-
Hint - to tell if something is block vs inline, look at the background color! Is the background just big enough to fit? Also, remember inline elements don't make newlines (so they would need a
<br>element for newlines). -
Hint - the text "Survey Time" is a
p, so it gets centered when you center allpelements. But unlike the otherp's, this one is inside adiv. How can you use advanced selectors to un-center this element? Remember, what is the left-margin of something not centered?
- Go have some fun with selectors here
Edit exercise.html for this portion of the lab
- Create a table layout using bootrstrap grid that includes 3 types of animals of your choice. The table layout should look similar to this for all types of screens:
| Name | Image |
|---|---|
| Cat |  |
| Red Panda |  |
| Dolphin |  |
- Show your work to an instructor or TA!
Bonus Open the website you made then right click and inspect element. As you notice, the image isn't compatible with the screen size and can sometimes get out of the borders of the column that includes it. Google how to fix that. (hint: you need to make the image's width compatible with its parent)
Edit exercise.html for this portion of the lab
- Make a carousel that displays the images of the animals you listed previously.
- Add a "Primary" Button with the text Next, and a "Secondary"Button with the text "Previous"
- Show all your work to an instructor or TA
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent