How to Make a Website Using HTML And CSS - Coding Adobe XD Web Design Tutorial
1.3万 次观看 · 2020-07-27
UI 设计
Learn how to make a website using HTML and CSS. We will convert an Adobe XD web design into HTML and CSS in this beginner tutorial. I'll show you how I created the background gradient shape and SVG images and implemented them into my code.
Learn how to create the web design with Adobe XD
https://youtu.be/r-UeSs_n9wU
Get the Images I used in the video
https://github.com/briancodex/xd-design
Timestamp
0:00 What we're building
1:20 Learn where you can design the website with Adobe Xd
1:35 Start coding using VS Code
1:50 Where to get the project images on Github
2:44 Creating our index.html file
3:14 Linking our CSS file
3:25 Creating our style.css file
3:44 Open our project with Live Server
4:00 Creating our home page HTML code
4:50 Adding Fontawesome icon CDN into our project
5:36 Adding google font Montserrat
13:41 Updating our style.css
31:06 Adding our first media query for responsiveness
38:21 Final Design
Responsive CSS Navbar Tutorial with Javascript
https://youtu.be/yFWAOzwovrQ
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Check out my playlist to see my HTML, CSS, & Javascript Tutorials
https://www.youtube.com/playlist?list=PLs1fqgQpnCmJ018jq-A3Ra9GrFWcPgOc1
Udacity Front end Developer Nanodegree
https://youtu.be/E6Yirtef63A
Learn how to create the web design with Adobe XD
https://youtu.be/r-UeSs_n9wU
Get the Images I used in the video
https://github.com/briancodex/xd-design
Timestamp
0:00 What we're building
1:20 Learn where you can design the website with Adobe Xd
1:35 Start coding using VS Code
1:50 Where to get the project images on Github
2:44 Creating our index.html file
3:14 Linking our CSS file
3:25 Creating our style.css file
3:44 Open our project with Live Server
4:00 Creating our home page HTML code
4:50 Adding Fontawesome icon CDN into our project
5:36 Adding google font Montserrat
13:41 Updating our style.css
31:06 Adding our first media query for responsiveness
38:21 Final Design
Responsive CSS Navbar Tutorial with Javascript
https://youtu.be/yFWAOzwovrQ
If you want to follow me along my coding journey, be sure to subscribe :)
https://www.youtube.com/channel/UCsKsymTY_4BYR-wytLjex7A?sub_confirmation=1
Check out my playlist to see my HTML, CSS, & Javascript Tutorials
https://www.youtube.com/playlist?list=PLs1fqgQpnCmJ018jq-A3Ra9GrFWcPgOc1
Udacity Front end Developer Nanodegree
https://youtu.be/E6Yirtef63A