How to Build a Full Screen About Landing Page // HTML, CSS & Bootstrap Tutorial
Learn how to build a full-screen about landing page that is also completely responsive so it can be viewed on any screen or mobile device. We'll use HTML, CSS and Bootstrap to build the about page with. Plus, we will incorporate Font Awesome, a collection of icons to use for social media as well.
Once we build the about page, we will then deploy it online for everyone to see.
Download the source code and example images & text:
https://adesignerwhocodes.ck.page/13b...
Connect a domain name to Netlify:
• How to connect a domain name to Netlify
Demo website:
https://drew-hays-about.netlify.app/
#webdevelopment #webdesign #htmlcsstutorial
Table of Contents:
00:00 Introduction
00:53 Setting up the CSS files
04:45 Importing Font Awesome
07:38 Setting up the Masthead
10:39 Now for the black overlay
13:07 Time to Flex our div
14:39 Setting up the Content Box
15:42 Container, Rows, Columns
19:33 Adding the h2, h1 and paragraph text
21:09 Adding the font awesome icons
26:39 Editing the fonts
30:33 Changing the colors of the icons
31:45 Adding the Image and making it responsive
34:32 Adjusting the mobile version of the site
39:51 Uploading our website to a web host
41:52 Next Steps
Thanks,
Haydn
Premium Gatsby Starter Templates
○ Ultimate Gatsby Starter: https://adesignerwhocodes.gumroad.com...
// COURSES THAT WILL HELP YOU BUILD BETTER WEBSITES
○ Bootstrap Bootcamp (for Bootstrap 5): https://bit.ly/bootstrap-bootcamp
○ Gatsby Demystified: https://bit.ly/3xf2yyQ
// Helpful YouTube Playlists:
http://bit.ly/3rrHj9D Bootstrap for Web Designers & Developers
http://bit.ly/36HEYPZ React Bootstrap & Gatsby
http://bit.ly/3twVn3C Gatsby for Web Designers
🛠 THE TOOLS & SERVICES I USE:
○ Where I buy my domain names (GoDaddy) - https://bit.ly/3v2GV2N
○ Email provider, lead generation and more! (ConvertKit) - https://bit.ly/3xbqwup
○ Graphic Design Tools, stock images and more (Canva Pro) - http://bit.ly/canva-pro-adwc
○ Website Hosting (Netlify) - https://www.netlify.com
► Join ADWC Nation on Discord
/ discord
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!
Hi there! Haydn Adams, BFA. I'm all about helping web developers and web designers build better websites, through code. Yes, coding and be difficult at first. But I'm here to demystify that. To make coding easy so that you can ultimately build a better website.
Got a question for me?
https://adesignerwhocodes.com/contact/
Смотрите видео How to Build a Full Screen About Landing Page // HTML, CSS & Bootstrap Tutorial онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь A Designer Who Codes 30 Январь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 638 раз и оно понравилось 16 людям.