megarockexe
Member
I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.
I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.
I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.
I don't know why I thought I could build a website all on my own. I'm okay at reading HTML and I'm great in e-mail land. But trying to figure out this Bootstrap stuff is tough. I'm just not used to this at all.
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years agoWhat's confusing you with bootstrap?
Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.I use Bootstrap all the time, what don't you get?
Ps. I use sublime text for just about anything. Except emailings where you use tables, then it's dreamweaver.
The cool thing about bootstrpa is that you only really have to understand it at a very superficial level.
Need a button? Go to the docs, click on button, copy and paste the example. Keep reading if you need to modify something about it. It's usually explained right there.
I'm guessing the grid is maybe what's confusing you?
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago
Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.
I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago
Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.
I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.
Stop using Dreamweaver and start doing things by hand, because you learn much more by doing it by hand.
Here is what I'm working with. I've made some elements generic because it is work-related.
The part I'm struggling with is getting the images in the dark containers centered vertically. And then what will be difficult will be getting the floating square image in the back to actually be behind everything.
Modern Dreamweaver is based on Brackets so you should be able to do things "by hand" with Dreamweaver too quite extensively.
I really wanted to try Bootstrap for this, but I am somewhat familiar with HTML and CSS. I don't think my skills are at the level yet to build a site from scratch. At least not something as complicated as what I'm working with. This is also somewhat work-related, and I wanted to use Dreamweaver because that's what the team is more familiar with. The Codecademy course did help with the very basics and it did have me writing more if it myself.
Here is what I'm working with. I've made some elements generic because it is work-related.
The part I'm struggling with is getting the images in the dark containers centered vertically. And then what will be difficult will be getting the floating square image in the back to actually be behind everything.
Yes, Flexbox worked. That is definitely still confusing for me. I did a flexbox test on a website once and I honestly don't know how I got through it. It's was really hard and I still didn't understand the concept.- Vertically centering can be a pain, but if you can use Flexbox it's just behind a simple align-items/align-self/justify-content centering
- The image in the back problem is solved by having a absolutely positioned container in the back with a width of 100wv and height of 100vh and centering the image to that container. You can set the z-index property if you need to to bring the background container down.
I'll do this at the end as a sort of review of how it turned out. I'm pretty sure I'm misusing classes and other beginner mistakes. I hate being so inexperienced.Try putting your code here so we can actually mess around with it and give you a solution:
https://jsfiddle.net/
I'll do this at the end as a sort of review of how it turned out. I'm pretty sure I'm misusing classes and other beginner mistakes. I hate being so inexperienced.
Yes, Flexbox worked. That is definitely still confusing for me. I did a flexbox test on a website once and I honestly don't know how I got through it. It's was really hard and I still didn't understand the concept.
I'll do this at the end as a sort of review of how it turned out. I'm pretty sure I'm misusing classes and other beginner mistakes. I hate being so inexperienced.
Edit: Oh forget it. I've gone on long enough and already messed it up beyond my ability to fix it.
Here's that section done to the best I could understand. https://jsfiddle.net/x4wcyuab/
I'm using a proxy script to get html from an API endpoint and displaying it under my domain. Problem is, both redirects and document.write() change the URL in the window. What's the best way to get a response from another source without changing the URL so that relative links work the way I want? Iframe?
Well, your example is certainly much cleaner and easier to read and therefore more maintainable. I didn't understand the purpose of the section tag here. Isn't it almost the same as the first container?You're not letting bootstrap do the work for you and you're making things more difficult for yourself than they need to be. Always let the framework you are using do the heavy lifting for you.
I've stripped everything back for you, making use of the bootstrap grid and classes to create the basic structure for you here:
https://codepen.io/anon/pen/OgPNNb
What you need to do from here is get the background images in. You can stack the two background images on top of each other and position them where you need them to be by using the techniques outlined here:
https://davidwalsh.name/css-multiple-background
demo: https://davidwalsh.name/demo/css-multiple-background.php
Assign a class to the section tag and use that to set a height (e.g. 900px) to the section. Then get the background images in using that class and position them accordingly.
Look through the code in the codepen I've created and let me know if anything doesn't make sense to you, happy to help.
Well, your example is certainly much cleaner and easier to read and therefore more maintainable. I didn't understand the purpose of the section tag here. Isn't it almost the same as the first container?
The multiple BGs is definitely useful. I didn't know that was possible. I did want either a parallax or overlap effect with the background square image, and now I got to see both.
I also didn't know about these column offset classes. I think that's how I would make a section where I want text in the center, but not all 12 columns wide?
Another concern I have about the text box sections is how it's done with absolute pixels. I ran into the problem where one had too much smaller text, which caused that one box to be larger than the others at certain widths. And that meant the image had to be vertically centered in the box regardless of the box's height.
But you got the gutter problem solved more elegantly. Maybe because you put two boxes in a row instead of all of them in one row, which I thought would turn out better. I thought it would be easier but I really messed it up.
And finally regarding classes, it is normal to have one-off classes for single properties? That didn't feel right and it still seemed messy when I finished the page.
Haven't tried jQuery yet but I'm using the former for the actual request, it's just that when I write it to the document it's changing the window URL. Unless I was supposed to do something else with the response!Xmlhttprequest, or numerous convenience methods like jquery's $.ajax().
Haven't tried jQuery yet but I'm using the former for the actual request, it's just that when I write it to the document it's changing the window URL. Unless I was supposed to do something else with the response!
From a markup perspective there is no difference between a section and a div tag but it's best practice to use section tags to make your code easier to read and maintain. So when you glance at your code you can immediately see "that's the hero/header section", "that's the carousel section", "that's the footer section" so on and so on. When coding your CSS you should also follow this structure and order by breaking things up with comments. So you can have a section with your "global" CSS instructions for elements that stay consistent throughout the website/page such as text sizing, colours etc and then your section specific mark up. All in all, it means that you are essentially creating your own library of reusable HTML/CSS components so that if you ever need to make a similar website or create similar sections for new websites you have code you can copy across to your new site and you're up and running a lot quicker and easier than if you had to sift through your code to figure out what everything does and figure out where one section ends vs where another one starts.
Use column offsets when you want to position column(s) horizontally and have space in between them. So in this case you have a column occupying the left side of the page but you want another element to be to the right of the page with a big gap in between them, calculate the offset required and use it to your advantage. You are correct in that if you want to centre a single column you can also use column offset which should be defined as half of the remaining amount of column width space you have out of the original 12.
You can reliably position elements using absolute and then defining the number of pixels as long as you have created a div around those elements you are positioning with a set width and/or height. Therefore there is no way the elements can move around on their own accord since the margins are "pinned" against another div with a set size. This is the most reliable way to vertically centre elements within bootstrap columns and prevent them from "floating" around at different screen sizes. Or at least it's the most reliable way I've found .
Always make a new row when creating a new div that you want to be on a new line. It's the way it's supposed to be in bootstrap, that way things will scale down nicely to mobile devices for you as well.
You can absolutely use individual one off properties for single classes, if you prefer to use descendants then you can as well if you feel that's a more elegant way of doing things. It ended up that way in the code above because I created just a single box for the speaker name boxes, got it looking the way it needed to and then copy and pasted that for the remaining 6 required.
The fact I've only had a few hours with it. I took the latest Codecademy course on it, and I understood it a bit more from when I last did it 2 years ago
Basically the CSS of it now. I sort of get how you make containers and put rows in them and cut up the rows how you want, but that's it. Maybe the site I'm trying to build it above my skill level.
I'm using Dreamweaver, so the components are there and insertable. Customizing them has been a problem. I don't know where I should be making my changes.
Took a $15 Udemy class on Angular. Figured it was worth it. I've been meaning to learn it so should be some good practice after I brush up on my Java Spring skills.
Using bootstrap, what's the correct way to add the red and gray backgrounds to the page?
Using bootstrap, what's the correct way to add the red and gray backgrounds to the page?
body {
background-color: red;
}
CSS
.bg-red {
background-color: red;
}
.bg-gray {
background-color: gray;
}
<section class="bg-red">
<div class="container">
<div class="row">
<!-- columns -->
</div>
</div>
</section>
Had a client at work request a quote on making their website mobile responsive about a week back, I took a cursory look at the code and layout and told my supervisor it would take about 8 hours at most. The site was built in 2014 and a few things would need to be updated and changed, and then digging through our old lazy ass freelancer's code would take some doing. I thought it was fair. I have cleaned up a few of this clown's sites before, it usually takes less time but this is a 10 page site with a lot of dumb js plugins.
Fast forward to today: Client approves, and I get to work. I start by inspecting the old site to see how the banner was put together and how I can make it scale for mobile. Whelp, I goofed by not inspecting any deeper than the surface level. Turns out our old shitty freelancer decided to set the background image as the full PSD file for the design with main text are hidden, but all of the button, header, and menu text shown. He used fixed height and width a tags to make the menus and buttons--setting the text indent on those tags to -10000px and positioned pretty much everything absolutely to match the PSD background image. The only live text on the site is in the main content section. Needless to say I am rebuilding the site from the ground up, and it's probably gonna take a bit more than quoted; thank god we still have the source psd for the design in our files.
Is this how websites were built in 2013-2014, or am I justified for wanting to strangle this old freelancer? Anyone else had to do something dumb like this?
Wait, so the site is just one giant image with absolutely positioned text all over the place on top?
Holy moly!
Had a client at work request a quote on making their website mobile responsive about a week back, I took a cursory look at the code and layout and told my supervisor it would take about 8 hours at most. The site was built in 2014 and a few things would need to be updated and changed, and then digging through our old lazy ass freelancer's code would take some doing. I thought it was fair. I have cleaned up a few of this clown's sites before, it usually takes less time but this is a 10 page site with a lot of dumb js plugins.
Fast forward to today: Client approves, and I get to work. I start by inspecting the old site to see how the banner was put together and how I can make it scale for mobile. Whelp, I goofed by not inspecting any deeper than the surface level. Turns out our old shitty freelancer decided to set the background image as the full PSD file for the design with main text are hidden, but all of the button, header, and menu text shown. He used fixed height and width a tags to make the menus and buttons--setting the text indent on those tags to -10000px and positioned pretty much everything absolutely to match the PSD background image. The only live text on the site is in the main content section. Needless to say I am rebuilding the site from the ground up, and it's probably gonna take a bit more than quoted; thank god we still have the source psd for the design in our files.
Is this how websites were built in 2013-2014, or am I justified for wanting to strangle this old freelancer? Anyone else had to do something dumb like this?
Nope that's not normal, for any time period. So yes you are justified.
I'm doing a rebuild for a client at the moment and decided to completely disregard the original code, start from scratch and charge accordingly. Sometimes it's better that way, I hate dealing with ther people's shitty legacy code.
.show-some-element {
magical-property: '#some-element'
}
I'm trying to remember the name of the CSS property that displays elements inside of other elements.
Code:.show-some-element { magical-property: '#some-element' }
Will display the element with ID some-element inside of an element with the class show-some-element.
Anyone recall?
I'm trying to remember the name of the CSS property that displays elements inside of other elements.
Code:.show-some-element { magical-property: '#some-element' }
Will display the element with ID some-element inside of an element with the class show-some-element.
Anyone recall?
I'm trying to remember the name of the CSS property that displays elements inside of other elements.
Code:.show-some-element { magical-property: '#some-element' }
Will display the element with ID some-element inside of an element with the class show-some-element.
Anyone recall?
.some-element {
...
content: 'Hello';
}
[B]api.php[/B]
Route::get('/notes', function () {
return App\Note::with('user')->get();
});
Route::post('/notes', function () {
Auth::user()->notes()->create([
'note' => request()->get('note')
]);
return ['status' => 'Success!'];
});
[B]User.php[/B]
public function notes()
{
return $this->hasMany(Note::class);
}
[B]Note.php[/B]
public function user()
{
return $this->belongsTo(User::class);
}
Usually you have a route for all notes (/notes) but also a route for only the authenticated user's notes (/me/notes).Has anyone here used Laravel and Vue? I've been trying to figure out how a logged-in user can only see data from their end, so every user has unique data. Seems really basic, but every tutorial I've stumbled upon has always some kind of data that is updated on the homepage, with the user's name attached to it. Basically a task list, but I want every user to have heir own unique task in their profile.
[B]api.php[/B]
Route::get('/me/notes', function () {
return Auth::user()->notes;
});
No. It wasn't Sass/Less or JavaScript.
Ugh. Maybe it was a prototype setting, but you could literally set the content to be another element, all through CSS alone.
edit: https://hacks.mozilla.org/2010/08/mozelement/
Seems to be FF only.
i've got a little exercise i wanna do for myself but not sure where to start. i want to rejigger the search results page of a website into something more to my liking, ie make for more efficient viewing. which tech/languages would be good for reading html, parsing it and spit it a new page for display. just pointing me in a direction would be good since i wanna learn along the process.
[HttpGet]
public async Task<IHttpActionResult> TestQuery()
{
string retString = "";
object ret;
string commandText = "[...edited out...]"
try
{
using (SqlConnection conn = new SqlConnection(_connectionString))
{
using (SqlCommand cmd = new SqlCommand(commandText, conn))
{
await conn.OpenAsync();
ret= await cmd.ExecuteScalarAsync();
retString = (string)ret;
}
}
}
catch (Exception ex)
{
throw new ApplicationException(ex.Message);
}
return Ok(retString);
}
============================================================================================================================
T E S T C O D E
============================================================================================================================
[TestMethod]
public async Task TestQuery()
{
try
{
string path = await TestQueryAsync();
Assert.IsTrue(path.Length > 0);
}
catch (Exception ex)
{
Assert.Fail(ex.Message);
}
}
private async Task<string> TestQueryAsync()
{
string ret = "";
HttpResponseMessage response = await _client.GetAsync($"api/test/TestQuery");
if (response.IsSuccessStatusCode)
{
ret = await response.Content.ReadAsStringAsync();
}
return ret;
}