-
Notifications
You must be signed in to change notification settings - Fork 0
/
Notes
80 lines (59 loc) · 4.26 KB
/
Notes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
# Flexbox website build
In this project, you’ll be using flexbox to design and build the layout for a company’s homepage.
You can choose to build a new homepage for an existing company or imagine your own dream company!
1.
You’re going to build a company homepage for a real or imagined company.
You’ll get to decide exactly what content to include for this company,
but you should at least include:
- A title and logo or splash image.
- A mission statement or brief description of the company.
- A list or set of images and titles representing the product or products of the company.
- A section describing some of the company’s employees or teammates.
- If you want, you can tour our example site for inspiration or to see how we used flexbox.
Your site will probably look very different from ours, and that’s great
2.
Your project should use flexbox styling for layout. Aim to use flexbox’s advantages,
such as easy horizontal and vertical positioning, flexible element flows as the page size
changes, and great styling for repeated elements.
In our example project, we used flexbox to:
- Create a centered navbar at the top of the page.
- Create a flexible display of company products that changes from a
more grid-like list to a column list as the page shrinks.
- Create a flexible display of company employees.
- Our example site is not an elaborate use of flexbox–we’re sure you can
come up with other uses of flexbox in your layout, such as taking advantage
of flex-grow or flex-shrink.
4.
Your page should also use custom styles for other properties,
such as colors, fonts, and other layout properties such as borders and padding.
Our example site uses:
A simple color scheme using CSS named colors, but yours can be more elaborate with hexadecimal, RGB, or HSL colors.
Fonts from the Google Fonts API.
Custom images. A great source for project images when you’re practicing web design is Unsplash
# Repsonsive Website build
In this project, you’ll be building your own club group page that will
dynamically respond as you adjust the size of your screen.
- In this project, you’ll build a webpage for a local club.
- You can base it on real-life organization you belong to or make one up!
- You’ll get to choose everything about your page: the club name, the page layout and styling,
any images that you want to use, and more! You can check out our example site for some inspiration
and experiment with what elements are responsive. We’ll provide the full code for this site in the
solution section at the end of this project.
A helpful resource for finding beautiful images for your sites is Unsplash.
Your project should demonstrate many of the responsive design tools you learned.
In our example project, we use percentages and relative units, such as em and rem,
in our CSS to size and position page elements. We also made our website responsive
by incorporating media queries to resize elements based on the size of the screen.
# Possible responsive design concepts to demonstrate:
- Making images toggle to certain percentages in terms of width after a certain minimum screen size.
- Using a @media rule to change page layout and behavior based on size breakpoints.
- Employing responsive units em and rem to size and space elements with width and padding.
DOM JS
The document keyword grants access to the root of the DOM in JavaScript.
The DOM Interface allows you to select a specific element with CSS selectors by using the .querySelector() method.
You can access an element directly by its ID with the .getElementById() method which returns a single element.
You can access an array of elements with the .getElementsByClassName() and .getElementsByTagName() methods, then call a single element by referencing its placement in the array.
The .innerHTML and .style properties allow you to modify an element by changing its contents or style respectively.
You can create, append, and remove elements by using the .createElement(),.appendChild() and .removeChild() methods respectively.
The .onclick property can add interactivity to a DOM element based on a click event.
The .children property returns a list of an element’s children and the .parentNode property returns the element’s closest connected node in the direction towards the root