Lab 05 div sections look different but not pretty

[krbrick]

I am assuming there is a spacing issue, also I am editing in GitHub-> edit file. are we supposed to be working in another editor?

<div class="gs-section-01" markdown="1">

### 1. Fork this project

Fork this project by clicking the <strong>Fork</strong> button at the top right corner of this page. Forking means that you now copied this entire project and all the files into your account.

</div>

<div class="pretty-text" markdown = "1">

### 2. Rename the project to `<yourusername>.github.io`

Click on __*Settings*__ at the top (the cog icon) and on that page you'll have an option to rename the project (*Repository name*). This will create a website with the **Beautiful Jekyll** template that will be available at `https://<yourusername>.github.io` within a couple minutes (check out the [FAQ](https://beautifuljekyll.com/faq/#custom-domain) if you want to use a different project name). If after a few minutes your website is still not ready, try making any edit to any file, just to force GitHub to re-build your site.

</div>

[lecy]

Editing in GitHub edit mode is easiest for these files.

I'm not sure if I understand your question.

Can you provide some links to files for inspection?

• raw version of your file so we can see the code
• hosted version of HTML so we can see how it is rendering

[lecy]

Note that on these issue pages (and on Stack Overflow) fences around code consist of three back-tick marks above and below the code, similar to chunks in RMD files:

### 1. Fork this project Fork this project by clicking the Fork button at the top right corner of this page. Forking means that you now copied this entire project and all the files into your account.

### 2. Rename the project to `.github.io` Click on __*Settings*__ at the top (the cog icon) and on that page you'll have an option to rename the project (*Repository name*). This will create a website with the **Beautiful Jekyll** template that will be available at `https://.github.io` within a couple minutes (check out the [FAQ](https://beautifuljekyll.com/faq/#custom-domain) if you want to use a different project name). If after a few minutes your website is still not ready, try making any edit to any file, just to force GitHub to re-build your site.

[krbrick]

I guess my question is..why doesn't the code seem to be working? I'm trying to apply CSS styles to the page.

# Build your website in 3 steps

There's a very easy way to use this theme, and there's a hard way. For most people (including myself!), I suggest going the easy route. If you're an advanced user and want to tinker with the hard way (using ruby gems), then [skip the easy way](https://github.com/daattali/beautiful-jekyll#the-hard-way-using-ruby-gems) if you know what you're doing.

## The easy way (recommended!)

Getting started is *literally* as easy as 1-2-3 :smile:

Scroll down to see the steps involved, but here is a 40-second video just as a reference as you work through the steps. If you don't already have a [GitHub account](https://github.com/join), you'll need to sign up.

![Installation steps](assets/img/install-steps.gif)

<br>
<div class="gs-section-01" markdown="1">

### 1. Fork this project

Fork this project by clicking the <strong>Fork</strong> button at the top right corner of this page. Forking means that you now copied this entire project and all the files into your account.

</div>

<div class="pretty-text" markdown = "1">
### 2. Rename the project to `<yourusername>.github.io`

Click on __*Settings*__ at the top (the cog icon) and on that page you'll have an option to rename the project (*Repository name*). This will create a website with the **Beautiful Jekyll** template that will be available at `https://<yourusername>.github.io` within a couple minutes (check out the [FAQ](https://beautifuljekyll.com/faq/#custom-domain) if you want to use a different project name). If after a few minutes your website is still not ready, try making any edit to any file, just to force GitHub to re-build your site.
</div>
<br>
### 3. Customize your website settings

Edit the `_config.yml` file to change any settings you want. To edit the file, click on it to view the file and then click on the pencil icon to edit it (watch the video tutorial above if you're confused).  The settings in the file are self-explanatory and I added comments inside the file to help you understand what each setting does. Any line that begins with a hashtag (`#`) is a comment, and the other lines are actual settings.

Note that in the video above I only edited one setting in the `_config.yml` file. **You should actually go through the rest of the settings as well. Don't be lazy, go through all the settings!**

### 4. Congratulations! You have a website!

After you save your changes to the `_config.yml` file (by clicking on *Commit changes* as the video tutorial shows), your website should be ready in a minute or two at `https://<yourusername>.github.io`. Every time you make a change to any file, your website will get rebuilt and should be updated in about a minute or so. Your website will be initialized with several sample blog posts and a couple other pages.

Note that this was the easy way to *create* your website, but it does come at a cost: when Beautiful Jekyll gains new features in the future, *updating* your website to include all the latest features is cumbersome. See the [FAQ](https://beautifuljekyll.com/faq/#updating) for help with upgrading in the future.

<style markdown "1">

.gs-section-01 h3 { 
     color: red }

.gs-section-01 p {
     font-size: 30px;
}

</style>

https://krbrick.github.io/getstarted/

[lecy]

The markdown="1" should be in the <div> tag but not the <style> tag.

<style>

.gs-section-01 h3 { 
     color: red }

.gs-section-01 p {
     font-size: 30px;
}

</style>

[JasonSills]

Hi @lecy ,

I'm having the same issue. The text isn't changing to what I have set in the style:

<div class="gs-section-01" markdown="1">

### <h3> 1. Fork the Beautiful Jekyll repository </h3>

<p1> Fork the [repository](https://github.com/daattali/beautiful-jekyll) 
by clicking the Fork button on the top right corner in GitHub. </p1>

</div>

<style>

.gs-section-01` h3 {
  color: red
  font-size: 40px;
}

.gs-section-01 p1 {
     font-size: 30px;
}
.gs-section-02 h4 { 
     color: blue;
     font-size: 100px;}

.gs-section-02 p2 {
     font-size: 30px;
}
.gs-section-03 h5 { 
     color: green;
     font-size: 200px;}

.gs-section-03 p3 {
     font-size: 30px;
}

</style>

https://github.com/JasonSills/JasonSills.github.io/blob/5e0b04008c688011aef8c544e3f35d15ff81ae68/getstarted.md

[JasonSills]

Hi again,

I think I see what is happening here. Nothing is changing in the preview section, but I do see a change in the "Getting Started" section of my website. Perhaps the preview section is just wonky?

[lecy]

I'm not sure what you mean by "preview" section? This page?

https://github.com/JasonSills/JasonSills.github.io/blob/5e0b04008c688011aef8c544e3f35d15ff81ae68/getstarted.md

If so, that is the markdown version of the page. When you activate the GitHub pages option you are instructing GitHub to convert all MD files to HTML files on their servers.

When you view the live site you are viewing the HTML page:

https://jasonsills.github.io/getstarted/

So the difference is that only some MD elements are rendered on the MD page and you can't apply styles.

Markdown was designed to quickly write documentation for software, so it is a stripped-down version of markup. For access to all of the HTML features you need to activate GitHub pages.

Make sense?

[lecy]

@JasonSills Website is looking good, by the way!

[JasonSills]

Hi @lecy,

When you are editing the code, next to it is the "Preview changes" section. I suspect it is the markdown versus HTML difference you mentioned above.

[lecy]

Got it! Yes, that would be the markdown preview only.

[JasonSills]

Makes sense now that I see it. The address ends with a .md: https://github.com/JasonSills/JasonSills.github.io/edit/master/getstarted.md