Skip to content

Commit 2bdd9e6

Browse files
Jacknguyen4438Jacknguyen4438
committed
Make some crucial change for the course work base on the review.
1 parent 3769a15 commit 2bdd9e6

2 files changed

Lines changed: 135 additions & 108 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 85 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,99 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe-code blog for beginner</title>
7-
<link rel="stylesheet" href="style.css"/>
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe Basic knowledge</h1>
12-
<p>
13-
Hello and welcome to this programming blog, today you will learn about what is wireframe and why it so important in web development.
14-
</p>
15-
</header>
16-
<hr>
17-
<main id="main-div">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe-code blog for beginner</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Wireframe Basic knowledge</h1>
14+
<p>
15+
Hello and welcome to this programming blog, today you will learn about what is wireframe and why it so important
16+
in web development.
17+
</p>
18+
</header>
19+
<hr>
20+
<main id="main-div">
1821
<div id="div-1">
19-
<article class="article-border">
20-
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="An image with the work Read ME with green color" id="image-size" />
21-
<h2>READ ME.md file and what is purpose.</h2>
22-
<p>
23-
Readme.md is a type of file mainly to tell other other programmer, developer
24-
and other coder by to serve as the entry point and primary documentation for a software project,
25-
providing an overview that explains what the project does, why it is useful, and how to install and use it.
26-
It helps users quickly understand, set up, and contribute to the code
27-
</p>
28-
<a href="https://www.makeareadme.com" target="_blank" class="Link-box-border">Read more</a>
29-
</article>
30-
</div>
31-
32-
<!--The second Item-->
33-
<div id="row-side">
34-
35-
<div class="content-size">
22+
<article class="article-border">
23+
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png"
24+
alt="An image with the work Read ME with green color" id="image-size" />
25+
<h2>READ ME.md file and what is purpose.</h2>
26+
<p>
27+
Readme.md is a type of file mainly to tell other other programmer, developer
28+
and other coder by to serve as the entry point and primary documentation for a software project,
29+
providing an overview that explains what the project does, why it is useful, and how to install and use it.
30+
It helps users quickly understand, set up, and contribute to the code
31+
</p>
32+
<a href="https://www.makeareadme.com" target="_blank" class="Link-box-border">Read more</a>
33+
</article>
34+
</div>
35+
36+
<!--The second Item-->
37+
<div id="row-side">
38+
<div class="content-size">
3639
<article class="article-border">
37-
<img src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress" alt="Is an example of how to design web layout" class="image-size-2" />
40+
<img
41+
src="https://images.prismic.io/prismic-main/Zoa6gh5LeNNTwzHJ_web_design_wireframe.jpeg?auto=format,compress"
42+
alt="Is an example of how to design web layout" class="image-size-2" />
3843
<h2>What is a wireframe and the purpose of it used</h2>
39-
<p id="paragraph-3" >
40-
What is wireframe, wireframe
41-
is a way to design a website service at the structural level.
42-
A wireframe is commonly used to layout content and functionality on a page which takes into account user needs and user journeys.
43-
wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added.
44+
<p id="paragraph-3">
45+
What is wireframe, wireframe
46+
is a way to design a website service at the structural level.
47+
A wireframe is commonly used to layout content and functionality on a page which takes into account user
48+
needs and user journeys.
49+
wireframes are used early in the development process to establish the basic structure of a page before
50+
visual design and content is added.
4451
</p>
45-
<a href="https://www.figma.com/resource-library/what-is-wireframing/" target="_blank" class="Link-box-border">Read more</a>
52+
<a href="https://www.figma.com/resource-library/what-is-wireframing/" target="_blank"
53+
class="Link-box-border">Read more</a>
4654
</article>
47-
</div>
48-
49-
<!--The third item-->
50-
<div class="content-size">
55+
</div>
56+
57+
<!--The third item-->
58+
<div class="content-size">
5159
<article class="article-border">
52-
<img src="https://media.licdn.com/dms/image/v2/D4D12AQH6ykM-AVoDKg/article-cover_image-shrink_720_1280/B4DZZW5EzAHAAM-/0/1745214525491?e=2147483647&v=beta&t=kB_Gy_FceQSnp1FMZ2lVvoPis3lrcCQjgX0Zur3z4pc" alt="a detail map on what is git and branch" class="image-size-2" />
60+
<img
61+
src="https://media.licdn.com/dms/image/v2/D4D12AQH6ykM-AVoDKg/article-cover_image-shrink_720_1280/B4DZZW5EzAHAAM-/0/1745214525491?e=2147483647&v=beta&t=kB_Gy_FceQSnp1FMZ2lVvoPis3lrcCQjgX0Zur3z4pc"
62+
alt="a detail map on what is git and branch" class="image-size-2" />
5363
<h2>Git, repo and branch</h2>
54-
<p >
55-
Git, repo and branch are some basic knowledge that you should learn when you start programming. They can be a powerful tool
56-
that will help you on your journey, especially later on when you do a group project or your own personal project.
57-
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency,
58-
how ever they also allow you save, control and redo your project file version. Repository is when you work on a group project
59-
you can copy all of the files of the main project and make your self owner of that copy project. Branch is for when you want to make some change like adding image, changing color
64+
<p>
65+
Git, repo and branch are some basic knowledge that you should learn when you start programming. They can be
66+
a powerful tool
67+
that will help you on your journey, especially later on when you do a group project or your own personal
68+
project.
69+
Git is a free and open source distributed version control system designed to handle everything from small to
70+
very large projects with speed and efficiency,
71+
how ever they also allow you save, control and redo your project file version. Repository is when you work
72+
on a group project
73+
you can copy all of the files of the main project and make your self owner of that copy project. Branch is
74+
for when you want to make some change like adding image, changing color
6075
or add some functionality to the project doesn't effect the main original file.
6176
</p>
62-
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank" class="Link-box-border">Read more</a>
77+
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
78+
target="_blank" class="Link-box-border">Read more</a>
6379
</article>
64-
</div>
65-
</div>
66-
</main>
67-
<hr>
68-
<footer>
69-
<p class="text-position">
70-
Tuan Ngoc Nguyen
71-
</p>
72-
<div id="footer-list">
80+
</div>
81+
</div>
82+
</main>
83+
<hr>
84+
<footer>
85+
<p class="text-position">
86+
Tuan Ngoc Nguyen
87+
</p>
88+
<div id="footer-list">
7389
<ul>
74-
<li><a href="#" target="_blank">Home</a></li>
75-
<li><a href="#" target="_blank">Contact</a></li>
76-
<li><a href="#" target="_blank">Facebook</a></li>
77-
<li><a href="#" target="_blank">Youtube</a></li>
90+
<li><a href="#" target="_blank">Home</a></li>
91+
<li><a href="#" target="_blank">Contact</a></li>
92+
<li><a href="#" target="_blank">Facebook</a></li>
93+
<li><a href="#" target="_blank">Youtube</a></li>
7894
</ul>
79-
</div>
80-
</footer>
81-
</body>
82-
</html>
95+
</div>
96+
</footer>
97+
</body>
98+
99+
</html>

‎Wireframe/style.css‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,116 @@
11
/*Main part of the website content(do not deleted)*/
2-
#image-size{
3-
width:100%;
4-
height: auto;
2+
#image-size {
3+
width: 100%;
4+
height: 400px;
55
}
66

7-
.article-border{
7+
.article-border {
88
border: 2px solid black;
99
border-radius: 5px;
1010
margin: 0px 0px 0px 5px;
11-
padding-bottom: 20px;
11+
padding: 20px;
1212
}
13-
body{
14-
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
13+
14+
body {
15+
background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
1516
}
1617

17-
header{
18+
header {
1819
background-color: white;
19-
padding:20px 200px 0px 200px;
20+
padding: 0px 0px 0px 5px;
2021
border: 2px solid white;
2122
border-radius: 5px;
2223
}
2324

25+
header p {
26+
text-align: center;
27+
}
28+
2429
/*Footer section*/
25-
footer{
30+
footer {
2631
background-color: black;
27-
color:white;
32+
color: white;
2833
border: 2px solid white;
2934
border-radius: 5px;
3035
text-align: center;
3136
padding-top: 20px;
37+
position: fixed;
38+
bottom: 0;
39+
right: 0;
40+
left: 0;
3241
}
33-
#footer-list ul{
34-
display:flex;
35-
justify-content:space-evenly;
36-
flex-direction: row;
42+
43+
#footer-list ul {
44+
display: flex;
45+
justify-content: space-evenly;
46+
flex-direction: row;
3747
}
3848

39-
#footer-list li{
40-
list-style-type: none;
49+
#footer-list li {
50+
list-style-type: none;
4151
}
4252

43-
#footer-list a{
53+
#footer-list a {
4454
text-decoration: none;
4555
color: white;
4656
}
4757

4858

4959

50-
article{
60+
article {
5161
background-color: white;
5262
}
5363

5464
#main-div {
5565
display: flex;
5666
flex-direction: column;
57-
width: '100%';
67+
width: 100%;
5868
align-items: center;
69+
padding-bottom: 150px;
5970
}
6071

6172
/*This is for the position of the first Item*/
62-
#div-1{
63-
width: 58%;
64-
height: 20%;
65-
display: flex;
73+
#div-1 {
74+
width: 60%;
75+
height: 20%;
76+
display: flex;
77+
margin-bottom: 15.5px;
6678
}
6779

6880
/*This part is mainly for item 2 and 3*/
6981

70-
#row-side{
71-
display: flex;
72-
justify-content: center;
82+
#row-side {
83+
display: flex;
84+
justify-content: center;
7385
}
7486

75-
.content-size{
76-
width: 40%;
77-
78-
}
87+
.content-size {
88+
width: 30%;
7989

80-
.image-size-2{
81-
width:100%;
82-
8390
}
84-
#paragraph-3{
85-
margin-bottom: 102px;
91+
92+
.image-size-2 {
93+
width: 100%;
94+
height: 300px;
8695
}
96+
8797
/*This for the read more button do not deleted*/
88-
.Link-box-border{
98+
.Link-box-border {
8999
border: 2px solid black;
90100
margin: 0px 10px 0px 5px;
91101
padding: 10px 10px 10px 10px;
92102
}
93103

94-
p{
104+
p {
95105
margin: 0px 0px 30px 5px;
96106
}
97107

98108

99109
/*For heading styling*/
100-
h2{
110+
h2 {
101111
margin-bottom: 5px;
102112
}
103113

104-
h1{
114+
h1 {
105115
text-align: center;
106116
}

0 commit comments

Comments
 (0)