Skip to content

Commit fbb7e09

Browse files
committed
feat: Web Design Ruiles jonasschmedtmann#10 - Part 1: Elements and Components.
1 parent 0607acd commit fbb7e09

File tree

3 files changed

+81
-60
lines changed

3 files changed

+81
-60
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
theory-lectures-v2-BEST.pdf
2+
theory-lectures-v2-SMALLER.pdf

README.md

Lines changed: 5 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,6 @@
1-
# Course Material and FAQ for "Build Responsive Real-World Websites with HTML and CSS"
1+
## Inspiration web design website
22

3-
This repo contains starter files and final code for all sections and projects contained in the course.
4-
5-
Use starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**!
6-
7-
👇 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 👇
8-
9-
## FAQ
10-
11-
### Q1: How do I download the files?
12-
13-
**A:** If you're new to GitHub and just want to download the entire code, hit the green button saying "Code", and then choose the "Download ZIP" option. If you can't see the button (on mobile), use [this link](https://github.com/jonasschmedtmann/html-css-course/archive/master.zip) instead.
14-
15-
### Q2: I'm stuck! Where do I get help?
16-
17-
**A:** Have you actually tried to fix the problem on your own? Have you compared your code to the final code? If you failed fixing your problem, please **post a detailed description of the problem to the Q&A area of that video over at Udemy**, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help there.
18-
19-
### Q3: What VSCode theme are you using? What about extensions and settings?
20-
21-
**A:** I use [One Monokai](https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai) in this course. [Here is the complete VS Code setup for this course](vscode-setup.md).
22-
23-
### Q4: Can I see the final version of the Omnifood project?
24-
25-
**A:** Sure! Here you go: [Omnifood](https://www.omnifood.dev).
26-
27-
### Q5: Where can I find the coding challenge solutions?
28-
29-
**A:** They are all on codepen, in [this collection](https://codepen.io/collection/7b5e288cb64df1ecc5da8d7a0e78c007?grid_type=list).
30-
31-
### Q6: Where is the resources page you keep mentioning?
32-
33-
**A:** It's on my website at <https://codingheroes.io/resources>. You can subscribe for updates 😉
34-
35-
### Q7: Videos don't load, can you fix it?
36-
37-
**A:** Unfortunately, there is nothing I can do about it. The course is hosted on Udemy, and sometimes they have technical issues like this. Please just come back a bit later or [contact their support team](https://support.udemy.com/hc/en-us).
38-
39-
### Q8: Videos are blurred / have low quality, can you fix it?
40-
41-
**A:** Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).
42-
43-
### Q9: I want to put these projects in my portfolio. Is that allowed?
44-
45-
**A:** Absolutely! Just make sure you actually built them yourself by following the course, and that you understand what you did. What is **not allowed** is that you create your own course/videos/articles based on this course's content!
46-
47-
### Q10: I love your courses and want to get updates on new courses. How?
48-
49-
**A:** First, you can subscribe to my email list [at my website](http://codingheroes.io/resources). Plus, I make important announcements on twitter [@jonasschmedtman](https://twitter.com/jonasschmedtman), so you should definitely follow me there 🔥
50-
51-
### Q11: How do I get my certificate of completion?
52-
53-
**A:** A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the "Your progress" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).
54-
55-
### Q12: Can you add subtitles in my language?
56-
57-
**A:** No. I provide professional English captions, but Udemy is responsible for subtitles in all other languages (automatic translations). So please [contact the Udemy support team](https://support.udemy.com/hc/en-us) to request your own language.
58-
59-
### Q13: Do you accept pull requests?
60-
61-
**A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. However, please feel free to add an issue if you found one.
3+
- https://land-book.com/
4+
- https://onepagelove.com/
5+
- https://www.awwwards.com/
6+
- https://pageflows.com/

starter/06-Components/note.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
## From elements to webpage
2+
3+
Elements --> Components --Pattern--> Layouts --> Webpage
4+
5+
1. Use common elements and components to convey your website's information
6+
7+
2. Combine components into layouts using common layout patterns
8+
9+
3. Assemble different layout areas into a complete, final page.
10+
11+
### Gallery Index: Elements, sectiions, Patterns
12+
13+
#### A. Elements
14+
15+
1. Text
16+
2. Button
17+
3. Images
18+
4. Input elements
19+
5. Tags
20+
21+
#### B. Components
22+
23+
1. Breadcrumbs
24+
- Show how deep this page is (like folder explorer)
25+
2. Pagination
26+
3. Alert and status bars
27+
4. Statistics
28+
5. Gallery
29+
6. Feature box
30+
- Detail about products with some images and descriptions.
31+
7. Preview and profile cards
32+
- Preview some profile/products (with links to see more details)
33+
8. Accordion
34+
- Hiding information, only show more information when user clicks on it. (frquently used in FAQs)
35+
9. Tabs
36+
- Hiding information, only switch information when clicked, using the same display area to show data.
37+
10. Carousel
38+
- Hiding information, only switch information when clicked on the arrow (left-right), using the same display area to show data.
39+
11. Customer testimonials
40+
- Show reviews of the products from the customers
41+
12. Customer logos
42+
- Build trust in customers, where this products has been used by.
43+
13. Featured-in logos
44+
- Also build trust in customers, where this products has been featured in.
45+
14. Steps
46+
- Show customer how product actually works.
47+
15. Forms
48+
- For user to enter their information
49+
16. Tables
50+
- Display comparison information, display some tabular data
51+
17. Pricing tables
52+
- Display comparison information in product's price.
53+
18. Modal windows
54+
- Marketing/Advertising some stuff
55+
- Show form for user to login/signup to the service.
56+
57+
#### C. Section Components
58+
59+
1. Navigation
60+
2. Hero section
61+
3. Footer
62+
4. Call-to-action section
63+
5. Featuer row
64+
65+
#### D. Layout Patterns
66+
67+
1. Row of boxes or cards
68+
2. Grid of boxes or cards
69+
3. Z-pattern
70+
4. F-pattern
71+
5. Single-column
72+
6. Sidebar
73+
7. Multi-column/magazine
74+
8. Asymmetry/Experimental

0 commit comments

Comments
 (0)