Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to center an image img in HTML using CSS

Course contents
SECTION: 1
Getting Started 9:55
SECTION: 2
Introduction to HTML & CSS 1:08:03
SECTION: 3
Project 1: Restaurant Website 2:40:45
1. How to create an index html & style css
12:16
2. Test your website live using a Visual Studio Code extension
8:45
3. How to check your code for errors in HTML using VS Code
11:02
4. What is HTML5 tag header nav section article main footer
5:47
5. How to add html5 structure elements to your html website
16:03
6. How to color the background of a webpage using the body html tag
5:11
7. How to add an images to a website using HTML what is alt
4:39
8. How to center an image img in HTML using CSS FREE
1:14
9. How to change the font style size & color of h1 p in HTML CSS
14:12
10. How to make a clickable link in html & change the color
8:46
11. How to add a stretching background image to a website
5:39
12. How make a div tag transparent using HTML & CSS in VS Code
2:37
13. How to create a simple website text navigation in HTML & CSS
6:43
14. How to css style more than one class tag at a time compound classes FREE
7:02
15. Class Project 02 – Footer
2:05
16. Class Project 02 - Footer COMPLETE
4:49
17. How to add a simple email button to a website using mailto in HTML
3:49
18. How to add Google Maps to your website using embed codes
11:25
19. How to put your website live on the internet with your own domain
16:50
20. How to connect Visual Studio VS Code via sftp to host bluehost
11:51
SECTION: 4
Project 2: Bike Repair Website 6:12:48
1. Setting up our new web design project & discussing our topics
3:47
2. What is a CSS reset zeroing eric meyers vs normalize
15:23
3. What is a min-height compared to height for a div tag FREE
7:02
4. Getting div tags onto one line using Flexbox in HTML & CSS
5:23
5. Add even space between div tags using flexbox with no outside margins
4:42
6. How to have 2 div tags of different sizes in the same row html css flexbox
7:13
7. How to vertically center content in a html div tag using flexbox css
7:20
8. Class Project 03 - Flexbox Header
2:51
9. Class Project 03 - Flexbox Header COMPLETE
5:39
10. How to make a full background gradient on a website CSS
10:19
11. How to change the default font type color size on a website using HTML & CSS
4:20
12. How to choose & install google fonts on your HTML CSS website
12:45
13. What is the difference between PX & EM & REM font sizes FREE
14:56
14. Line height space between paragraphs aka space after
4:34
15. When would you use an svg image instead of jpg or png in web design
7:05
16. How to export svg png jpg from XD Photoshop Illustrator for website design
11:00
17. Block level images verses background images in HTML & CSS
8:32
18. Finishing up our cards
9:10
19. How to add icons to your website using font awesome VS Code
16:31
20. How to make an entire DIV container box a clickable link
9:56
21. How to use box-sizing border-box from Flexbox in VS Code & web design
6:20
22. How to make a colored button in VS Code using HTML CSS FREE
7:46
23. Why can’t I add margin or padding to the top bottom of my a tag Inline vs block elements
11:08
24. How to add rounded corners to a button or div tag in HTML & CSS
4:17
25. How to add a css drop shadow to a website button div tags and text fonts headings
6:24
26. How to backup your website while you’re building
5:01
27. Reusing a button class in the navigation
3:11
28. Class Project 04 - Custom Button
2:58
29. Class Project 04 - Custom Button COMPLETE
5:46
30. How to add a horizontal rule using HTML5 & CSS3 in VS Code
3:52
31. How to make div tags wrap onto separate lines using HTML5 CSS3 Flexbox
12:14
32. How to change hover color & animate my button in HTML & CSS
3:33
33. How to target specific tags in HTML to apply css to using Pseudo Classes
9:31
34. How to create a simple dropdown navigation menu button HTML CSS
20:04
35. Adding our CSS dropdown menu to the roar bikes website
14:50
36. Useful shortcuts tips tricks to speed workflow in VS Code
13:28
37. How to add a large background image to a website design FREE
9:25
38. How to connect link 2 pages in HTML web design
10:43
39. How to make a simple php form work on your HTML website
17:50
40. Adding placeholder text and labels to website form text fields in HTML
5:46
41. How to add a large multi line text box in a HTML form
2:18
42. How to add check mark tick box to a HTML form
3:05
43. How to add a radio button round button with dot in middle to HTML form website
6:07
44. How to you make a drop down form menu for a website in HTML
5:48
45. How to style form text boxes & check boxes in a website HTML
12:55
SECTION: 5
Project 3: Responsive Portfolio Website 2:53:33
1. What does responsive website design mean FREE
4:18
2. How to change a website layout size color when at different sizes using media queries
11:28
3. How to test your website on a tablet or mobile phone from Visual Studio Code
6:00
4. How to change the layout of a responsive website for mobile vs desktop
16:02
5. How to turn things on and off for mobile tablet & desktop responsive websites
6:04
6. What is pixel density responsive images pixel ratio dp px in webdesign
14:47
7. How to export responsive images for website from XD Photoshop Illustrator FREE
5:12
8. How to add responsive images to website using 100% width in HTML & CSS
6:09
9. How to use srcset to change images in HTML for responsive website
10:16
10. How to add a css style to the first line of a p tag on a website
11:19
11. How to make the header footer full width but the inside centered
5:36
12. Class Project 05 – Header design
3:12
13. Class Project 05 – Header design COMPLETE
6:26
14. How to request your certificate
1:00
15. How to use a span tag or span class in HTML to change text
10:32
16. How to pin the navigation to the top of a website fixed nav
3:18
17. How to make a simple responsive mobile menu using CSS only
8:21
18. What is Javascript vs Jquery in website web design
6:36
19. How to make a burger menu 3 line mobile navigation for a website
15:12
20. How to switch a menu nav from desktop to mobile phone FREE
21:45
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39
1. Overview of what Bootstrap 4 is in website design FREE
7:58
2. How to install Bootstrap 4 on a website using Visual Studio Code
6:27
3. Quick overview of how the Bootstrap Grid Layout works in VS Code
10:49
4. Quick overview of how Bootstrap Components works in VS Code
9:23
5. Quick overview of how Bootstrap CSS Styles works in VS Code
8:21
6. How to customize the default Bootstrap 4 css styles
13:51
7. How to use Bootstrap Layout Grid Experiment 1
10:20
8. How to make 100% header & uneven widths in Bootstrap 4
7:16
9. How to create uneven col widths in Bootstrap 4
7:28
10. How to add padding & margins using Bootstrap 4 in VS Code
12:03
11. How to change layout of Bootstrap depending on mobile or desktop
15:46
12. How to turn things on & off on your website using Bootstrap 4
5:31
13. How to re-create the Bootstrap media queries in your own CSS
4:41
14. How to use Google Chrome Inspect - Removing Overriding Bootstrap styles
12:40
15. How to add shadows to text & boxes in Bootstrap 4
7:06
16. How to change the default Bootstrap 4 buttons size & color
6:17
17. How to make images responsive stretchy in Bootstrap 4
9:34
18. How to center text & div tags in a Bootstrap 4 website FREE
4:17
19. How to customize the website navbar in bootstrap 4
7:29
20. Add your own logo to the bootstrap 4 website navigation menu
3:59
21. How to change the default styles for Bootstrap 4 nav
12:13
22. How to add a sticky fixed bootstrap 4 navigation to your website design
4:41
23. Adding a full col image in bootstrap 4 & color the background of col
7:56
24. How to add a border & rounded corners to a box in Bootstrap FREE
4:21
25. How to edit Bootstrap carousel off for mobile timing fade
5:13
26. How to put Bootstrap cards on one line using card groups decks & columns
3:30
27. How to add a drop shadow to a box or card in Bootstrap 4
2:26
28. How to make a div tag a giant clickable link in Bootstrap 4
4:03
SECTION: 7
What Next 6:32

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hi there, this video we're going to take our image, that's default, sliding to the left, and change it to, into the middle, yay, it's easy, let's jump in and do it. 

So we want to center this image inside the Header. The easiest way to do it in this case is, the Header, let's have a look at our design. We'll center everything that's inside of it, because that's the only thing in this Header, there's nothing in this-- the Navigation's outside of the Header box, it's just an image, so it's nice and easy. So let's find the Header, Style, over here. Let's align it to the center, and we'll use Text Align, and you're like, "Hey, why are you using Text Align, Center." That's just the way it is. 

Text Align Center works really good for, horizontally? I get this wrong all the time, horizontal, vertical, you know what I mean, in the middle, that way. Text Align Center works really well. Let's test it, preview in the browser. And inside of my Header everything is Text Align:Center. 

All right, that is how to get our little image in the middle. Let's move on to the-- let's start working with some of the text in this document. Next video, please.
Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024