Travis, did you know that your tutorials are so much better than some of the PAID tutorials out there? You are amazing. Thank you so much for this. Subscribed.
I've been watching you for a week now and... I've learned a lot. I'm not even a beginner but I'm learning a lot. The applications you use to help you build websites are awesome. Very... very very handy.
Clearfix is not the lazy way :P . They both are used in different conditions. The proper explanation is that CLEAR:BOTH is used to make an element appear below any floated elements that are above it (like in above video) and CLEARFIX is designed to make an element expand to enclose any floated elements within it.
Found your episode on using Jekyll and here I am... can't stop watching the series!!! Has me pondering the possibilities of Jekyll, learning sass and using bourbon! Thanks for sharing what you know!!!
Sorry Travis, but I am totally confused and frustrated by now. Starter Kit is very different from the one you are using in this tutorial. And nothing is working the way it should have been.
This should help. Try DevKit V1, Here's a link to V1: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit One more thing: Once you download the Starter Kit Version 1, the folder "4-pages" is the same as the folder 3-sections in this video. It's important that the folders are consistent with the video so you can follow along much easier.
Sure anytime. That's one reason I'm a fan of open source and forums if someone spends hours and hours trying to solve a problem they can help others who're trying to do something very similar and gets that same problem.
thanks, the folder structure seems like a Jekyll 3 version at the beginning of this video. @Rahul Siyanwal, did you use version 2.0.3 as Travis or a version 3? One quesion @Poohbie, do I Download the DevTips-Starter-Kit (Jekyll Friendly) kit in the root of my project folder to start? I did download the vrsion 3.3.0 as prompted, but unistalled it to replace it with 2.0.3 as Travis's one form the previous video... any advise appreciated.. Many thanks.
People forked around with the 1st project files of yours on GitHub. I downloaded and nothing shows up. Please check those files if you can. Thanks Travis
For those using the devtips starter kit and having problems with the background: pink step... 1. Make sure your jekyll version is 2.0.3 (verify with 'jekyll -v' ; If you need to downgrade first 'gem uninstall jekyll' then gem install jekyll -v '2.0.3') 2. Clone the forked repo at: github.com/dlutsch/DevTips-Starter-Kit
I can't get the background:pink working...Running jekyll v 2.0.3 on windows 7 with Dreamweaver CS6, can you help me?i have downloaded your repo, the header include works fine but not the background pink :S.
It's good to see you making mistakes and then fixing them! I haven't seen this in other tutorials and I discovered just right now the 'Inspect Element' tool. Great!
1: Thank you for all those tutorials! 2: About GoogleFonts: How do you get the "google-font-code" from _fonts.scss? I searched on GoogleFonts but was not able to find it.. 3: Did you renamed the "3-sections" folder into "modules" for the Starter-Kit? There's no such folder..
Thank you so much for these amazing tuts! I have a question about the align-item(center)@mixin. First off, this is a god send!! It worked perfectly for me in the tutorial, but I tried to emulate it in another project and it didn't work. Im trying to align an img, an h1, and a nav bar. Do you know what the stipulations are for that @mixin to work?
If anyone struggles with changing the bg colour to pink even though they've tried every other solution, try changing your port number in the config.yml file, mine was clashing with another installation, somehow this ended up working for me!
Why isn't this course called, How to Build a Responsive Website From Start to Finish [USING JEKYLL]? Why do you need to use Jekyll, can't you use the fundamentals for the people that don't want to use Jekyll.
I know that almost everyone working on Windows has been complaining about Jekyll and the long configuration etc... I feel for you, as I am in the same boat. I would like to point out however (half full view of the glass) that even though it has been a tough road, for a beginner it seems like a great test to understand how the PC functions and how to tinker with it to make it function. I have successfully managed to make everything work after long hours of dead end trial and errors. If this message is saying anything, is to urge Windows users that are beginners in any coding language to not get furstrated with the rough road, at least for me, that seems to be the bonus learning curve. Good luck and if you need help let me know. I had issues with both: - sass compiling - installing jekyll on the first place
What the fuck. In video 4 you show you're using Jekyll. In video 5 you have a starter kit. then in video 6 you're back to jekyll/starter kit. how are poeple suppose to follow along? The starter kit doesn't even match this videos layout and YOU DON'T EXPLAIN THAT.
Sorry for the confusion. Part three is on another channel, but if you watch the playlist, its all sorted out. th-cam.com/play/PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI.html
Hiya, I'm stuck @02:50... This is what I'm doing: running jekyll friendly starter kit - jekyll is at serve in Terminal - a new folder "_includes" with a file "header.html" created - input "--- ---" before and "{% include header.html %}" inside in index.html - results --- --- {% include header.html %} on localhost:3000 instead of "header bro!!" What am I doing wrong? Please be gentle... I'm new at this.
Hey Travis! Why did you use a nested span inside of h1 element to make a border? I mean you could probably add a border using a border property of the h1 element.
Hey Travis! Great series. Thank you for that. May I suggest to make an include file for the navigation as well!? So, you just have to change it once, if you’ll need to add another link/section/page/what ever!
That is a great suggestion. In the next video (or two?) there is an awesome solution that puts the control of the nav into the settings.yml files. Which is great because its that idea of having one place that controls the many instances of it on the site.
Hay travis, first of all thanks a ton for uploading all the videos. My only question from this tutorial is "how did you inserted a logo.html file" in current body tag body @24:23. with those curly brackets.
Wouldn't you suggest using making the svg a font with something like icomoon? That way you can apply all the font styles to it. it might take a bit longer to make though.
I see, I am still new to using the vector thing, so I am glad that you done it another way. I did no even think of using the way you did. Seems like it could be useful. But your videos are awesome!
Hi Travis! This is such a cool tutorial but I am quite new to Espresso. Previously I used Dreamweaver to code my web. Would you please share me more about the difference between these two? Which one is better to stick on? Thank you!
Hi there!!! By following this folder structure using Jekyll for Windows 10 I was not able to compile SASS into CSS. Make sure to use a _sass folder to put your sass and scss folders so Jekyll finds them. By default Jekyll will search within a _sass folder.... Thanks for the video was already feeling hopeless
Amazing. I was a bit lost at first because we are using different programs, but I quickly caught up. Though I did not get through the whole video, I learned a ton. Thank you.
+DevTips Why did you create the photoshop image? Was it the "Design" stage? I guess what im really asking is, is it necessary to do it? If so, does it have to be in a photoshop like program, or will pen and paper suffice?
I can't figure out why it doesn't import my sass. Linked my _header to the _-sections-dir and linked the _-sections-dir to my all.sass (@import '3-sections/-sections-dir') but it doesn't work (tried @import '3-sections/header' and @import '3-sections/sections-dir aswel). How to link all.sass to the css file in the _site folder? Cause it doesn't show any css.
Okay, I got a question. Why you've made another span element inside h1 while u could add a border to h1? Maybe I'm wrong. Also got a question about 20:57 you've added padding-top to the h1 element. Why? It was all about margin-top and not padding. It worked but don't know how.
***** The h1 is full width. I wanted the border to be only as big as the text.. Have you ever gotten that weird effect where your margin top jumps out of it's parent container? Padding-top circumvents that...
DevTips Oh got it sometimes :D Thanks for answer! About h1 element. It's true - this is div but u could always set display: inline-block for it and then set ur border. Will it work?
DevTips I am not sure but if you set up inline-block wouldn't it center by margin: 0 auto? I just want to make sure there's no other option to do that and learn how it properly works.
DevTips I like how you show the parts of the project (min 6, for example) and development at the same time and easily this could be a real project is not the typical tutorial/serie, really is from the start :) excuse me for bad english, congrats again Mr Travis.
I rebuilt the header exactly as you did, and everything works, accept the scaling of the when you rezize the browser window. Once i scale down to the point where it starts touching the sides of my browser window, the stops moving at the left side. If I keep scaling my window down, the right side of the starts to dissapear behind the window while everything else collapses as it should. What am I dong wrong?
Where does the Dev tips starter kit come into play? what parts are used beginning as I've noticed that some of your code is quite different the the code jekyll generates
Awesome playlist. But im stuck when i set the background image I have tried many possibilities but doesn't work: background: url('file:///Users/K0nd3v/Desktop/aa/ss.jpg') background: url(file:///Users/K0nd3v/Desktop/aa/ss.jpg) background: url(../aa/ss.jpg')
+Conrado Mateu Gisbert Where is your background picture located in relation to your style-sheet? I keep my style-sheets and images in the same folder called assets so mine is simply background: url(coastline-1.jpg); If your picture is in a folder on a different level than your style-sheet then it would be background: url(foldername/picturename.jpg); That is if your picture isn't several folders deep from your style-sheets location. the ../ is used to back-step one folder level. I'm not sure if any of this helps but it was worth a shot!
In theory I knew how to create the header and all the stuff you did cause I learned it, but ! Watching you work on it as if I was behind your shoulder and the thought process you put on it...its very useful for a student like me : ) Thanks man.
hey travis, first of all thanks for your awesome videos/channel! they really help me out :) my problems are: changing the bodys bg-color to pink works fine. but when i try to style the header as you show in your video the console throws out some errors. it seems that espresso doesn't know .sass files. there is no text-highlighting and a non colored icon in the left navigation bar. hope you can tell me how to fix it greetings from germany :p
Thanks for the awesome video. I have learned a ton. I tried to follow your steps to make a website. I first made the folder directory from jekyll, as you showed in other video. And while I tried to start coding, I realized that there are quite a few index.html files. I wonder which index.html you would code from, the one outside of all folders or within the _site folder?
Hello, I follow your instruction from beginning then download the starter kit; and rename it so it looks like the one on this video; but in beginning I had a problem in changing background to pink. How can I solve it? I'm still learning. Thank you
+timy m I found the problem; it's from main.css (which is near main.sass) in background-color: #ddd; the problem is how can I change it so it would work from header.sass? delete it wont result anything :(
its seems to be clean and awesome to be able to include html like that, the only thing i don't like from what i see is that you need to write new set of rules to a new sass file
This series is really good practice! Excellent videos and the site looks great! Question though, my footer isn't completely at the bottom of the page when I scroll down. It's the last thing on the page but theres a gap between the footer and where the page ends. Do you know why this might be?
Good Day Travis, I found a link to your videos (Parallax) at Treehouse and I enjoyed the lessons and the final project. I have found the How To Build a Responsive Website more challenging as the Artists-Theme project file on github does not start from the beginning. Am I missings anything? Naturally I started with the basic files provided by Jekyll command "Jekyll new portfolio" ; however the file structure is different and my attemp to replicate your file structure did not generate the desired result. Can you help me out with that? Thank you so much :)
I guess that I have been able to solve the above challenge after digging a bit in the repository. Not really the project file from square one but that works for me.
There are a few tools you could use. I recommend xScope to get measurements if you are unsure. I was getting general measurement out of photoshop with the marquee tool (which shows dimensions as you draw a box) and the OSX screenshot tool (Command + Shift + 4, which also shows the dimensions in a tooltip) Now, I have kind of a unique situation here in that I am the designer and the developer at the same time. So I will make final decisions as I code. I don't have a designer that I have to please, so I can change things even after the design is "done." Also a big thing about being able to quickly take measurements is 1- I usually space things in 10px increments. So I can look at any given thing and say "oh, thats 30px or 20px" and 2- I've been doing this so long that it's in some way a reflex. I can look something and feel if it needs space added or removed. That just comes with time and practice. Long answer, sorry. :)
hi travis i've got this ...error: Error: Undefined variable: "$accent". on line 58 Error: Run jekyll build --trace for more information. Regenerating: 1 files at 2016-05-28 02:41:56 Conversion error: There was an error converting 'assets/css/all.sass'. please help me
I'm trying from hours to just change the background to pink, but not able to synchronize the css with the rest of the code. I've tried downloading the Artist-Theme & run the same, but there also css part is missing. Not getting any clue, what to do next.
hi bro for my code header background: pink height :450px command line jekyll says: conversion error invalid css after height expected pseudoclass or element was 450px on line 3 whats wrong with my code?
hey Travis, I was wondering why did you use the padding property for the h1 instead of adding more margin to move it down? I'm new to this so forgive my question if it seems elementary.
I followed all the parts until now, but the problem is that when you begin this video many files are missing or they are different from your previous video that you made in codecourse about jekyll.. :/
Did you try the DevKit V1 or V2? Here's a link to V1: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit One more thing: Once you download the Starter Kit Version 1, the folder "4-pages" is the same as the folder 3-sections in this video.
Hey there, any tips on doing this in something other than Espresso? I'm trying to follow along but I don't have a Mac and I can't seem to get it to work well...
The tutorial is awesome. This is exactly what I was looking for. I had a question: I cannot seem to get the footer all the way down. It seems to hang right after the text. So I have header, text, footer, and white space. Any ideas why this is happening? Thanks!
Can you release the files you had at the start of this video PLEASE? I want to follow along and build the site myself. The finished site is nice but I an't really learn how to buildl it siting in front of the already finished site files.
Hi Travis! I started your tutorial yesterday but I am stuck with this video. I do not know how to use jekyll so I need to go step by step following your video. But the Theme-artist-page that I downloaded has nothing to do with the one I see on the video since it is already finished all the work, could you please post the file with the starting project please? your videos are awesome and you are funny. Come to Italy to visit! Thanks
If you are using a vector-type graphic, like logos or icons its nice to use svg as they are resolution independent, and look great on HDdpi displays. Svg can also be animated and controlled via css and js. Raster images like jpg and png are good for housing complicated imagery like photographs. can you imagine the size of an svg that was photo-quality? They are just different in kind and have completely different uses.
hi there- quick question. how do I get the image of the coastline to appear? I've created a new "images" folder in the root directory and added the image as "img.jpg". Now in the _header.sass file, i've added background: url(../images/img.jpg) and the image does not appear. Is there an override somewhere that I'm missing? great stuff, Travis!
Aravind Balla There is a jekyll branch to the starter kit. Make sure you start with that. It will be easier. github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
Hey Travis, I watched your whole series. It's great that you've taken the time to do this and to make it available to everyone. I am looking into making my own website, but I'd prefer to use as little extra stuff as possible. I am big on separation of concerns and object - oriented programming, however, so I'd definitely like to use the includes. I found another method to achieve something similar using . Is there a reason you choose to use the {% include *.html %} method instead? Also, I tried playing around with the proposed method, and the #document makes it a little messy. Could you perhaps provide an example that would make it relatively equivalent to what you use, or is there a way to do so?
I can't get the background:pink working...Running jekyll v 2.0.3 on windows 7 with Dreamweaver CS6, can you help me?i have downloaded your repo, the header include works fine but not the background pink :S. In the console i get some error saying that "This selector does not have any properties and will not be renderered"
Having the same problem as Tutorials Hour, when I remove the main.css inside the assets folder and remove the .sass-cache, the background: pink works fine, but when i put again the main.css on its folder everythings work bad, what should i do?rename the main.sass?or the main.css?
Meloscomo1 I left a link on your other comment. the starter kit that is optimized for jekyll: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
DevTips thank you for your answer and your time. Yes I used that kit, but still having problems. In the main css of that kit there is a body background (the color you use on the photoshop template), I am getting that colour instead of the pink, the only way I can get the pink colour on body is when I delete the main.css, and I don't know why.
Change the font-family in the sass file. For example: h1{ font-family: 'Oswald', sans-serif; } .kicker{ font-family: 'Open Sans', sans-serif; } The kicker class gives its font a different style.
I simply gave an example above. If you were going along with the video, he's completing one section at a time. We're starting of with the header section which for me is located: _includes/header.html once we create the structure for our header section we can then go onto styling that same section and adding our own flare, for me this section is located: assets/css/4-sections/_header.sass in our _header.sass file we can change the kicker class to a different font.Keep in mind this is only for the header section of our website. Hope this helps, let me know if you have any other questions.
Hi, isn't it common to design "mobile-first"? I was wondering, because you started with the desktop-design. Can you give me your thoughts on that? Thanks in advance ;)
HEY HELP!!!! When i scale down the browser, the title doesnt scale down, it just gets covered up by the browser, it collapses under each other, but font doesnt get smaller????
Hello mate, I would have one question. How would you approach, if u wanted that the header could cover the whole page at the beginning? Manually or any trick? Thanx in advance, J
Hi Travis, the logo part is sensibly different is compared to what available at the moment on github. I seem to understand that this project is growing and becoming different from what explained in the video. Adding (In the youtube video About section) maybe a github link of the pulls that have changed the header explained in this video might be a solution?
Is this the commit you are looking for? github.com/DevTips/Artists-Theme/commit/6588e7ed3b87ce7aab78e10f4606d8674d788a5d This was the first time I did a community project like this and I learned a lot. One of the things I'll do differently is to make github milestones for each video.. Live and learn.
DevTips nop, it might be this one: github.com/DevTips/Artists-Theme/commit/977fadfde3b1b7ddd3e70d515c25b9e895fd6bbf unfortunately merges do not alway seem to say what they do... I am kind of lost... Well mate, honestly this collaborative thing few years back (without such a great tool like github) would have been very hard. Its just that what you attempted was to build something that is not that immediate if you are not into the web dev business.
I'm a bit confused on margin for the text border. Is there a way to make the border fix to the text, like in yours, but without it messing up on differently-sized screens? Am I missing something? Thanks.
travis i dont understand where that _config.yml came from. it was not there in the stater kit video and suddenly it came in this header footer video? if im not using this artist theme files for my project and i wanna do that template thing in end like you did in this video, what should i do ? should i create my own _config.yml ? if so how to link that in my project ?
I don't understand how this works. The DevTips-Starter-Kit-Jekyll-Starter-Kit does not have the same file structure within the css folder. It has 1-tools, 2-base, 3-modules, 4-pages. The 3-sections folder is not there. If I try to copy the files (whithin 3-sections) from the Artists-Theme jekyll get's a lot of errors. So how exactly should I do this, or what i'm I missing?
i really like your tutorials. but i'm having a problem with Jekyll right after i created the '_header.sass' file.The problem is jekyll serve doesn't compile my sass files.something about inconsistent indentation
help me i have a problem with pulling header.html to index or anything...when I make _includes/header.html and in index do {% _includes header.html %} it just say on site {% _includes header.html %} i can't do anything im working on Atom cuz i dont have mac...
I know that this is pretty straight forward, but i'm stuck at the beginning. I added header.html and "header bro" appeared, then I added _header.sass to 3-modules and imported it in _-modules-index.sass but body is still not pink. I cloned your Jekyll friendly git repo and i'm working on it.
Hey Travis! Im trying to follow along using your new starter kit and when i use {% import header.html %} The index file just prints it as text instead of interpreting it, is this because the new starter kit does not have jekyll or am I just doing something silly! It would be super helpful if you could do a video talking through the new starter kit and how we would create a website from the very very very beginning with just the starter kit, walking through all of the programs and how you use them! Thank you so much your videos are great :) Grace
+Grace Richardson Just solved that problem today. (newbie here btw). What I did is I deleted some of the files created by jekyll then replaced it with the starter kit Travis shared. It worked but I do not know if that is the right way to do it.
Hi Travis! Thank you for the series! Just started watching the series today. One question please, why did you have to nest a span inside the h1 to get that border? Isn't it possible to just give the h1 an id perhaps and apply the border using that as the selector? Or is there a certain reason why it has to be done that way? Thanks man!
I had to do that because: - i wanted the border to be only as big as the text - i wanted it centered So that was the solution I came up with, I'm sure there are other (better) ways.
Hi Travis, thanks a lot for sharing the videos. They are great and I really enjoy watching them. I watched some back and forth a few times since I am quite new to web design stuff. But I am making some progress. I have being trying to make a cover page with the same background of the header (background image + texts) blown up to the whole page but no success. I tried is to make an extra page 'entry.html' and '_entry.sass' with similar content pretty much the same as header.html and header.sass, but it does not work (no background image and only default text style). Maybe you have some tips?
DevTips After some sleep, I realized that I made some mistakes. Now the background and formatting of the entry page is fixed. Thanks a lot for your willingness to help!! What I am trying to do is to make a dual language site. Maybe you can help me check whether what I did is a good way to do it. github.com/jingjingzou/Artists-Theme/tree/site. I made a copy of your index page and duplicated it into two: index.EN.html and index.CN.html and link to them in the entry.html.
DevTips Thanks i was able to fix that but now i am having a problem where {% include header.html %} does not link to my header.html and just writes that ( {% include header.html %} ) on my localhost page. I am using prepos and cannot figure out why it doesn't work. Any ideas why?
Travis, did you know that your tutorials are so much better than some of the PAID tutorials out there? You are amazing. Thank you so much for this. Subscribed.
Thanks for the compliment, and thanks for subscribing!
I've been watching you for a week now and... I've learned a lot. I'm not even a beginner but I'm learning a lot. The applications you use to help you build websites are awesome. Very... very very handy.
Awesome! Glad you are enjoying this :)
Clearfix is not the lazy way :P . They both are used in different conditions. The proper explanation is that CLEAR:BOTH is used to make an element appear below any floated elements that are above it (like in above video) and CLEARFIX is designed to make an element expand to enclose any floated elements within it.
You are right. Completely right.
binarycoder totally! Everything I write is html. Jekyll just organizes it into easier bites.
Found your episode on using Jekyll and here I am... can't stop watching the series!!! Has me pondering the possibilities of Jekyll, learning sass and using bourbon!
Thanks for sharing what you know!!!
Awesome! I learned so much about Jekyll from doing this series. mostly from the community pull requests.
Hannes Lp I use the "stylus sugar for espresso" to do my syntax highlighting
+DevTips this was first time you use html5 not jade!
i was stunned.
This is absolutely the most satisfying tutorial I've ever seen.
You cannot be without liking this video after the intro! :D
i just wanted to say i went to every video JUST to see your intros. Laughter before coding is a must!
Hahaha, I think that's the first time I heard of anyone doing that. Good Idea tho!
Sorry Travis, but I am totally confused and frustrated by now. Starter Kit is very different from the one you are using in this tutorial. And nothing is working the way it should have been.
I was in the same boat, spent an entire day trying to figure it all out.
This should help.
Try DevKit V1, Here's a link to V1: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
One more thing: Once you download the Starter Kit Version 1, the folder "4-pages" is the same as the folder 3-sections in this video. It's important that the folders are consistent with the video so you can follow along much easier.
Poohbi e You just saved my life, I've been so frustrated trying to get the hand of most of this. Thanks!
Sure anytime.
That's one reason I'm a fan of open source and forums if someone spends hours and hours trying to solve a problem they can help others who're trying to do something very similar and gets that same problem.
thanks, the folder structure seems like a Jekyll 3 version at the beginning of this video. @Rahul Siyanwal, did you use version 2.0.3 as Travis or a version 3? One quesion @Poohbie, do I Download the DevTips-Starter-Kit (Jekyll Friendly) kit in the root of my project folder to start? I did download the vrsion 3.3.0 as prompted, but unistalled it to replace it with 2.0.3 as Travis's one form the previous video... any advise appreciated.. Many thanks.
As a complete beginner, this is the best video I have seen to date!
People forked around with the 1st project files of yours on GitHub. I downloaded and nothing shows up. Please check those files if you can. Thanks Travis
Here's a link to V1: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
In your tuts there are things I already know but I always learn new stuff. Thanks Travis for your passion. Your really love doing these!
That's awesome. Thank you so much for watching anyway :)
For those using the devtips starter kit and having problems with the background: pink step...
1. Make sure your jekyll version is 2.0.3 (verify with 'jekyll -v' ; If you need to downgrade first 'gem uninstall jekyll' then gem install jekyll -v '2.0.3')
2. Clone the forked repo at: github.com/dlutsch/DevTips-Starter-Kit
Thanks for gathering these bits Dan!!
I can't get the background:pink working...Running jekyll v 2.0.3 on windows 7 with Dreamweaver CS6, can you help me?i have downloaded your repo, the header include works fine but not the background pink :S.
Are you using the starter kit? there is a jekyll branch of the starterkit. github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
It's good to see you making mistakes and then fixing them! I haven't seen this in other tutorials and I discovered just right now the 'Inspect Element' tool. Great!
1: Thank you for all those tutorials!
2: About GoogleFonts: How do you get the "google-font-code" from _fonts.scss? I searched on GoogleFonts but was not able to find it..
3: Did you renamed the "3-sections" folder into "modules" for the Starter-Kit? There's no such folder..
Thank you so much for these amazing tuts! I have a question about the align-item(center)@mixin. First off, this is a god send!! It worked perfectly for me in the tutorial, but I tried to emulate it in another project and it didn't work. Im trying to align an img, an h1, and a nav bar. Do you know what the stipulations are for that @mixin to work?
Sean Robinson That works only when you also are using +display(flex)
it is bit of hard for newbies like me but iam commited to learn it. great vid
man i seriously learn alot just from watching your workflow, let alone all the awesome content you give. really loving this series, cheers!
Thanks Sam! That is really encouraging :)
If anyone struggles with changing the bg colour to pink even though they've tried every other solution, try changing your port number in the config.yml file, mine was clashing with another installation, somehow this ended up working for me!
+Ali Qureshi Thanks that was killing me...
Man, I've been stressing about that since yesterday..
Why isn't this course called, How to Build a Responsive Website From Start to Finish [USING JEKYLL]? Why do you need to use Jekyll, can't you use the fundamentals for the people that don't want to use Jekyll.
SilverSkySE it's literally the same lol
code is the same... there's a lot here though
Well is not same , I have a struggle to put there a logo.he uses mix some +size50px what should I wrote in css?
Thank you so much for the great videos, I wonder tho if part 3 missing?
u r the best! really, thanks for all
Yea!!
Hello & Thank you for the tutorial. I can not find part 3 for the series?
It's really weird. I'm sorry. But this playlist has it all worked out: th-cam.com/play/PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI.html
DevTips Thanks for the reply! It all makes sense now. Love your channel and plan to use your videos to jumpstart my web design abilities. Cheers!
Awwww Yissss! - 4.bp.blogspot.com/-b98z0OZ27n0/Ubdh-6XqLNI/AAAAAAAAD08/F8lhEsRfujU/s1600/aww-yiss.png
I really get lost in this video.
I know that almost everyone working on Windows has been complaining about Jekyll and the long configuration etc... I feel for you, as I am in the same boat.
I would like to point out however (half full view of the glass) that even though it has been a tough road, for a beginner it seems like a great test to understand how the PC functions and how to tinker with it to make it function. I have successfully managed to make everything work after long hours of dead end trial and errors. If this message is saying anything, is to urge Windows users that are beginners in any coding language to not get furstrated with the rough road, at least for me, that seems to be the bonus learning curve.
Good luck and if you need help let me know. I had issues with both:
- sass compiling
- installing jekyll on the first place
Stelian Nenkov Thanks for the encouraging comment!
What the fuck. In video 4 you show you're using Jekyll. In video 5 you have a starter kit. then in video 6 you're back to jekyll/starter kit.
how are poeple suppose to follow along? The starter kit doesn't even match this videos layout and YOU DON'T EXPLAIN THAT.
The {% include header.html %} does not work for me... help?
I have tried many tutorials, but yours are the best. Many thanks!
Thanks Kamila :)
Awesome! Awesome!! Awesome!!! Travis. You have won my heart with this well treated series. I can't find part 3 though. BIG UPS.
Sorry for the confusion. Part three is on another channel, but if you watch the playlist, its all sorted out. th-cam.com/play/PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI.html
Hiya, I'm stuck @02:50... This is what I'm doing: running jekyll friendly starter kit - jekyll is at serve in Terminal - a new folder "_includes" with a file "header.html" created - input "--- ---" before and "{% include header.html %}" inside in index.html - results --- --- {% include header.html %} on localhost:3000 instead of "header bro!!"
What am I doing wrong?
Please be gentle... I'm new at this.
Have you take a look on the terminal?
Thank you for your response! I'm not sure what to look for in the terminal, but I'll take a look and see if there's anything amiss.
Sunny K Yes! Take a look. There must be some error. Do you have ruby installed or not?
If yes, try to install it again globally via terminal.
Since I can't remember installing Ruby, it probably isn't. I'll try that. Now I gotta go research Ruby. XD
Sunny K Okay install Ruby and tell me if it worked.
THAT .SVG to html trick was AHHHHSUM (emotions AND math all-in-one). You're a ninja sir.
I'm glad you are getting into this :)
Hey Travis! Why did you use a nested span inside of h1 element to make a border? I mean you could probably add a border using a border property of the h1 element.
I never knew about the 'cover' attribute for background images! You've changed my life!
That one there is gold. Yup
that SVG part was really slick
Does anyone know which video is referred by Travis at 5:30 on "How to markup a website"?
Hey Travis! Great series. Thank you for that. May I suggest to make an include file for the navigation as well!? So, you just have to change it once, if you’ll need to add another link/section/page/what ever!
That is a great suggestion. In the next video (or two?) there is an awesome solution that puts the control of the nav into the settings.yml files. Which is great because its that idea of having one place that controls the many instances of it on the site.
Instead of copy your line at 6:27 can you do cmd+shift+d to duplicate it? I know you can in Sublime. Just trying to save you a little time :)
I just tried. It doesn't work in my editor. sadpanda.jpg
Travis could you kindly please find out the width of the background image in the header,thank you
here it is: github.com/DevTips/Artists-Theme/blob/master/assets/img/hero-bg.jpg
Hay travis, first of all thanks a ton for uploading all the videos.
My only question from this tutorial is "how did you inserted a logo.html file" in current body tag body @24:23.
with those curly brackets.
Wouldn't you suggest using making the svg a font with something like icomoon? That way you can apply all the font styles to it. it might take a bit longer to make though.
You can do more with an svg. but fonts are kinda easier to use. I use them a lot. I wanted to try new things.
I see, I am still new to using the vector thing, so I am glad that you done it another way. I did no even think of using the way you did. Seems like it could be useful. But your videos are awesome!
thanks!
Hi Travis! This is such a cool tutorial but I am quite new to Espresso. Previously I used Dreamweaver to code my web. Would you please share me more about the difference between these two? Which one is better to stick on? Thank you!
I could talk about code editors, that would be fun. The truth is, it really doesn't matter. You could use text-edit and it would be fine.
Hi there!!! By following this folder structure using Jekyll for Windows 10 I was not able to compile SASS into CSS. Make sure to use a _sass folder to put your sass and scss folders so Jekyll finds them. By default Jekyll will search within a _sass folder....
Thanks for the video was already feeling hopeless
Amazing. I was a bit lost at first because we are using different programs, but I quickly caught up. Though I did not get through the whole video, I learned a ton. Thank you.
+DevTips Why did you create the photoshop image? Was it the "Design" stage? I guess what im really asking is, is it necessary to do it? If so, does it have to be in a photoshop like program, or will pen and paper suffice?
if you can go from pen to code, go for it!
I can't figure out why it doesn't import my sass.
Linked my _header to the _-sections-dir and linked the _-sections-dir to my all.sass
(@import '3-sections/-sections-dir')
but it doesn't work (tried @import '3-sections/header' and @import '3-sections/sections-dir aswel).
How to link all.sass to the css file in the _site folder? Cause it doesn't show any css.
+Bas de Vries Found it, stupid me.
+Bas de Vries Can you tell me how, i have the same problem
+Bas de Vries I have the same problem too :( Can you please share?
Okay, I got a question. Why you've made another span element inside h1 while u could add a border to h1? Maybe I'm wrong.
Also got a question about 20:57 you've added padding-top to the h1 element. Why? It was all about margin-top and not padding. It worked but don't know how.
***** The h1 is full width. I wanted the border to be only as big as the text..
Have you ever gotten that weird effect where your margin top jumps out of it's parent container? Padding-top circumvents that...
DevTips Oh got it sometimes :D Thanks for answer!
About h1 element. It's true - this is div but u could always set display: inline-block for it and then set ur border. Will it work?
How will it center?
DevTips I am not sure but if you set up inline-block wouldn't it center by margin: 0 auto? I just want to make sure there's no other option to do that and learn how it properly works.
did you try it?
well one question small....why u put span inside a h1 that says artists theme ?
+Rahul Sawant just to make it easy to make the decoration, in here he used span to make the border and padding look the way they are
+Souhail Kaoussi thanks...i understand that when i tried by myself.
Cool
I'm surprised, one of the best video what I watched at youtube, good job Mr Travis, congrats
Thank you for the compliment *****! What about the video did you like so much? (so I can do more of that :)
DevTips I like how you show the parts of the project (min 6, for example) and development at the same time and easily this could be a real project is not the typical tutorial/serie, really is from the start :)
excuse me for bad english, congrats again Mr Travis.
Awesome. Thanks for your answer!
I rebuilt the header exactly as you did, and everything works, accept the scaling of the when you rezize the browser window. Once i scale down to the point where it starts touching the sides of my browser window, the stops moving at the left side. If I keep scaling my window down, the right side of the starts to dissapear behind the window while everything else collapses as it should. What am I dong wrong?
Where does the Dev tips starter kit come into play? what parts are used beginning as I've noticed that some of your code is quite different the the code jekyll generates
Awesome playlist.
But im stuck when i set the background image
I have tried many possibilities but doesn't work:
background: url('file:///Users/K0nd3v/Desktop/aa/ss.jpg')
background: url(file:///Users/K0nd3v/Desktop/aa/ss.jpg)
background: url(../aa/ss.jpg')
+Conrado Mateu Gisbert Where is your background picture located in relation to your style-sheet? I keep my style-sheets and images in the same folder called assets so mine is simply
background: url(coastline-1.jpg);
If your picture is in a folder on a different level than your style-sheet then it would be
background: url(foldername/picturename.jpg);
That is if your picture isn't several folders deep from your style-sheets location.
the ../ is used to back-step one folder level. I'm not sure if any of this helps but it was worth a shot!
In theory I knew how to create the header and all the stuff you did cause I learned it, but ! Watching you work on it as if I was behind your shoulder and the thought process you put on it...its very useful for a student like me : ) Thanks man.
You are welcome!! Thanks for watching :)
hey travis,
first of all thanks for your awesome videos/channel! they really help me out :)
my problems are: changing the bodys bg-color to pink works fine. but when i try to style the header as you show in your video the console throws out some errors. it seems that espresso doesn't know .sass files. there is no text-highlighting and a non colored icon in the left navigation bar.
hope you can tell me how to fix it
greetings from germany :p
works now! there was a mistake in spelling. But there is still no highlighting for .sass .. any ideas?
+Hannes Lpd you should use a theme! ' I think '
Thanks for the awesome video. I have learned a ton. I tried to follow your steps to make a website. I first made the folder directory from jekyll, as you showed in other video. And while I tried to start coding, I realized that there are quite a few index.html files. I wonder which index.html you would code from, the one outside of all folders or within the _site folder?
Dont touch the _site folder. that's the output folder. Edit the index in the root.
Hello, I follow your instruction from beginning then download the starter kit; and rename it so it looks like the one on this video; but in beginning I had a problem in changing background to pink. How can I solve it? I'm still learning. Thank you
+timy m I found the problem; it's from main.css (which is near main.sass) in background-color: #ddd; the problem is how can I change it so it would work from header.sass? delete it wont result anything :(
hi , i don't know sass and jekyll , can i still follow the course and use an ordinary development way ?
+Rasha Nour EL-Din Indeed, but it will be hard for you to follow with the series!
its seems to be clean and awesome to be able to include html like that, the only thing i don't like from what i see is that you need to write new set of rules to a new sass file
This series is really good practice! Excellent videos and the site looks great! Question though, my footer isn't completely at the bottom of the page when I scroll down. It's the last thing on the page but theres a gap between the footer and where the page ends. Do you know why this might be?
Willys Side You don't have any content between the two. You need something to push the footer down
Good Day Travis,
I found a link to your videos (Parallax) at Treehouse and I enjoyed the lessons and the final project. I have found the How To Build a Responsive Website more challenging as the Artists-Theme project file on github does not start from the beginning. Am I missings anything? Naturally I started with the basic files provided by Jekyll command "Jekyll new portfolio" ; however the file structure is different and my attemp to replicate your file structure did not generate the desired result. Can you help me out with that? Thank you so much :)
I guess that I have been able to solve the above challenge after digging a bit in the repository. Not really the project file from square one but that works for me.
+Giuseppe Elia Brandi Awesome! Glad you like it!
Could you explain how you able to accurate know the pixel sizing or spacing when when hand coding your website from your Photoshop example?
There are a few tools you could use. I recommend xScope to get measurements if you are unsure. I was getting general measurement out of photoshop with the marquee tool (which shows dimensions as you draw a box) and the OSX screenshot tool (Command + Shift + 4, which also shows the dimensions in a tooltip)
Now, I have kind of a unique situation here in that I am the designer and the developer at the same time. So I will make final decisions as I code. I don't have a designer that I have to please, so I can change things even after the design is "done."
Also a big thing about being able to quickly take measurements is 1- I usually space things in 10px increments. So I can look at any given thing and say "oh, thats 30px or 20px" and 2- I've been doing this so long that it's in some way a reflex. I can look something and feel if it needs space added or removed. That just comes with time and practice.
Long answer, sorry. :)
awesome answer...
thank you.. super helpful.. I going to try and create an inspired version of your Nav bar in Codepen.. this is great practice.
***** hey cool! Share a link when you are done :)
hi travis i've got this
...error:
Error: Undefined variable: "$accent". on line 58
Error: Run jekyll build --trace for more information.
Regenerating: 1 files at 2016-05-28 02:41:56 Conversion error: There was an error converting 'assets/css/all.sass'.
please help me
I'm trying from hours to just change the background to pink, but not able to synchronize the css with the rest of the code. I've tried downloading the Artist-Theme & run the same, but there also css part is missing.
Not getting any clue, what to do next.
hi bro for my code
header
background: pink
height :450px
command line jekyll says: conversion error invalid css after height expected pseudoclass or element was 450px on line 3
whats wrong with my code?
you have a space after the height property. Its needs to be "height: 450px" not "height :450px"
hey Travis, I was wondering why did you use the padding property for the h1 instead of adding more margin to move it down? I'm new to this so forgive my question if it seems elementary.
I followed all the parts until now, but the problem is that when you begin this video many files are missing or they are different from your previous video that you made in codecourse about jekyll.. :/
Did you try the DevKit V1 or V2? Here's a link to V1: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
One more thing: Once you download the Starter Kit Version 1, the folder "4-pages" is the same as the folder 3-sections in this video.
Hey there, any tips on doing this in something other than Espresso? I'm trying to follow along but I don't have a Mac and I can't seem to get it to work well...
+Steve Feldman you can use any other text editors to work on this, use coda 2, or textmate, sublime text 3... or whatever you want!
smart, efficient &clear
thumps up for you , I enjoy watching every video here
The tutorial is awesome. This is exactly what I was looking for.
I had a question: I cannot seem to get the footer all the way down. It seems to hang right after the text. So I have header, text, footer, and white space. Any ideas why this is happening? Thanks!
Rohit D Don't worry too much about it. The content will push that down eventually.
Can you release the files you had at the start of this video PLEASE?
I want to follow along and build the site myself. The finished site is nice but I an't really learn how to buildl it siting in front of the already finished site files.
Hi Travis! I started your tutorial yesterday but I am stuck with this video. I do not know how to use jekyll so I need to go step by step following your video. But the Theme-artist-page that I downloaded has nothing to do with the one I see on the video since it is already finished all the work, could you please post the file with the starting project please? your videos are awesome and you are funny. Come to Italy to visit! Thanks
the vid suddenly jumps when you are putting in the background image, where is the image folder to call it from?
Hey! How can I make the footer stay at the bottom? It always has a lot of extra space at the bottom, please help me.
Travis, I have a question regarding SVG. What are the cases when the SVG is more efficient than PNG or JPG?
If you are using a vector-type graphic, like logos or icons its nice to use svg as they are resolution independent, and look great on HDdpi displays. Svg can also be animated and controlled via css and js. Raster images like jpg and png are good for housing complicated imagery like photographs. can you imagine the size of an svg that was photo-quality?
They are just different in kind and have completely different uses.
hi there- quick question. how do I get the image of the coastline to appear? I've created a new "images" folder in the root directory and added the image as "img.jpg".
Now in the _header.sass file, i've added background: url(../images/img.jpg) and the image does not appear. Is there an override somewhere that I'm missing? great stuff, Travis!
Great job doing this videos DevTips! I have downloaded the Starter-Kit. Now how do I bring jekyll into it?
Aravind Balla There is a jekyll branch to the starter kit. Make sure you start with that. It will be easier. github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
DevTips Thanks a ton!
Hey Travis, I watched your whole series. It's great that you've taken the time to do this and to make it available to everyone. I am looking into making my own website, but I'd prefer to use as little extra stuff as possible. I am big on separation of concerns and object - oriented programming, however, so I'd definitely like to use the includes. I found another method to achieve something similar using . Is there a reason you choose to use the {% include *.html %} method instead? Also, I tried playing around with the proposed method, and the #document makes it a little messy. Could you perhaps provide an example that would make it relatively equivalent to what you use, or is there a way to do so?
I'm not familiar with the method you are describing. Sorry.
I can't get the background:pink working...Running jekyll v 2.0.3 on windows 7 with Dreamweaver CS6, can you help me?i have downloaded your repo, the header include works fine but not the background pink :S. In the console i get some error saying that "This selector does not have any properties and will not be renderered"
Having the same problem as Tutorials Hour, when I remove the main.css inside the assets folder and remove the .sass-cache, the background: pink works fine, but when i put again the main.css on its folder everythings work bad, what should i do?rename the main.sass?or the main.css?
Meloscomo1 I left a link on your other comment. the starter kit that is optimized for jekyll: github.com/DevTips/DevTips-Starter-Kit/tree/Jekyll-Starter-Kit
DevTips thank you for your answer and your time. Yes I used that kit, but still having problems. In the main css of that kit there is a body background (the color you use on the photoshop template), I am getting that colour instead of the pink, the only way I can get the pink colour on body is when I delete the main.css, and I don't know why.
can I see your main.css?
DevTips How can i send it to you?
How would you change the font? Like lets say you want to change h1 to a different font than the kicker?
Change the font-family in the sass file.
For example:
h1{
font-family: 'Oswald', sans-serif;
}
.kicker{
font-family: 'Open Sans', sans-serif;
}
The kicker class gives its font a different style.
Which Sass file?
I simply gave an example above.
If you were going along with the video, he's completing one section at a time.
We're starting of with the header section which for me is located:
_includes/header.html
once we create the structure for our header section we can then go onto styling that same section and adding our own flare, for me this section is located:
assets/css/4-sections/_header.sass
in our _header.sass file we can change the kicker class to a different font.Keep in mind this is only for the header section of our website.
Hope this helps, let me know if you have any other questions.
Thank you a ton, managed to get it all settled.
Right now I'm just having trouble getting the Javascript to actually connect with the document.
Hi, isn't it common to design "mobile-first"? I was wondering, because you started with the desktop-design. Can you give me your thoughts on that? Thanks in advance ;)
HEY HELP!!!! When i scale down the browser, the title doesnt scale down, it just gets covered up by the browser, it collapses under each other, but font doesnt get smaller????
Hello mate,
I would have one question. How would you approach, if u wanted that the header could cover the whole page at the beginning?
Manually or any trick?
Thanx in advance,
J
height 100%
Hi Travis, the logo part is sensibly different is compared to what available at the moment on github. I seem to understand that this project is growing and becoming different from what explained in the video. Adding (In the youtube video About section) maybe a github link of the pulls that have changed the header explained in this video might be a solution?
Is this the commit you are looking for? github.com/DevTips/Artists-Theme/commit/6588e7ed3b87ce7aab78e10f4606d8674d788a5d
This was the first time I did a community project like this and I learned a lot. One of the things I'll do differently is to make github milestones for each video..
Live and learn.
DevTips
nop, it might be this one:
github.com/DevTips/Artists-Theme/commit/977fadfde3b1b7ddd3e70d515c25b9e895fd6bbf
unfortunately merges do not alway seem to say what they do... I am kind of lost...
Well mate, honestly this collaborative thing few years back (without such a great tool like github) would have been very hard. Its just that what you attempted was to build something that is not that immediate if you are not into the web dev business.
I'm a bit confused on margin for the text border. Is there a way to make the border fix to the text, like in yours, but without it messing up on differently-sized screens? Am I missing something? Thanks.
Hmmm, not sure. You want it to be different than the example I made??
DevTips It's kinda hard to explain.
travis i dont understand where that _config.yml came from. it was not there in the stater kit video and suddenly it came in this header footer video? if im not using this artist theme files for my project and i wanna do that template thing in end like you did in this video, what should i do ? should i create my own _config.yml ? if so how to link that in my project ?
I don't understand how this works. The DevTips-Starter-Kit-Jekyll-Starter-Kit does not have the same file structure within the css folder. It has 1-tools, 2-base, 3-modules, 4-pages. The 3-sections folder is not there. If I try to copy the files (whithin 3-sections) from the Artists-Theme jekyll get's a lot of errors. So how exactly should I do this, or what i'm I missing?
i really like your tutorials. but i'm having a problem with Jekyll right after i created the '_header.sass' file.The problem is jekyll serve doesn't compile my sass files.something about inconsistent indentation
Hey Travis , which tool you used to calculate the margin value between the elements of the nav?
where in the project did you include the open sans 300,400,700 link rel?
Part 3 is missing ='/ I hope I didnt miss anything. I left off at part 2 where you built the website in photoshop.
help me i have a problem with pulling header.html to index or anything...when I make _includes/header.html and in index do {% _includes header.html %} it just say on site {% _includes header.html %} i can't do anything im working on Atom cuz i dont have mac...
* {% include header.html %}
and those --- --- when i type them they be on site... Thanks for help!
I know that this is pretty straight forward, but i'm stuck at the beginning.
I added header.html and "header bro" appeared, then I added _header.sass to 3-modules and imported it in _-modules-index.sass but body is still not pink.
I cloned your Jekyll friendly git repo and i'm working on it.
Hey Travis!
Im trying to follow along using your new starter kit and when i use {% import header.html %} The index file just prints it as text instead of interpreting it, is this because the new starter kit does not have jekyll or am I just doing something silly!
It would be super helpful if you could do a video talking through the new starter kit and how we would create a website from the very very very beginning with just the starter kit, walking through all of the programs and how you use them!
Thank you so much your videos are great :)
Grace
+Grace Richardson Just solved that problem today. (newbie here btw). What I did is I deleted some of the files created by jekyll then replaced it with the starter kit Travis shared. It worked but I do not know if that is the right way to do it.
@3:42. you used {% include header %} in the body.
But i only see {% include header %} in my index page, instead of the content in the header.html.
RAY Rui You need to include the two lines of --- at the top of your index.html. If that doesn't work, it means you don't have jekyll installed
I had this problem as well, It was due to I opened the website index html in browser instead of going through the localhost procedure.
Munir Aljaw i installed jekyll but !!! MY SCSS SASS files DOESNT WORK !!! how can i compile them
Semih koç also it should be one more tutorial video after 'GETTING STARTED WITH JEKYLL THE STATIC SITE GENERATOR' tut please help DEVTIPS
Any particular reason you use Espresso over something like Sublime or Atom? Just curious.
Hi Travis! Thank you for the series! Just started watching the series today. One question please, why did you have to nest a span inside the h1 to get that border? Isn't it possible to just give the h1 an id perhaps and apply the border using that as the selector? Or is there a certain reason why it has to be done that way? Thanks man!
I had to do that because:
- i wanted the border to be only as big as the text
- i wanted it centered
So that was the solution I came up with, I'm sure there are other (better) ways.
Thanks!
yeah!
still get problem wiz pink background, my jekyll version is 2.5.3, does that matter?
Hi Travis, thanks a lot for sharing the videos. They are great and I really enjoy watching them. I watched some back and forth a few times since I am quite new to web design stuff. But I am making some progress. I have being trying to make a cover page with the same background of the header (background image + texts) blown up to the whole page but no success. I tried is to make an extra page 'entry.html' and '_entry.sass' with similar content pretty much the same as header.html and header.sass, but it does not work (no background image and only default text style). Maybe you have some tips?
Do you have a fork or some code I could look at?
DevTips
After some sleep, I realized that I made some mistakes. Now the background and formatting of the entry page is fixed. Thanks a lot for your willingness to help!! What I am trying to do is to make a dual language site. Maybe you can help me check whether what I did is a good way to do it. github.com/jingjingzou/Artists-Theme/tree/site. I made a copy of your index page and duplicated it into two: index.EN.html and index.CN.html and link to them in the entry.html.
Jing Zou I don't really have much experience in multilingual sites. This is interesting tho, I'm learning from you now :)
DevTips
I will try to figure out how to do it properly :) Have a great day.
Good luck, sorry I cant help more!
Hi travis!! how do i work with responsive images with perfect height and width? do you have any videos that has covered responsive images?
Wondering why you didn't use any UI frameworks like Bootstrap or Foundation?
At 5:00 when he links the _header.sass with the main website page, does anyone know how to do that in sublime text?
The magic is happening at 4:30 ish. This is not dependant on your code editor. So it will work with w/ sublime text exactly as it does here.
DevTips Thanks i was able to fix that but now i am having a problem where
{% include header.html %} does not link to my header.html and just writes that ( {% include header.html %} ) on my localhost page. I am using prepos and cannot figure out why it doesn't work. Any ideas why?
Are you using jekyll? There is no need to use prepros. Jekyll will compile your sass.