Project: Build a Landing Page (2/2)
► This is the second part of a project that 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 1 of the project here: • Project: Build a Landing Page (1/2)
► Timestamps:
0:00 Start
1:01 What we’re building
1:53 Adding the quote sections
4:49 The ‘Our Story’ Section
6:52 Making a start on the page internal linking
9:13 Smooth Scrolling
10:57 The image grid
13:44 Sourcing images to use
14:54 Creating the contact form
16:51 Internal linking for the form
17:25 Continuing with the form
19:46 Binding the form inputs to labels
22:04 Looking at the completed page without CSS
22:45 Looking at the completed page with CSS
23:49 Summary
► Get the code:
Start of Part 1 - https://codepen.io/craigabourne/pen/o...
Start of Part 2 - https://codepen.io/craigabourne/pen/w...
Final - https://codepen.io/craigabourne/pen/x...
Repo (start-part2.html) - https://github.com/craigabourne/html-...
► Links used in the video:
BrainyQuote: https://www.brainyquote.com/topics/bu...
Quote Gist: https://gist.github.com/craigbourne/e...
Main: Element: https://developer.mozilla.org/en-US/d...
Scroll gist: https://gist.github.com/craigbourne/5...
Image grid gist: https://gist.github.com/craigbourne/8...
Pexels: https://www.pexels.com/
Unsplash: https://www.unsplash.com
► 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 (2/2) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Craig A. Bourne 22 Апрель 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,260 раз и оно понравилось 117 людям.