This course is part of Learn How To Become a Front-End Web Developer From Scratch. If you would like to get all my Udemy courses in one, check it out that course.
Join over 39,340 students and start your web development career right now!
If you have always wanted to learn how to code and build websites online then this course is exactly what you need. You will learn how to create your very first website with only HTML and CSS from complete scratch. You will then upload your website online and will be able to showcase your work to everyone in the world.
This course is perfect for beginners and anyone who knows absolutely nothing about HTML and CSS or web developing in general. This course is also a great review and refresher for those who need a little bit of helping just piecing everything together to design a website from start to finish.
In this course we will pretend that a client hired you to build an online portfolio for her hair styling business. You as a web developer have been hired and you have a job to do. You have to build a website that is mobile responsive and looks great. Don't worry, I know you will do a good job.
Let's get started.
Welcome to the course! In this course you will be building a beautiful hairstylist blog for a client. We will first get started with some basics in HTML, then we will work on planning the final outcome of our website.
Once we have an idea of what we are going to build we can then go about making our website come to life with CSS. At the end of this course you will also learn how to put your website online as well as optimize your website for mobile responsiveness.
Thank you for enrolling in this course, You are going to learn a lot in the course, I look forward to seeing you in the next few lectures!
In this very first lecture you are going to learn how to create your very first web-page online! Although this is just something small, feel proud because everyone has to start somewhere. In this lesson you will learn how to create and save a document as an html file.
You are also going to learn how to use the <h1> element to create a level one headline.
There are many different types of coding editors out there that you can use to make writing code a lot easier to do. In this lesson I am going to talk a little bit about Notepad++ and why its a good idea that you download it for the rest of the course.
There is a link in the external files section where you can download Notepad++ for free.
In this lecture I am going to show you a few different ways that you can ask for help if you are stuck. Also, I am going to show you how to access the external files for each lecture that you can download for reference.
A quick quiz that will cover what you have learned so far in HTML.
In this lesson we are going to talk a little bit about the history of HTML and a few basic facts about the very first language that was used to build websites online.
In this lesson we will cover the basics of adding structure to a webpage. This will cover the sytnax of HTML as well as learning all about what purpose each HTML serves in our document.
Let's learn about the <section> tag and how we can use it to add content to our webpages. The primary content of our webpage will go inside this <section> element.
A summary of the basics of HTML and everything that you have learned so far.
The navigation section of a website is very important. It helps guide the user and shows them how to access important pages on your website.
In this lesson we will start building out our navigation and learn how we can use the <nav> tag to do so.
Our portfolio page is going to be the most complicated page for our website. In this video we are going to get started with creating the foundation of our clients portfolio as well as learn how to add an image to a webpage.
Now lets go ahead and add the rest of the images to our portfolio page as well. Now our images do not look very pretty but we will be adding CSS later on to our website to style of portfolio page according to our wireframe we created earlier.
The footer section of our website is sort of similar to the <header> except that content that we want to add less emphasis to will go here. Our footer is created with the <footer> tag and we will be adding some social media links as well as some copyright information to our website here.
The final quiz in this course regarding HTML.
In this lesson you are going to get an introductory to CSS and what Cascading Style Sheets can do. We will start off with adding some basics styles to some of the elements of our webpage with internal CSS.
In the next lesson you will learn how to use external CSS to organize your code a little bit better and keep things organized.
External CSS is located in a file that is separate from our HTML content. This allows us to easily read and keep our CSS nice and tidy.
In this lesson you will learn how to link an external CSS file to an HTML document.
In this lesson you are going to learn how to create ID's and target them in CSS to add styling to them. We are going to start off by creating a div for our wrapper. After we create our div we are going to target it with an ID selector with our CSS and add some styling to our wrapper.
In this lecture we are going to be working on the wrapper for our website. We are going to center our websites wrapper on our page and add a little bit of padding to the elements inside our wrapper. We are also going to set a max-width for our wrapper to make our website a little bit more mobile friendly.
In this lesson we are going to take a mobile friendly approach to designing our website. It's a lot easier to create the mobile version first and expand our website to a desktop layout later on then to take a complex website and try to downscale it.
In this lesson we are going to start working on the mobile version of our website. Once the mobile version is complete we will work on the desktop layout for our clients website.
This quiz will test you on what you have learned so far in CSS.
In this lesson you are going to learn how to add some basic color to our website as well as how to use Hex color codes to really open up the spectrum of color options.
We are going to be styling the link and header colors of our website.
Classes are a little bit more powerful then ID's and in this lesson you will learn how we can use them to speed up the process of styling some of our elements with CSS.
Adding comments to your CSS will allow you to organize your code so that if you come back to an older project at a later date you will still have a good idea what is going on with the styling of your website.
In this lesson I will show you how you can add comments to your CSS.
Fonts and text sizes can drastically change the way your website looks and feels. In this lesson we are going to link an external Google font to our project and change the way our text is displayed on our website with some HTML and CSS.
In this quiz you will be tested on everything you have learned so far in CSS in this section of the course.
Our portfolio is looking a little bit plain, its now time to fix it up and add a little bit more styling to it.
So far our navigation is a vertical list of links, its now time to change that and create a horizontal navigation instead.
A few changes that we need to make to the header and footer of our website.
It's now time to start adding more content to our website in the form of other pages.
Let's do a little bit of styling to our newly created about page.
Our contact page will allow visitors to contact our client with any questions or concerns that they may have.
It's now time to add a blog page to our website.
The last page that we are going to be adding to our website is our Portfolio page.
Up until this point our portfolio page has been a single column layout but its now time to change that. Let's take our portfolio and change it into a 2 and 3 column layout that looks great and is mobile responsive.
It's now time to review our about page and make any final adjustments that need some fixing up.
It's now time to review our Header and Footer and make any final adjustments that need some fixing up.
It's now time to review our portfolio page and make any final adjustments that need some fixing up.
Setting up a domain name is pretty straightforward. You have to find a domain name provider and find a domain name that currently isn't registered by anyone else. In our case we are going grab our domain name from Godaddy.
Finding a hosting account for your website should be an easy task as there are many out there. In our example I'm going to continue with Godaddy and use their hosting package for now.
You now have a domain name and a hosting account set-up on Godaddy. Now its time to connect the two accounts together so that our website will be live on the internet!
Congrats! You have now completed the course! Feel proud of yourself you just went through something that is very hard. The next step is to continue educating yourself in web development.
My name is Robin Haney, I am a professional Web Developer and blogger. I have been designing and building websites for over 5+ years. I work completely from home as a freelance web developer and I love it!
I'm also a best selling author on Amazon and have written a few programming books that have done really well. If you prefer a more hands on approach to learning then my video courses on Udemy will be perfect for you.
I'm here to show you how you can do the same. I've designed and created a lot of websites and I know its hard work but don't worry I've created my courses so that even beginners can easily follow along and work with me.
I've started my own online business at a young age and after being a best selling instructor on Udemy I am very proud of my courses. If you are just starting out then I'd recommend you look over my FREE courses first and then continue to my paid courses when you are ready.
Please enroll today and I look forward to seeing you!