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
Смотрите видео Project: Build a Landing Page (1/2) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 21 Апрель 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 5,011 раз и оно понравилось 236 людям.