Do It Yourself – Website Tutorials
Learn how to make website with html and css in this html tutorial for beginners in 2020. Learn to code in html in this simple walkthrough tutorial. By the end of this video, you will have the knowledge to create a website in 2020.
Want to learn html 5 and css to build websites? Subscribe for more html tutorials and css tutorials and full html projects to help you learn to code faster.
HTML and CSS make a good starting point for web developers, and are the building blocks of a successful web dev career.
Timestamps:
00:00 Preview of the finished website
00:50 Explore our project files (HTML, CSS and Images)
02:15 Add page background color
03:00 Styling the Header Links
03:35 Style hyperlinks (remove underline)
04:40 Add background color to header element
05:25 Add main element, header 1 tag and paragraph text
06:00 Add CSS styles for main content
07:40 Add page footer element and links
09:00 Add unordered list for Social links
09:45 CSS styles for footer
10:40 Add Social link background images
13:15 Set fixed width to unordered lists in footer
13:36 Resize page to see progress
14:00 CSS Style for Footer Links and Text
14:50 Use :first-class pseudo-class
15:15 Style height of main element to fill page height
16:05 Use CSS Background image to add our Shoe Image
16:50 Add Button Link HTML
17:05 Add CSS style for Button Link
18:33 Align Header, Main and Footer content (set max width)
21:00 Use :last-child to Remove Border from Last Nav Link
21:40 CSS Hover Effect for Footer Links
22:50 Add Google Font to CSS using CSS Import
23:38 Button Link Hover Effect
24:30 Add Links for Social Icons
25:32 Make Social Icons Larger
25:50 Final Build
Download the project files:
https://github.com/dbattersby/make-html-website-youtube
Photo credits:
Brennan Burling – https://unsplash.com/@bwobble11
https://unsplash.com/s/photos/nike-shoe
Social icons credits:
Maksym Khomenko – http://www.behance.net/mxmkmnk
🚀 Follow me on Social Media:
Twitter: https://twitter.com/davidbattersby
Instagram: https://instagram.com/davidbattersby
Facebook: https://facebook.com/David-Battersby-100770558101998
💻 Get $100 FREE credit to spend on your own web servers (from $5 per month).
https://m.do.co/c/78b315f17b47 (perfect for Rails / JS / PHP)
source