If you’ve never built a website before and you have at least a little bit of coding or design experience, this is the place to start. In this project, we learn how to build a modern portfolio website for desktops, tablets, and mobile devices. We start with basic HTML and CSS syntax. Next, we learn how to build custom web pages with an image gallery and contact page.
We will learn step by step how to organize structure of our porfolio website. I will explain every part of the code so if you will follow along with me, you will no longer need to ask me anything. BUT If you will have some problems feel free to contact me and ask me anything about the course curriculum. I'll be glad to answer to you.
I'm also providing source code so you can jump in quickly when you get stuck to check the syntax or start you new project.
By the end of the course you will be able to expand your portfolio with different website designs.
Learn the tools and resources used to create web code and so on.
In this quick tutorial, we’ll check out an example of the HTML and CSS structure. Then, we’ll learn how to code our first HTML element, which will help form the structure of our website. Finally, we’ll finish up by styling our website with some simple CSS. These two languages, HTML and CSS, form the basic building blocks of any web project.
HTML is a special computer language that describes the structure of a document. With HTML, we can build web pages that contain text, images, and many other types of content. We’ll dig into the latest advancements in HTML by creating a simple page structure.
In order to add content to the page, we need to create containers for that content. In this video, we'll add the header, footer, and sections to our page.
Navigation allows site visitors to get around to the different pages of a website. We'll use the nav element and an unordered list to create our navigation.
The image gallery can be constructed using an unordered list...
Download images: https://mega.nz/#F!ww1EAYyY!qCDk3kNfYHtuw4utNagd2A
In this video, we'll finish building the image gallery and fill it with content.
The footer of a website typically contains basic information about the site, such as associated links and a copyright. In this video, we'll learn how to use the footer element.
Including CSS into the HTML will link the two pages together. This will allow us to add visual presentation to our HTML. We will also show the file what is ussually uses to reset the predefined browser CSS indentation.
CSS is an initialism that stands for Cascading Style Sheets. Let's look at some simple examples of how styles can cascade and override other styles.
By the way... The best website where you can copy your HEXA color codes to your own website are here :-)
Stylesheets make it easy to update the styling for many pages at once. In this video, we'll learn how to use ID selectors in HTML and CSS.
Many websites use a "wrapper div" to center the page in the middle of the site and contain the layout to a specific width. In this video, we'll learn how to use auto margins, max-width property and padding to center our page and contain it.
Modern websites are built with mobile devices in mind from the start. Instead of building a "desktop" version of our site and working our way down, it's much easier to create the mobile experience first and then layer in complexity for larger screen resolutions. In this video, we'll just add some additional CSS to our header and center it.
Color in CSS can be written in several different ways. One of the most common methods for creating color is to use hexadecimal values. These values can be a bit complex at first, so let's spend some time going over them.
Color picker: http://www.w3schools.com/colors/colors_picker.asp
There are many different ways to select elements with CSS. One of the most common methods is to apply a class to an HTML element, which makes it easier to reuse CSS for multiple parts of the page.
The next step is to pick fonts and resize them, but we should organize our CSS before we continue. It will only become more complex, so we should add some comments and sort our declarations accordingly.
Web pages are mostly text, so interesting typography can bring a page to life. Adding new fonts to pages is easy with 3rd party services.
Not every part of a web page is equal. Using different font sizes, we can add importance to some areas like the logo and downplay other areas like the footer.
In order to convert split portfolio into multiple columns, we'll need to carefully calculate the width and margins for each image. Once completed, the page will start taking shape across multiple screen resolutions.
The gallery images are placed on the page correctly, but the captions need additional styling. In this video, we'll also fix an issue caused by the interaction between the gallery and the footer.
Similar to the gallery, horizontal navigation can be created by rearranging an unordered list. In this video, we'll fix some issues with the header and then start styling the navigation.
Most of our site elements are now in place, but the navigation and footer could use some additional polish.
Most websites are composed of multiple web pages. In this video, we'll learn how to add a second page.
When adding new pages to a website, most of the CSS can be reused. However, it's often helpful to add a few customizations.
The contact page is similar to the about page we added previously. Special contact links will allow site visitors to email us directly or call us on a mobile phone browser.
Icons are small images that can help communicate information visually. By adding icons to our contact page, we can give site visitors a better visual indicator for each contact link.
In this video, the selector :nth-child(4n) is used to correct a responsive issue on every 4th item. In other words, this will select the 4th item, 8th item, 12th item, and so on. This fixes the specific problem in the video, but if more gallery items are added beyond the 5 that are present in this project, the design will start to break again. That's because there are 3 items in each row, and every 4th item could appear at the beginning, middle, or end of a row.
Instead, we want to select the first item in each row. A more robust solution is to use the selector :nth-child(3n + 1) instead. This will select every 3rd item plus 1. In other words, this will select the 4th item, 7th item, 10th item, and so on.
Tech geek. Experienced, passionate web developer and graphic designer. I'm passionate in helping other people reach their goals so I decided to share my knowledge with you guys. I love to learn and also teach people about programming and so much more..
I like to talk about things fully understandable, so even If you are totally different from others and you don't understand what others do, I'm here for you to open your mind and make your developing dreams become reality.
From Slovakia I have over 4 years skills in IT and I decided to share my information and teach other people how to walk in IT world.
Keep it coding and follow your ideas!
Cya in the videos :-)