Coding a responsive webpage from start to finish
In this video I code up a site using HTML and CSS from start to finish based on the design I created in Adobe XD last week. You can check out the video where I designed it here: https://youtu.be/TByfwPhM7gY
/////// The Freelancing Bundle ///////
https://studywebdevelopment.com/freelancing
Make sure you use coupon code KEV20 at checkout for 20% off
/////// Timestamps ///////
00:00 - intro
6:15 - Start the markup (sorry for the long intro, lol)
21:15 - Start CSS / Custom Property setup
26:50 - Typography
31:40 - Navigation
36:45 - Start mobile layout - hero section
40:30 - Intro section (mobile)
43:30 - About Us section (the two column part)
53:30 - Order online section
1:00:30 - Products Section
1:17:35 - Footer
1:29:47 - Media Query / Desktop version
#webdevelopment #html #css #responsive
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Coding a responsive webpage from start to finish канала Kevin Powell
/////// The Freelancing Bundle ///////
https://studywebdevelopment.com/freelancing
Make sure you use coupon code KEV20 at checkout for 20% off
/////// Timestamps ///////
00:00 - intro
6:15 - Start the markup (sorry for the long intro, lol)
21:15 - Start CSS / Custom Property setup
26:50 - Typography
31:40 - Navigation
36:45 - Start mobile layout - hero section
40:30 - Intro section (mobile)
43:30 - About Us section (the two column part)
53:30 - Order online section
1:00:30 - Products Section
1:17:35 - Footer
1:29:47 - Media Query / Desktop version
#webdevelopment #html #css #responsive
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
---
Support me on Patreon: https://www.patreon.com/kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
Видео Coding a responsive webpage from start to finish канала Kevin Powell
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Having fun with CSS - styling stylestageTaking on Gary Simon's challenge LIVE!Learn web development as an absolute beginnerComplete Responsive Blooger Website Using HTML/CSSResponsive design made easyCSS em and rem explained #CSS #responsiveHow to Create a Responsive Website from Scratch - Part 1: The HTML #Responsive #HTML5From idea to layout: How I approach designing a siteI've been challenged to a CSS Battle rematch | Can I beat him again???Three fun uses for ::before and ::afterFree Course: Beginner Web Design using HTML5, CSS3 & Visual Studio CodeFlexbox design patterns you can use in your projectsGetting started with Figma: A beginner's guide5 simple tips to making responsive layouts the easy wayLayouts with CSS Gridmin(), max(), and clamp() are CSS magic!HTML Full Course - Build a Website Tutorial5 CSS mistakes that I see way too oftenAre you writing responsive CSS the wrong way?