My first project using CSS and HTML


#1

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]


#2

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!


#4

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.


#5

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?


#6

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:


#7

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


#8

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


#9

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