My first project using CSS and HTML

It’s been a lot of hard work and learning but it was worth it!

I started off with a drag and drop website and although it was very limited it was a starting point and I got to work with HTML and CSS even though I wasn’t writing the code. It meant that when I did start with Codeacademy it was like writing about old friends.

I decided to re-design my website mostly so that the content wasn’t restricted to a very narrow overall container width which is often the case when relying on templates. My friend promised to get me a copy of Dreamweaver and while I waited for it I discovered that a basic level of coding was still required. After more research I found that Codeacademy was one of the best places to learn and free also. Great!

By the time Dreamweaver came I already had got through the HTML and CSS courses so didn’t need the drag and drop facility anyway.

I’m very happy with the website so far. It wasn’t my first because I have also made a personal site that I used for practice and to test stuff out. It was helpful having a practice website. The first thing I learned when it went live was that I needed a htaccess file so when my main site went live I was prepared.

The website is now a tenth of the file size and loads up faster. With help from googling about I can fix canalogical issues and redirects which I couldn’t previously do and it’s much more responsive as well. I will at some point re-write the CSS to make it mobile first but that’s for another day.

I have now got a third of the way through the Introduction to Javascript course. I will need this to start making changes to my online price calculator. One project has finished, another has started!

What do you think?
[Link in profile]

4 Likes

It looks very clean! Great job, i’m actually working towards this right now, i have some sites built but are not ready to be out in the web, still need to clean my stuff up!

1 Like

Nice website. I would recommend making the gray bar at the top of the screen with hours and telephone numbers have an even amount of box space on the bottom as the top. I explained that kind of bad but id recommend there be equal amounts of gray above, below, and on both sides of the box. In summation, have the information inside the box look centered.

EDIT: When initially clicking on the link with my browser maximized(not in fullscreen) the spacing is fine. But if I make my browser into a smaller window then hit maximize again it makes it look off-centered. Maybe it is just a coincidence. Yes I am using Chrome. other than that though nice job, I am working on my first project as well for my friends company so it should be fun.

2 Likes

Thanks for spotting it. It looks like you are on a slightly wider screen than I’m used to and when I double checked the grey box it does go a bit strange on Chrome. I’ve tweaked the css so the text doesn’t wrap onto two lines anymore on Chrome. Can you see?

1 Like

It looks as though you have fixed the issues. It looks a lot better now on my size of screen. Assuming you havent already looked into it Bootstrap 4 is very nice for making your websites look polished. I tried making a website with just HTML and CSS and it was not looking good. You have managed to pull it off but I would still recommend looking into bootstrap for future projects :grinning:

1 Like

Wow! It looks awesome! You inspired me, can’t wait the time i will be able to do something like that :slight_smile:

4 Likes

I’m also working on my first project now, I hope I will soon be able to share with you

2 Likes

It really looks great, I hope one day i can make something like that

2 Likes

Great job textslayer96560 !!! The website looks very professional, I hope to be able to do something like that as soon as possible because I can’t wait to create my own blog.

2 Likes

Me too. Everyone wants to do something like that, no doubt. :keyboard:

1 Like

Thanks for all the replies and the tips and feedback, I appreciate it! I’ve loved working on this project, I’m sure you can see how much I’ve enjoyed doing it by how it looks!

It was great to have the freedom to design pages without being confined to templates. I’ve done it myself and know how it works and can change it anytime I like no problem!

Thanks also to Codecademy for my empowerment. The possibilities are endless!!

On a personal level, I only found out now that my father was a software debugger all his life. I knew he worked in computers but he always said that I should find another way to spend my life than work with computers. Which I did. In a way its brought us closer.

1 Like

this is nice. am doing my first site too.