What You'll Learn

Demo website: https://bitna-cv.netlify.app/

Lecture Notes

The lecture notes can be found here: 📔 Slides - Precourse 2

Preview of the Final Product

Not that at this point, you should feel free to be more creative! The great thing about programming is it gives you the power to express yourself however you wish.

There are a lot of CSS Properties - you can view the common ones here on MDN.

For this project, here are some of the ones we're using. Look through this list and familiarize yourself with what they do.

Background Attributes

Padding and Margin

Font-Related

Sizing

Other

There's a lot of stuff in the Bootstrap library. Here are some common classes that we'll use today, and links to the documentation. Again, skim this list and make sure you're comfortable.

Utility Classes

Bootstrap Components

Components are groups of related code/classes that can be combined to make re-usable things, like navbars, and cards.

Navbar

https://getbootstrap.com/docs/4.5/components/navbar/

Card

https://getbootstrap.com/docs/4.5/components/card/

Import Bootstrap CSS / JS

Here's a picture for reference.

Google Fonts

<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />

While Bootstrap has a "Jumbotron" component, let's build a simple one from scratch so we can understand how it works.

After our navbar, let's make a new div with a class of masthead:

<div class="masthead"></div>

In our CSS, let's apply some styles.

.masthead {
	background-image: url(https://www.open.edu/openlearn/ocw/pluginfile.php/1317197/mod_resource/content/0/sc_1_olhp_786px.jpg);
	background-position: center center;
	background-size: cover;
	padding-top: 300px;
	color: white;
	padding-bottom: 300px;
}


<div class="masthead">
	<div class="container"></div>
</div>

<div class="masthead text-center">
	<div class="container">
		<h3 class="mast-subtitle">Welcome to Bitna's CV</h3>
		<h1 class="mast-title">Nice to Meet you!</h1>
		<button type="button" class="btn btn-warning mast-button">Tell me More</button>
	</div>
</div>

Here are the styles for the rest of the section; nothing should be too new here at this point!

.mast-subtitle {
	font-size: 24px;
	font-family: "Montserrat";
	font-style: italic;
}
.mast-title {
	font-size: 52px;
	font-weight: 700;
	font-family: "Montserrat";
}

.mast-button {
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 20px;
	padding-bottom: 20px;
	color: white;
	font-size: 20px;
	font-weight: bold;
	margin-top: 20px;
}

Your final result should look something like thsi:

You can build a card of your own, or use Bootstrap Card: https://getbootstrap.com/docs/4.0/components/card/

Let's choose a card with just an image and some texts.

You can change the width by modifying the style attribute.

Replace the image src with your picture url and the content.

The end result should look like this:

Take a quick look at Bootstrap Forms: https://getbootstrap.com/docs/4.0/components/forms/

Let's create a form by making a new form tag inside a new div:

<div class="container">
	<h3>Contact Me</h3>
	<form class="contact-form"></form>
</div>

In this form, we need an email field and a text field:

<div id="contact" class="container">
	<h3 class="contact-text">Contact Me</h3>
	<form class="contact-form">
		<div class="form-group">
			<label for="emailInput">Email address:</label>
			<input type="email" class="form-control" id="emailInput" aria-describedby="emailHelp" placeholder="Enter email" />
			<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
		</div>
		<div class="form-group">
			<label for="message">Message:</label>
			<textarea class="form-control" id="message" rows="3"></textarea>
		</div>
	</form>
</div>

Add a button before the closing form:

<button type="submit" class="btn btn-primary">Submit</button>

Now let's add some CSS:

.contact-text {
	text-align: center;
}

.contact-form {
	padding: 20px;
	margin: 20px;
	border-radius: 10px;
	border: 1px solid gray;
	display: flex;
	flex-direction: column;
}

You should see this as a result:

When someone clicks the button "Tell Me More", let's scroll down to the Contact Form we just made.

Wrap the button in an anchor tag. Instead of leading to a new link, we want it to scroll down to the contact form. We can do that by adding the id of the contact form to the href attribute:

<a href="#contact">
	<button type="button" class="btn btn-warning mast-button">Tell me More</button>
</a>

Now when you click on the button, it should scroll down.

But wait, it's too fast! You can make it smoother by applying this CSS to the entire page:

html {
	scroll-behavior: smooth;
}

We haven't discussed the responsive properties yet, but if you want to get a head start on the material for next class, feel free to try to build our About Me section!

It helps to visualize the structure of what we're trying to do.

You will use the Bootstrap grid this time.

<div>
	<div class="container">
		<div class="row">
			<div class="col-lg-6 p-5">
				<img src="asset/image/bitna.JPG" class="about-img" />
			</div>
			<div class="col-lg-6 p-5">
				<h1 class="section-heading">Web Development Instructor</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam
					exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam
					exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.
				</p>
			</div>
		</div>
	</div>
</div>

.about-img {
	width: 100%;
	height: auto;
	border-radius: 50%;
}

.about-section {
	padding-top: 200px;
}

.section-title {
	font-family: "Montserrat";
	font-weight: 700;
	font-size: 40px;
	margin-bottom: 20px;
}

Build a Navbar Solution:

https://repl.it/@legobitna/CadetblueWindyAmoeba

Build a Hero Section Solution:

https://repl.it/@legobitna/AbsoluteTroubledKeygenerator

Today's solution:

https://repl.it/@xvinh/2ndDaye