My first webpage, something feels off

My first webpage, something feels off
0

#1

Not counting my tribute page, this is the first web page that I’ve ever made after studying HTML/CSS for the past month. I was wondering if anyone here had any thoughts about it? I know there is not much there right now but I wanted to check in and see if I was on the right track.


#2

Hi, @Luke-the-EMT. Doing this without the help of frameworks such as Bootstrap can be really challenging, but that’s not to say you’re not on the right track.

The red navbar text really doesn’t go well with your color scheme. Try making it white instead. Now I am not well-versed in design, so I can’t think of any substitute to red other than white. You may find Paletton a useful resource to pick color schemes.

Also, Comic Sans (or cursive, as I see in your CSS) kills the design big time.

Bonus: If you’re planning to do this with CodePen all the way I suggest you move the CSS to the middle CSS textbox. It will make your code neater, plus you can take advantage of tools such as “Tidy CSS” and “Analyze CSS”


#3

Hey, thanks for pointing those two things out. Switching it from red to white looks much better. I’m not any kind of designer so I was just trying to avoid repeating the same color too much. And getting cursive out of there dose make it better also.

I’m trying to see if I’m able to do this without using Bootstrap just to get a better understanding of how to put everything together.

I did copy and paste this from my text editor into the corresponding boxes, although when I did I lost the background color. For some reason it only came back when I put everything in the HTML box.

Thanks again for your response :slight_smile:


#4

Hey @Luke-the-EMT. It’s great that you want to learn how to do it without using bootstrap. Bootstrap is great and more or less a common practice these days, but you will definitely learn a great deal by trying to do some things on your own.

One thing to remember when using CodePen is that the HTML section is really ONLY the content between the <body></body> tags in your editor. Any local links to CSS files will not work and any links that use a url will override anything you place in the CSS section of the page (may be the reason your background got lost). It’s best pull in all of your libraries you plan to use from within each section as they place those links in the hidden <head> section.


#5

Hi @kblock-dev . Yeah, It dose seem more beneficial to get things down without Bootstrap first. I’m having a really hard time with CSS positioning for some reason, signed up on Udemy’s “Web Developer Bootcamp” and will post my portfolio once I get a more in-depth understanding there. And thanks for pointing out how Codepen processes HTML links, that would have been frustrating lol.