My first blog site

After completing html / css I started Javascript but stopped to polish up on some css fundamentals.

media queries / responsive design is something originally I just couldn’t grasp but through perseverance and practice I have now kind of nailed it (or so I believe)

please take a look at my site.

https://aines25.github.io/christians/index.html

Thanks

9 Likes

Thank you.

Good luck with your journey, I am on my way to learning JS, at the minute it is a lot to take in but soon I’m sure it will become a lot easier with practice.

good job.

Few things:

  • next time when you will be design UI, try try to pay more attention to color contrast and font size.
    (in my opinion some fonts are too bright and too small).
  • and maybe don’t align all text to center - meybe try align-left.

But other that i very very like your site :slight_smile:

3 Likes

Great job! That project is next on my list. I just finished the company website.

So cool that your links actually go to something! I haven’t made a multi-page website yet. When looking at your site on an iPhone, it’s a little difficult to click the links. You may consider adding more margin/padding between the anchor elements and making the clickable icons (Facebook, Instagram) bigger.

I really like the look of your site. I have this on my list of things to do as well. I was apprehensive because of writing enough content for it I like that you have just been using the fill text like a boss to make something. That gives me the right confidence boost for met o get started on mine. Thank you and good luck!

Just wanted to let you know that I took a look at your site and it was excellent. It was responsive and liked the look. Congrats! I hope you don’t mind a ‘minor’ feedback and I mean it’s minor. Your navbar anchotags are extremely light. At least on my laptop. As well as on your cards, and in the footer area. Don’t get me wrong, I love it and feel bad for mentioning anything. I just thought I’d mention it to help. It would make it a lot easier to read. Other than that…excellent!

Thank you all for the feedback.

I will take a look at points mentioned and look to work on them.

Currently working my way through Javascript, having a bit of a hard time but I’ll get there.

Great job!

One thing: the images on your home-page take forever to load.

1 Like

Wonderful Site! Waiting to see the life section that currently has lorem ipsum hahahaha

Dude your website is awesome, keep it up!!! I have one question: when I hover over your nav links at the top, their font becomes bigger (I assume you’ve made it through transition), but I also shoves neighbouring anchor links, how can I avoid this, I want my other anchor links rest the same size when I hover over one of them.
Any suggestions?

Hey all, Thanks for all the feedback.

Haven’t updated the site in a while due to me finishing Javascript which I have just done, yippee, so more updates soon.

With regards to your question r.e the font becoming bigger, I did this via the :hover on my nav links and changed the colour & font-size when this action is taken place.

looking forward to getting back to the site over the next few days.

Example of how to change li size without moving adjacent elements. In case anyone in the future needs to do the same.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/normalize.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <title>Document</title>
  </head>
  <main>
    <body>
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
      </ul>
    </body>
  </main>
</html>

ul {
display: flex;
align-items: center;
height: 50px;
background-color: dodgerblue;
margin: 0;
}

li {
padding: 0 1rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: rgba(255, 255, 255, .9);
list-style-type: none;
text-align: center;
font-weight: bold;
transition: all .2s ease-in-out;
}

li:hover {
text-shadow: 0 0 0 rgba(255, 255, 255, 1);
transform: scale(1.2);
}