Hướng dẫn blog website source code html and css - mã nguồn trang web blog html và css

Cách tạo trang web blog cá nhân bằng cách sử dụng HTML CSS JavaScript

Trong video này, tôi sẽ chỉ cho bạn cách tạo trang web cá nhân (phản hồi đầu tiên trên thiết bị di động).

Trang web trực tiếp Github REPO Mã nguồn
Github Repo
Source Code

Xin chào, tôi là Sadee (WebDev) trong kênh này, tôi tạo video về trang web đáp ứng hoàn chỉnh. Bạn có thể kiểm tra kênh của tôi 👇
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

Kênh của tôi: CodeWithSadee 🔔 Đăng ký: Đăng ký ngay 🕐 Video mới mỗi tuần
🔔 Subscribe : subscribe now
🕐 New Videos Every Week

Các liên kết thiết yếu

Tất cả hình ảnh HTML Text Font - Inter Ionicon
Html Text
Font - Inter
Ionicon

Dấu thời gian

0:00 - Bản demo 4:37 - Cấu trúc tập tin 5:03 - HTML ban đầu 5:47 - Biến CSS, Reset & Base Style 10:40 - Tiêu đề Phần 19:56 - Anh hùng Phần 24:52 - Blog Phần 37:06 - Bên cạnh 40:26 - Footer 45:26 - Navbar JavaScript 47:14 - Truy vấn truyền thông 1:08:49 - Chế độ sáng/tối
4:37 - File structure
5:03 - Html initial
5:47 - Css variables, reset & base style
10:40 - Header section
19:56 - Hero section
24:52 - Blog section
37:06 - Aside
40:26 - Footer
45:26 - Navbar javascript
47:14 - Media queries
1:08:49 - Light/Dark mode

💜 Thích - theo dõi và đăng ký tôi

Twitter: https://twitter.com/codewithsadee github: https://github.com/codewithsadee youtube: codewithsadee Mua cho tôi một ly cà phê: https://www.buyeacoffee.com/codewiths .com/CodeWithSadee
Github : https://github.com/codewithsadee
YouTube : codewithsadee
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

Xin chào người xem, trong bài viết này, tôi sẽ cho bạn biết cách tạo trợ giúp thiết kế mẫu blog tùy chỉnh của HTML CSS. Mẫu này rất đơn giản và rất hấp dẫn. Bạn đã thấy rất nhiều mẫu blog trên Internet nhưng điều này khác nhau. Bởi vì chúng tôi không sử dụng một thiết kế mẫu tải xuống. Chúng tôi tạo thiết kế bằng mã hóa thủ công của bạn. Bạn có thể dễ dàng sửa đổi thiết kế mẫu này theo nhu cầu của bạn theo. Chủ đề blog này dựa trên hai màu chính đầu tiên là màu xanh lam và thứ hai là màu đen mà bạn có thể thấy trong dự án này. Sự kết hợp màu sắc là một phần chính của mẫu của bạn bởi vì nếu sự lựa chọn màu sắc của bạn không tốt để thiết kế mẫu của bạn cũng không đẹp. Khi bạn tạo một thiết kế mẫu web, hai điều chính bạn có một là phông chữ mẫu web và mẫu thứ hai là kết hợp màu mẫu web. Nếu bạn đã đuổi theo màu sắc và phông chữ chính xác. Sau đó, thiết kế mẫu web của bạn trông rất hấp dẫn và độc đáo.

Hoàn thành trang web blog bằng HTML/CSS | Mẫu trang web blog

Bây giờ bạn có thể sao chép mã nguồn bên dưới và sau đó dán tài liệu HTML của bạn

Cách tạo trang web trang đích bằng cách sử dụng HTML CSS

Mã HTML

	
	
	




	

		

			
M-Softtech
		
		

			

				
Blog
				
Latest
				
Contact
				
Subscribe
			
		
		

	



	

		

			
A blog that people will
 actually want to read
			
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
			
Try it
		
		

			




			

		
		

	




	

		


		

				

				

				
Travel
				
Beautiful Location For Travel
				
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the Beautiful Location For Travel
				
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				Manoj Singh . SEP 21, 2021
		
			
		

			

			

				
Food
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
			
			

				

			
			

			

			


			

			

				
Technology
				
Looking for tech blogs
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
			
			

				

			
			

			

			

			

			

				
Food
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
			
			

				

			
			

			

			

		

		

	








	

		
Latest stories
		

		
		

			

			
Entertainment
				
Entertainment good for health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
		

		

			

			
Animals
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
		

		

			

			
Photograpy
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
		
		
		


		

			

			
Fun
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
		

		

			

			
Food
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
		

		

			

			
Food
				
Good Food Good Health
				
Lorem Ipsum is simply dummy text of the printing and typesetting 
				Manoj Singh . SEP 21, 2021
		

		

	




	

		

		
Get our weekly email
			
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
			
Sign up
		
	

Sao chép & NBSP; Mã CSS ở bên dưới và dán tài liệu CSS của bạn

Mã CSS

:root{
	--main: #7b4ee4 ;
	--darkblue: #362078;
	--black: #060606;
	--white: #e7dff4;
}
*{
	margin: 0px;
	padding: 0px;
	font-family: system-ui;
}
.clearfix{
	clear: both;
}
header{
	padding: 20px 0px;
	box-shadow: 2px 2px 15px var(--black);
}
.container{
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}
.col-div-6{
	width: 50%;
	float: left;
}
.logo{
	font-weight: bold;
	font-size: 25px;
	color: var(--black);
}
.logo span{
	color: var(--main);
}
.nav{
	float: right;
}
.nav li{
	list-style: none;
	float: left;
	padding: 3px 20px;
}
.nav li a{
	text-decoration: none;
	color: var(--black);
}
.nav li button{
	padding: 7px 15px;
    background: var(--main);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: -5px;
}
.banner-section{
	background: var(--main);
	height: 400px;
	overflow: hidden;
}
.heading{
	color: var(--white);
    font-size: 40px;
    letter-spacing: 1px;
    margin-top: 14%;
}
.p1{
	color: white;
    width: 395px;
    margin-top: 20px;
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-size: 14px;
}
.input-box{
	box-shadow: 1px 7px 8px 0px #222121;
    width: 360px;
    border-radius: 50%;
}
.input-box input[type="text"]{
	padding: 9px;
    width: 265px;
    border: none;
    border-radius: 5px;
    outline: none;
}
.input-box button{
	padding: 10px 27px;
    border-radius: 0px 5px 5px 0px;
    border: none;
    margin-left: -6px;
    background: var(--darkblue);
    color: white;
    cursor: pointer;
}
.ban-img{
	width: 250px;
	margin-bottom:-50px;

}
.b-img{
	width: 100%;
	border-radius: 10px;
}
.heading1{
	margin-top: 20px;
	color: var(--main);
	font-size: 14px;
	text-transform: uppercase;
}
.blog-heading{
	font-size: 29px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--black);
}
.text{
	font-size: 13px;
    letter-spacing: 1px;
    color: var(--black);
    margin-bottom: 20px;
}
.name{
	text-transform: uppercase;
    font-weight: 600;
    color: #a1a1a1;
    font-size: 14px;
}
.lr-box{
	padding: 10px 20px;

}
.b-img-1{
	width: 100%;
	height: 160px;
	border-radius: 10px;
	margin-top: 7px;
}
.blog-heading-1{
	font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--black);
}
.line{
	    width: 100%;
	    margin-top: 15px;
    border: none;
    height: 1px;
    background: #ddd;
}
.lr-box:hover{
	opacity: 0.5;
	cursor: pointer;
}
.box-1:hover{
	opacity: 0.5;
	cursor: pointer;
}

.box-2{
	width: 28.5%;
	float: left;
	margin: 25px;
}
.box-2:hover{
	opacity: 0.5;
	cursor: pointer;
}
.foot-section{
	background: var(--main);
}
.foot-inner{
	width: 500px;
	margin: 0 auto;
	padding: 50px;
	text-align: center;
}
.ibox2{
	margin: 0 auto;
	width: 380px;
}
footer{
	background:var(--darkblue);
	padding: 15px;
}
footer p{
	color: var(--white);
	text-align: center;
}

Nếu bạn có bất kỳ vấn đề nào để hiểu mã này thì bạn cũng vui lòng xem video này