Скачать с ютуб Project: Build a Landing Page (1/2) в хорошем качестве

Project: Build a Landing Page (1/2)

► This project is designed for beginners to tackle a medium-sized HTML-focused project. The main aim is for learners to consolidate everything we have covered on HTML up until now. Our webpage is going to include as much as we can reasonably fit into one project from all of the content that we have covered thus far. So we will include semantic elements like nav, header, section, article & footer. We will use an unordered list in our navigation bar, and make use of paragraphs, headings, links, and images throughout. We will also add a contact form, and make good use of Emmet shortcuts to speed up our productivity. We are also going to attach classes and IDs to elements which we will use for internal navigation between different sections of the page and to also add some CSS styles I have pre-written. ► Watch part 2 of the project here:    • Project: Build a Landing Page (2/2)   ► Timestamps: 0:00 Start 1:25 The Web Developer Chrome Extension 1:45 Looking at the raw HTML of a popular site 2:08 What we’ll be building 2:40 Getting the project files 2:58 Looking over the project files 3:27 Using CodePen instead of downloading the project files 4:35 Inspecting the project with Chrome DevTools 5:31 The sections that we’ll work on in this first video 6:08 Live Server 6:51 Building the boilerplate with Emmet 7:09 Linking CSS & JS files 9:21 Creating the outer container/wrapper 10:17 The nav bar & navigation links 11:55 The logo & Font Awesome 14:59 The header section 18:07 The footer section + using HTML entities 20:25 Looking once more at the raw HTML 20:54 Summary ► Get the code: Repo: https://github.com/craigabourne/html-... Start Pen: https://codepen.io/craigabourne/pen/o... Finished Pen: https://codepen.io/craigabourne/pen/x... Scroll gist: https://gist.github.com/craigabourne/... Font Awesome CDN Gist: https://gist.github.com/craigbourne/1... ► Links used in the video: Web Developer Chrome Extension: https://bit.ly/1dIeJGY Font Awesome: https://fontawesome.com/ HTML Entities Character Reference: https://dev.w3.org/html5/html-author/... Nav Element: https://developer.mozilla.org/en-US/d... Header Element: https://developer.mozilla.org/en-US/d... Footer Element: https://developer.mozilla.org/en-US/d... ► The HTML for Absolute Beginners Playlist:    • HTML for Absolute Beginners   ► Social Media:   / craigabourne     / craigabourne   ► Code & Projects: https://github.com/craigabourne https://codepen.io/craigabourne