Here are the slides with examples: https://drive.google.com/file/d/1oMgdo6Div5FHtpVXpOiPZ-hfBBUEREpH/view?usp=sharing
Make sure you have a text editor like Sublime or VS Code
Remember, to open your file on the web browser: right click your file & Open With: Chrome.
- Clone or download this repository (you can use your command line or download it directly to your desktop).
- Now that you have the file structure, open it in your text editor, make sure you have the following code to start your document:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
- Update the title of your webpage a title.
<title> - In between your
<body>tags, let's add some HTML structure. Use an<h1>tag and give your site a heading. - Now use a
<p>for some text in your site. - Let's use a link in your HTML with an
<a>tag. - Lets put a
<div>tag around all of the content we've created so far within the<body>. - Feel free to include other HTML tags below the
<div>you've created + be creative!
- First, navigate to your
style.cssfile. What code is already in there? What is it doing? - Next, make sure to link it in the head:
<link rel="stylesheet" href="style.css">. - From your previous challenge, you should have a
<div>around all the content in your<body>. Let's give it some style! First let's give it a class with:class="your-class-here". - For the
classthat you have created, let's give it some styling:
- Find a background image on Unsplash at www.unsplash.com .
- Give the
<div>abackground-image: url();and use the image you found. - Next, give the
<div>someheight&width. - Next, change the
colorof the text in the<div>. - Next, let's
text-align: center;the text in our<div>. - Check out more examples of CSS styling here: W3Schools | CSS
- Give the
<h1>in your page some styling:
- Let's play with the
padding-topand move it lower on our background image.
- Let's add some more style to the other items on your page. Get creative!
- Check out some properties you can use to style your page:
color,background-color,font-size,object-fit: center,border,border-radius,padding,margin, ``
- Want to add different fonts? Head to Google Fonts.
- Find a text you like.
- Copy the
linktag & put it in your<head>. - Update your
font-familycss attribute.
- Play around with Flex Box
- Remember that
display: flexgoes on the parentdivto influence all its childrenelements - Good resource: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
- Fun game: https://flexboxfroggy.com/
- Add a footer to your page. This may need some custom CSS.
- Use Boostrap to customise your page! https://getbootstrap.com/
- Remember to import Bootstrap in the
headof your html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
- To use the Javascript Bootstrap components, put the following lines right above your closing
</body>tag in your html:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
- Try to customise your own Bootstrap cards! How can you put three cards in one line? Use
flexboxon thedivthat contains your cards. - Use Boostrap navbars or try to use the carousel.
- Sign up for Netlify
- Once you're logged in, drag the folder of code you made today into space on Netlify that says:
Want to deploy a new site without connecting to Git? Drag and drop your site folder here - Launch your website & share with your friends!
If you want to learn more about HTML & CSS, here are some great resources:
- W3Schools | HTML
- W3Schools | CSS
- Codecademy's Online Tutorial
- Wes Bos & Scott Tolinski (https://leveluptutorials.com)
If you need any help, feel free to reach out:
Sheila: LinkedIn Personal Website
The slides from today: https://drive.google.com/file/d/1oMgdo6Div5FHtpVXpOiPZ-hfBBUEREpH/view?usp=sharing