My first website


#1

Hi, I have been creating my first website based around guitar tuition using skills learnt at Codecademy. Please can I have some ■■■■■■■■? I have uploaded some screenshots. I want something fairly simple. I have a navigation menu at the top but not sure if I need it? Many thanks


#2

Looks good man :slight_smile:

The nav bar is always handy to have though. Maybe you can make seperate pages to link too in your nav bar, as your next goal. But it looks good!


#3

Thank you. I did think about creating separate pages but I’m not sure if I have enough content? Is there anyway I could improve the header/banner? I wasn’t sure where to put the title. I tried centering it with text-align: center; and it wouldn’t work. Not sure why?


#4

The title could get a better place yeah but I’m not sure where. Maybe crop the picture a bit so you can put the website title at the left. Or split the picture in half and put the title in the middle of it… Just experiment with it using a picture editor.

You could look at other guitar lesson websites to get some inspiration. Maybe put some audio on it made by yourself. Or a guestbook for people you have teached with some kind of rating to show how awesome you are lol …

Or instead of seperate pages, let the nav bar hover with the user when he or she scrolls down the page.
I dont know, just some ideas :stuck_out_tongue:

But overall the website looks clean and I like that personally.


#5

Thank you. I took on board your suggestions and changed the title. It looks much better. Ive added some menu buttons and created another page with my music on. Thing is, the buttons aren’t in the same place on either pages. They move as you flick between them. I copied the code from the first page for the second. Nothing is different.


#6

Why is it when I copy the exact same html and css it either doesn’t work or looks different? I dont understand what Im doing wrong. Im using notepad++


#7

I don’t know why it doesn’t work. Maybe someone else here knows. Edit: Do you link CSS onto your HTML code? Are you specifying in notepad++ that you are working with HTML and CSS?


#8

Now one of my buttons doesn’t show on one page, but it does on the others. The code is the same, I copied it from another page. I don’t know what i’ve done wrong. Also my map wont center even though again I copied the code from the first attempt, which did center. So essentially its hit and miss whether the code works or not, depending on whether the computer can be bothered to read it.

I put in the html header tag. The CSS is saved as a separate stylesheet for each page.


#9

Fixed it! The css link was pointing to the wrong stylesheet!


#10

How do I get my images to display in firefox? Sorry to keep asking for help! Ive been using Chrome. They work in Chrome, Edge and IE but not firefox. Thanks


#11

I’m not sure but I did a quick Google search. Maybe this website has some answers for you; https://support.mozilla.org/en-US/kb/fix-problems-images-not-show


#12

Its the backslashes in the img link, Firefox doesn’t like it.


#13

How do I prevent all my elements overlapping each other when I resize the window? I want everything to resize proportionally when viewed on a smaller screen.


#14

nav li {
display: inline-block;
padding: 50px;
}

.first {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
font-size: 28px;

}

.first:hover {
color: teal;
}

.second {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.second:hover {
color: teal;
}

.third {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.third:hover {
color: teal;
}

.fourth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.fourth:hover {
color: teal;
}

.fourth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.fifth {
width: 200px;
height: 40px;
border: 2px solid maroon;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
background-color: maroon;
color: white;
font-size: 28px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.fifth:hover {
color: teal;
}

.header img {
width: 1440px;
height: 400px;
position: relative;
left: 240px;
min-width: 1440px;
max-width: 1440px;
min-height: 400px;
max-height: 400px;
}

.cont {
position: relative;
}

.top-left {
position: absolute;
top: 11px;
left: 12px;
color: teal;
font-size: 124px;
}

body {
font-family: Helvetica;
text-align: center;
font-size: 20px;
}

.guitar img {
width: 1100px;
height: 600px;
position: static;
min-width: 1100px;
max-width: 1100px;
min-height: 600px;
max-height: 600px;
}

.bio {
line-height: 1.6;
color: teal;
}

.content {
line-height: 1.6;
color: teal;
}

.lessons {
line-height: 1.6;
list-style-position: inside;
color: teal;
}

.copyright {
color: teal;
font-size: 16px;
}


#15

Did you mean like when viewing on a mobile phone? Try:


#16

Sort of, but also when the browser window is resized. The title in the top left is positioned absolute. Any other positioning I try wont work. But this means is ignores the image next to it when the window is resized. How can I fix?


#17

When using position relative, the element appears towards the middle of the page. The only way I can push it up is by using negative pixel values like -405px;. It thinks the top of my page is 400 pixels from where it really is.


#18

Sorry, I give up. Thank you for your assistance. Something else ive failed at.


#19

Put your code in a div with a fixed width


#20

Sorry, it doesn’t work. Now 0px is not at the top of the page as well.

.cont {
width: 460px;
height: 400px;
background-color: blue;
position: relative;
top: 11px;
}

.top-left {
position: absolute;
top: 0px;
left: 12px;
color: teal;
font-size: 124px;
min-width: 400px;
max-width: 400px;
min-height: 400px;
max-height: 400px;
}

Dunc's
Guitar
Lessons