Most of the existing frameworks out there use SASS or LESS. So until that stuff gets ported to vanilla, it is useful.
Say Bootstrap 4 uses SCSS.
more like booststrap (boost as in C++ bloated libs). Let the boi learn the basics before drowning in bloat.
I agree. I merely queried his future plans 
I don’t know how far down the rabbit whole he wants to go. Myself, I’m 20,000 leagues down.
1 Like
You have my condolences 
DOM should be next IMO.
Day 5
Eh, Looks like I need to go about this differently.
I looked into calspan & rowspan, and they will be handy for sure (Thx @Dynamic_Gravity ).
Now. I’ve been making this table, but when I want to put an img in it I don’t like the way it turns out, so I spent a little bit of time looking at different sits and how they deal with this type of site, and I think I need to change this up a fair bit. In hindsight I souldn’t have gone all out with the table until i understood more about how all this works.
I played around with different ideas to get a feel for how they’d work, but I’m out of time for now, so I’ll just post it how it is.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EveryVehicleEver</title>
<link rel="stylesheet" type="text/css" href="css/teckmonsterpagecss.css">
</head>
<body>
<header>
<img src="eveiconsmall.png" alt="EVE" height="50px">
</header>
<section>
<h3>Introduction:</h3>
<p>This is a site for comparing the specs of various cars.</p>
</section>
<table>
<thead>
<tr>
<th>Img</th>
<th>USA</th>
<th>Start</th>
<th>End</th>
<th>Make</th>
<th>Model</th>
<th>Range (miles)</th>
<th>HP</th>
<th>Torque (lb·ft)</th>
<th>0-60 (mph)</th>
<th>Curb Weight (lb)</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="11"><img src="AMC_Amitron_Concept.jpg" alt="AMC Amitron Concept"></td>
</tr>
<tr>
<td>USA</td>
</tr>
<tr>
<td>Years</td>
</tr>
<tr>
<td>Make</td>
</tr>
<tr>
<td>Model</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<!--
<tr>
<td><img src="AMC_Amitron_Concept.jpg" alt="AMC Amitron Concept"></td>
<td></td>
<td>1967</td>
<td>?</td>
<td>AMC</td>
<td>Amiton/Electron</td>
<td>150</td>
<td>?</td>
<td>?</td>
<td>?</td>
<td>1,100</td>
<td><a href="https://en.wikipedia.org/wiki/AMC_Amitron">Wiki</a></td>
</tr>
-->
<tr>
<td>?</td>
<td>1938</td>
<td>?</td>
<td>Arzens'</td>
<td>La Baleine</td>
<td>125</td>
<td>10</td>
<td>?</td>
<td>N/A</td>
<td>?</td>
<td><a href="https://en.wikipedia.org/wiki/Paul_Arzens">Wiki</a></td>
</tr>
<tr>
<td>?</td>
<td>1942</td>
<td>?</td>
<td>Arzens'</td>
<td>L'Oeuf</td>
<td>63</td>
<td>?</td>
<td>?</td>
<td>N/A</td>
<td>772</td>
<td><a href="https://en.wikipedia.org/wiki/Paul_Arzens">Wiki</A></td>
</tr>
<tr>
<td></td>
<td>2014</td>
<td>Pres</td>
<td>BMW</td>
<td>i3</td>
<td>84-114</td>
<td>170-181</td>
<td>184</td>
<td>6.5+</td>
<td>2,635-2,899</td>
<td><a href="https://en.wikipedia.org/wiki/BMW_i3">Wiki</a> <a href="https://www.bmwusa.com/vehicles/bmwi/bmw-i3.html">Official</a></td>
</tbody>
</table>
</body>
</html>
CSS
*{
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: #131313;
}
header {
padding: 5px;
color: white;
background-color: #2d2d2d;
border-bottom: solid;
border-top: solid;
border-width: 1px;
border-color: #424242;
}
section {
background-color: #2d2d2d;
margin: 20px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #424242;
}
h3 {
color: #0077ff;
}
p {
color: white;
}
table {
text-align: center;
margin: 20px;
padding: 10px;
color: #0077ff;
background-color: #2d2d2d;
border-collapse: collapse;
}
thead {
background-color: #133a5e;
}
td, th {
border: 1px solid #0077ff;
padding: 5px;
}
a:link {
color: #0077ff;
}
a:visited {
color: #4fedff;
}
Website
@Dynamic_Gravity @redgek I’ll read what you guys are posting a little later (I’m very much out of time right now).
1 Like
Set a height for tr
I wonder if I should even mention flexbox
it’s an answer to every problem
I didn’t. I looked into it a bit and it looks like a bit more then I want to take on right now, but it looks like you agree.
I’m not sure how deep I want to go right now. If I can get this site to a state where I’d feel comfortable making it live I will go all in. I’d love to make sharing car info and bringing car people together my job.
Looks like something with JS. I’ll look into that when I’m ready for JS.
I’m wanting pretty large pictures of the cars, but if I do it the way I first did I will have a ton of wasted space to the right of the picture.
That looks useful. I’ll dig more into it.
Day 6
Didn’t work on it too much today. I’ve got a bit over an hour in it though.
I played around with the code more trying to figure out how to get it to look the way I want it, but I feel I need to take a step back and do some research. I looked into some things that were mentioned in this thread which was SASS, DOM, and flexbox (that took up almost all my time today).
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EveryVehicleEver</title>
<link rel="stylesheet" type="text/css" href="css/teckmonsterpagecss.css">
</head>
<body>
<header>
<img src="eveiconsmall.png" alt="EVE" height="50px">
</header>
<section>
<h3>Introduction:</h3>
<p>This is a site for comparing the specs of various cars.</p>
</section>
<table>
<tr>
<td rowspan="7"><img src="bolt_ev.jpg" alt="Bolt EV" height="200"></td>
</tr>
<td>Years</td>
<td>2017</td>
<td>Pres</td>
<td>Chevy</td>
<td>Bolt</td>
<td>238</td>
<td>200</td>
<td>266</td>
<td>6.5</td>
<td>3,580</td>
<td><a href="https://en.wikipedia.org/wiki/Chevrolet_Bolt">Wiki</a></td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
Didn’t change anything from day 5.
Website (still trying to figure out how to change the table to the right of the table. I need a table in a table. Guess I should see if I can do that)
2 Likes
Your first row is closed with an extra </tr> after the first cell, needs to be removed or add an opening <tr> after.
If you set the table width to 100% and only specify the first TD (the image one) to the width of the thumbnail then the rest of the TDs will spread evenly. Use height/width instead of rowspan/colspan, those are for asymmetric tables.
On my phone & tired, hope this makes sense lol.
Edit
Example
<head>
<style>
body
{
background-color: #404040;
}
table
{
width: 100%;
border: 1px solid #000000;
}
td
{
vertical-align: top;
background-color: #606060;
color: #FFFFFF;
}
td.thumb
{
background-color: #404040;
height: 100px;
width: 200px;
}
span
{
display: block;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2" class="thumb">IMG</td>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
</tr>
</table>
<br><br>
<table>
<tr>
<td class="thumb">IMG</td>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
<td>a5</td>
<td>a6</td>
<td>a7</td>
<td>a8</td>
</tr>
</table>
</body>
1 Like
Ah, yes. Thanks for catching that. I was attempting something and forgot to remove that part.
Holy crap! Thanks! That is exactly what I was trying to figure out. I’m still kinda thinking I want to go a different layout for the site, but still, I still needed to know that, so thanks a bunch.
Day 7
Looked into class attribute (should have already done this), and tried using them, but having far too much trouble with such a simple concept. It's probably because my code is a disaster, or because I'm tired AF right now. I'll probably start with a start with a clean slate tomorrow.I know all this is a complete pile of trash right now. I’ll start fresh tomorrow.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EveryVehicleEver</title>
<link rel="stylesheet" type="text/css" href="css/teckmonsterpagecss.css">
</head>
<body>
<header>
<img src="eveiconsmall.png" alt="EVE" height="50px">
</header>
<section>
<h3>Introduction:</h3>
<p>This is a site for comparing the specs of various cars.</p>
</section>
<table>
<tr>
<td class="img" rowspan="2"><img src="bolt_ev.jpg" alt="Bolt EV"></td>
<td class="1st">Years</td>
<td>2017</td>
<td>Pres</td>
<td>Chevy</td>
<td>Bolt</td>
</tr>
<tr>
<td class="1st">238</td>
<td>200</td>
<td>266</td>
<td>6.5</td>
<td>3,580</td>
<td><a href="https://en.wikipedia.org/wiki/Chevrolet_Bolt">Wiki</a></td>
</tr>
</tbody>
</table>
</body>
</html>
CSS
*{
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: #131313;
}
header {
padding: 5px;
color: white;
background-color: #2d2d2d;
border-bottom: solid;
border-top: solid;
border-width: 1px;
border-color: #424242;
}
section {
background-color: #2d2d2d;
margin: 20px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #424242;
}
h3 {
color: #0077ff;
}
p {
color: white;
}
table {
text-align: center;
width: 100%;
margin: 20px;
padding: 10px;
color: #0077ff;
background-color: #2d2d2d;
border-collapse: collapse;
}
thead {
background-color: #133a5e;
}
td, th {
border: 1px solid #0077ff;
padding: 5px;
}
a:link {
color: #0077ff;
}
a:visited {
color: #4fedff;
}
td.1st {
width: auto;
color: red;
}
td.img {
height: 200px;
}
Website (Broken AF)
4 Likes
Tip, don’t use numbers as the first character of variable or function names 1st although they may contain a number the1st. Good practice, this can screw you up in some languages.
In css using td.img or [element].[className] is limiting scope of the class name to only the specified element that contains the name.
td.teck
{
height: 200px;
}
<td class="teck"><img class="teck"></td>
So the td.teck class will only work on the <td> element. The <img> is uneffected.
The rowspan needs a little love. Specifying rowspan=“2” effectivly makes the cell exist in the next row. So you may specify 6 cells in the first row, but only specify 5 cells in the next row as one is occupied.
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> This cell is occupied by the previous row -->
<td></td>
<td></td>
</tr>
Good luck!
4 Likes
I went through your suggestions to understand what I was doing wrong before I start over, and I think I understand all the errs I was making. Thanks again! It really helped.
Code
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EveryVehicleEver</title>
<link rel="stylesheet" type="text/css" href="css/teckmonsterpagecss.css">
</head>
<body>
<header>
<img src="eveiconsmall.png" alt="EVE" height="50px">
</header>
<section>
<h3>Introduction:</h3>
<p>This is a site for comparing the specs of various cars.</p>
</section>
<table>
<tr>
<td class="two" rowspan="2"><img class="one" src="bolt_ev.jpg" alt="Bolt EV"></td>
<td class="1st">Years</td>
<td>2017</td>
<td>Pres</td>
<td>Chevy</td>
<td>Bolt</td>
<td></td>
</tr>
<tr>
<td class="1st">238</td>
<td>200</td>
<td>266</td>
<td>6.5</td>
<td>3,580</td>
<td><a href="https://en.wikipedia.org/wiki/Chevrolet_Bolt">Wiki</a></td>
</tr>
</table>
</body>
</html>
CSS
*{
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
body {
background-color: #131313;
}
header {
padding: 5px;
color: white;
background-color: #2d2d2d;
border-bottom: solid;
border-top: solid;
border-width: 1px;
border-color: #424242;
}
section {
background-color: #2d2d2d;
margin: 20px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #424242;
}
h3 {
color: #0077ff;
}
p {
color: white;
}
table {
text-align: center;
width: 100%;
margin: 20px;
padding: 10px;
color: #0077ff;
background-color: #2d2d2d;
border-collapse: collapse;
}
thead {
background-color: #133a5e;
}
td, th {
border: 1px solid #0077ff;
padding: 5px;
}
a:link {
color: #0077ff;
}
a:visited {
color: #4fedff;
}
img.one {
height: 200px;
}
td.two {
width: 400px;
}
Website
4 Likes
Day 8
I was working on it off and on today, but I went though the code I did yesterday and with the help of @SudoSaibot learn what I did wrong and how to fix it. Throughout the rest of the day I did a bit more research, and remade the site. I'm trying to reach a little deeper with my research. I've been trying to get away with as little as possible, but I see that's just making it harder on me later down the road (not sure if that makes sense).Anyway this is where I am.
HTML (working on the table themeing. I need to look into getting rid of the lines between the gray boxes )
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EVE</title>
<link rel="stylesheet" type="text/css" href="css/evecss.css">
</style>
</head>
<body>
<header>
<img src="eveiconsmall.png" alt="EVE">
</header>
<section>
<table>
<tr>
<td rowspan="6"><img class="thumb" src="bolt_ev.jpg" alt="Chevy Bolt EV"</td>
<td class="spectype">Years</td>
<td>2017</td>
<td>2018</td>
<tr>
<td class="spectype">Power</td>
<td>200HP</td>
<td>266lb-ft</td>
</tr>
<tr>
<td class="spectype">0-60</td>
<td>6.5</td>
</tr>
<tr>
<td class="spectype">Curb wight</td>
<td>3,580</td>
</tr>
</tr>
</table>
</section>
</body>
</html>
CSS
*{
font-family: 'Montserrat', sans-serif;
margin: 20px;
}
body{
background-color: Black;
}
header{
background-color: #303030;
border-top: 1px solid #686868;
border-left: 1px solid #686868;
border-bottom: 1px solid #1c1c1c;
border-right: 1px solid #1c1c1c;
}
section{
color: white;
background-color: #303030;
border-top: 1px solid #686868;
border-left: 1px solid #686868;
border-bottom: 1px solid #1c1c1c;
border-right: 1px solid #1c1c1c;
}
table{
border: 0;
}
img.thumb{
margin: 0;
height: 200px;
}
td.spectype{
text-align: right;
background-color: grey;
}
Website
2 Likes
i would have told you to start out w/ js first so you dont have to place your data on the html vs w/ js/typscript you can build your object(s) then display it using jquery || angular etc…
dont spend more than a week just w/ html css. you got the concepts down. I would go ahead add a cdn of bootstrap v.3.7 || ^ . play with that for a few days and move on to JavaScript.
https://cdnjs.com/ — fyi use this as practice.
after learning js w/3 / w4 learn react or angular
doing angular has a great tutorial on their site called angular heros. after that you will be right back to html/css. so like i said prior, dont spend too much time on html/css right now. you will do it plenty later on. as long as you get the basics.
What role are you trying to get into front/backend ~ fullstack?
1 Like
Day 9
(L1 was down when I wanted to post this, so hear it is the next day)All I did was look into Bootstrap as @Ctrl_Null recommended. Very interesting concepts, and if I went that direction right now I could probably make a nice site, but I’m not really going to understand how all that code is working. I think I want to learn a bit of JS first just so I can better understand how Bootstrap works.
I’m not just looking to build a site (I’d use something like Squarespace for that), I’m wanting to learn how to be a website dev.
Right now just front end, but I do want to learn the whole shebang. I’m also going to try and host it my self.
3 Likes
Day 10
I started looking into JS and I'm stoked that it feels so familiar thanks to a programming crash course I got not too long ago. Feels like a recap so far.I watched to lesson 9 on this series.
I really love this guy (no homo). He does really solid tutorials.
Again, no code to share. I’m finding it way harder to meet the Devember challenge now that my short homecation is over. I’m looking at getting a decent laptop to work on this while I’m at lunch and on the go.
I didn’t think I’d ever really want a laptop thanks to my desktop and phone, but damn could I use one now.
4 Likes
just fyi JS does not rely on bootstrap and vise versa.
its good you are still at it, keep it up
2 Likes
Day 11
To day I acctualy did some JS, but just following along with the tutorial (nothing on my own). I started over from the beginning, but I remembered most of it from the first time through.Here’s the last bit of code I did.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> JS Test </title>
<script type="text/javascript">
var apples = 5;
var pie = 3;
apples += pie;
document.write(apples);
</script>
</head>
<body>
</body>
</html>
Website
Cool stuff. I was actually having a bit of fun today.
I did the coding on my Note’s Dex with a 12" portable monitor. I was testing to see how the experience would be, and it isn’t half bad so far. I think I’m going to try and make a laptop dock for my phone (like the Razor phone’s), and use that instead of getting a laptop.
3 Likes